SQ|使用純 CSS 在 Squarespace 建站平台做出「偽雙語系導覽列」
不升級方案、不裝插件,只用 CSS 製作偽雙語系網站
![](https://assets.matters.news/embed/fa32206c-558d-41d1-9afd-6660275bc8ec.jpeg)
僅運用 CSS,在 Squarespace 平台模擬雙語系網站之語系切換。
前言
當客戶需要製作具備管理後台的網站,且預算又不高時,通常會建議客戶使用 Wordpress 或是 Squarespace 網站建立平台來製作網站。
Wix、Weebly,我也有使用過,但不適合我。
回歸正題,本篇適合會使用 Squarespace 網站建立平台,及具備 CSS 基礎的使用者。分享使用 CSS,人工製作出偽雙語系網站的方法。
Squarespace
Squarespace 是一個由網站建立工具、網頁代管服務及部落格平台所組成,並以軟體即服務模式運作的網上內容管理系統。該服務讓個人或公司建立及修改網站及部落格。 — — WIKI
我覺得 Squarespace 使用起來能快速建立一個美觀的網站,具備多種版本,大部分的版面設定都是內建好的,多為簡約的風格,基本上不要作亂都不難看,當我們需要微調介面的細節,才會另外用 CSS 去新增樣式。
詳細的介紹跟使用心得,之後再分享。
在使用 Squarespace 建立「偽雙語系網站」之前,有建立過幾次網站,稍稍熟悉 Squarespace 的網頁架構。
Squarespace 官方提供的方法
Squarespace 本身也提供建立多語系網站的方法:Creating a multilingual site in Squarespace
但是!這方法僅適合一頁式的頁面,請參照以下官方提供的頁面結構排列:
![](https://assets.matters.news/embed/fe202401-03f6-4b69-9903-8d5838b4d48c.jpeg)
![](https://assets.matters.news/embed/6413937f-85f9-44b6-820c-96d1a7ecda8a.jpeg)
- 一個一頁式代表一個語系,一頁式中由多個區塊組成
- 有幾個語系就建立幾個一頁式
- 製作一個 Home page,讓使用者進入到 Home 時先選擇「語系」再進入對應的一頁式頁面
聰明的你一定知道,官方提供的辦法,很受限於網站的「主題」。然而我們不可能只承接一頁式網站;有時候承接的可能是多頁式,或者一頁式與多頁混用。
好,那就不要用 Squarespace 的平台建立網站
正解!(誤)
但是我就各方面不足,好想用 Squarespace 架站啊!
於是我想到了另一個辦法
考量目前客戶挑選的方案(方案費用差距不小)無法置入插件,倒不如把每個頁面都建立出來,並在不同語系中,在導覽列隱藏特定的頁面!
一、建立頁面
假設我有五個頁面,分別是:首頁、作品、產品、活動、資訊;這時我需要製作出這五個頁面的英文版本,將他們依照順序排列。
![](https://assets.matters.news/embed/252d8fbc-7e9b-47da-82ed-558db40c1834.jpeg)
- 依據頁面排列的規律,中文為單數列,英文為偶數列
- EN 連結:連結至英文首頁
- 中文 連結:連結至中文首頁
正常情況下,所有導覽列頁面都會顯示,如同示意圖的「全部頁面」的導覽列狀態。
![](https://assets.matters.news/embed/eca0ac86-ffbf-4d17-8cbb-7c642337e529.jpeg)
最終效果需能切換為「中文」、「英文」版本的導覽列。
二、找出對應的樣式名稱
使用網頁檢查工具,找出對應的樣式名稱,因為 Squarespace 頁面有各自的 ID,若我們不指定 ID ,樣式會套用至每個頁面。
![](https://assets.matters.news/embed/12c366e9-39d5-4c78-a87e-45d21950daaa.jpeg)
- 找出頁面的 ID:有幾個頁面就要找出幾個對應的 ID,頁面 ID 通常是
collection
開頭,順帶一提,如果是文章頁面,ID 則是item
開頭 - 找出導覽列的項目樣式名稱:以此範例為例,導覽列的項目樣式為
.header-menu-nav-item
三、CSS 樣式
在 Squarespace 後台 Design→Custom CSS(建議在 Sublime Text 3 編輯器建寫好樣式再貼回 Squarespace,原因在文末)
運用 CSS 選取器,控制導覽列的單數、偶數列的顯示,達到偽雙語導覽列的效果。
:nth-child(odd)
選取單數:nth-child(even)
選取偶數
CSS 樣式
中文首頁隱藏英文導覽列項目,故我們選取「偶數」項目,並將他隱藏。樣式中的 ID 編號是示意圖,請找出自己的頁面 ID,並更換他。
#collection-0000001.header-menu-nav-item:nth-child(even) { display: none;}
在多個「中文頁面」隱藏「英文頁面」導覽列
邏輯相同的情況下,找出中文頁面的 ID,雖然共用同一個樣式,但他們是不同的頁面,於是編寫成以下方式。
#collection-0000001.header-menu-nav-item:nth-child(even),#collection-0000002.header-menu-nav-item:nth-child(even),#collection-0000003.header-menu-nav-item:nth-child(even),#collection-0000004.header-menu-nav-item:nth-child(even),#collection-0000005.header-menu-nav-item:nth-child(even) { display: none;}
舉一反三
如果是在英文頁面,隱藏中文頁面的導覽列,則使用 :nth-child(odd)
選取單數列項目(也就是中文頁面)並將他隱藏。
#collection-0000001.header-menu-nav-item:nth-child(odd) { display: none;}
最終效果
![](https://assets.matters.news/embed/24739133-de5e-4ecd-a64c-b3c857cb3887.jpeg)
三、補充
其餘小提醒。
調整語系的樣式
- 使用 CSS 選取器,選取倒數兩個項目(EN、中文)讓他們顯示在每個頁面,並調整顏色,與其餘項目稍作區隔
- 接著選取最後一項(中文)增加樣式,讓語系之間有一條直線隔開,使整體更加精緻
以上選取器的寫法再自己查囉。
![](https://assets.matters.news/embed/0bd2143c-9c74-41ae-981c-258d91ed5e78.jpeg)
缺點
做工繁複,有多少頁面就得做多少次。
有更好的作法,可以跟我說 :)
使用 Sublime Text 3 編輯器
如果你直接在 Squarespace 後台 Design→Custom CSS 中寫樣式,不論是內建的小視窗還是展開的大視窗,都很不舒服…。
![](https://assets.matters.news/embed/40f626ce-c3c2-4eb7-bbec-db8a4686d1c4.jpeg)
推薦你使用 Sublime Text 3 編輯器,編輯好之後再貼過到 Squarespace,也能把大個階段的更動存一個 CSS 檔(在 Squarespace 是無法一直倒回先前的版本哦)
![](https://assets.matters.news/embed/210d56a6-45a7-4a83-92b9-e4e9719ae290.jpeg)
可以躺著,為什麼要站著?(????
記得在 Sublime Text 3 建立檔案之後,存成 CSS 格式,編輯器才能判別你的語言,顯示對應的顏色。
最後的碎碎唸
以上僅分享,目前為初學者,如果有更好的方式都歡迎跟我說:)能把新學習的技能運用上,雖然笨笨的,卻能稍稍突破,改變作法!
Repeating the same behavior will repeat the same result.
文章首次發布於 Medium,目前閱讀的版本為同步版。
感謝你的閱讀及支持,任何問題都歡迎來信交流|imjhanemi@gmail.com