SQ｜使用純 CSS 在 Squarespace 建站平台做出「偽雙語系導覽列」

不升級方案、不裝插件，只用 CSS 製作偽雙語系網站

僅運用 CSS，在 Squarespace 平台模擬雙語系網站之語系切換。

前言

當客戶需要製作具備管理後台的網站，且預算又不高時，通常會建議客戶使用 Wordpress 或是 Squarespace 網站建立平台來製作網站。

Wix、Weebly，我也有使用過，但不適合我。

回歸正題，本篇適合會使用 Squarespace 網站建立平台，及具備 CSS 基礎的使用者。分享使用 CSS，人工製作出偽雙語系網站的方法。

Squarespace

Squarespace 是一個由網站建立工具、網頁代管服務及部落格平台所組成，並以軟體即服務模式運作的網上內容管理系統。該服務讓個人或公司建立及修改網站及部落格。 — — WIKI

我覺得 Squarespace 使用起來能快速建立一個美觀的網站，具備多種版本，大部分的版面設定都是內建好的，多為簡約的風格，基本上不要作亂都不難看，當我們需要微調介面的細節，才會另外用 CSS 去新增樣式。

詳細的介紹跟使用心得，之後再分享。

在使用 Squarespace 建立「偽雙語系網站」之前，有建立過幾次網站，稍稍熟悉 Squarespace 的網頁架構。

Squarespace 官方提供的方法

Squarespace 本身也提供建立多語系網站的方法：Creating a multilingual site in Squarespace

但是！這方法僅適合一頁式的頁面，請參照以下官方提供的頁面結構排列：

1. 一個一頁式代表一個語系，一頁式中由多個區塊組成
2. 有幾個語系就建立幾個一頁式
3. 製作一個 Home page，讓使用者進入到 Home 時先選擇「語系」再進入對應的一頁式頁面

聰明的你一定知道，官方提供的辦法，很受限於網站的「主題」。然而我們不可能只承接一頁式網站；有時候承接的可能是多頁式，或者一頁式與多頁混用。

好，那就不要用 Squarespace 的平台建立網站
正解！（誤）

但是我就各方面不足，好想用 Squarespace 架站啊！

於是我想到了另一個辦法

考量目前客戶挑選的方案（方案費用差距不小）無法置入插件，倒不如把每個頁面都建立出來，並在不同語系中，在導覽列隱藏特定的頁面！

一、建立頁面

假設我有五個頁面，分別是：首頁、作品、產品、活動、資訊；這時我需要製作出這五個頁面的英文版本，將他們依照順序排列。

• 依據頁面排列的規律，中文為單數列，英文為偶數列
• EN 連結：連結至英文首頁
• 中文 連結：連結至中文首頁

正常情況下，所有導覽列頁面都會顯示，如同示意圖的「全部頁面」的導覽列狀態。

最終效果需能切換為「中文」、「英文」版本的導覽列。

二、找出對應的樣式名稱

使用網頁檢查工具，找出對應的樣式名稱，因為 Squarespace 頁面有各自的 ID，若我們不指定 ID ，樣式會套用至每個頁面。

1. 找出頁面的 ID：有幾個頁面就要找出幾個對應的 ID，頁面 ID 通常是collection 開頭，順帶一提，如果是文章頁面，ID 則是item 開頭
2. 找出導覽列的項目樣式名稱：以此範例為例，導覽列的項目樣式為.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;}

最終效果

三、補充

其餘小提醒。

調整語系的樣式

• 使用 CSS 選取器，選取倒數兩個項目（EN、中文）讓他們顯示在每個頁面，並調整顏色，與其餘項目稍作區隔
• 接著選取最後一項（中文）增加樣式，讓語系之間有一條直線隔開，使整體更加精緻

以上選取器的寫法再自己查囉。

缺點

做工繁複，有多少頁面就得做多少次。

有更好的作法，可以跟我說 :)

使用 Sublime Text 3 編輯器

如果你直接在 Squarespace 後台 Design→Custom CSS 中寫樣式，不論是內建的小視窗還是展開的大視窗，都很不舒服…。

推薦你使用 Sublime Text 3 編輯器，編輯好之後再貼過到 Squarespace，也能把大個階段的更動存一個 CSS 檔（在 Squarespace 是無法一直倒回先前的版本哦）

可以躺著，為什麼要站著？（？？？？

記得在 Sublime Text 3 建立檔案之後，存成 CSS 格式，編輯器才能判別你的語言，顯示對應的顏色。

最後的碎碎唸

以上僅分享，目前為初學者，如果有更好的方式都歡迎跟我說：）能把新學習的技能運用上，雖然笨笨的，卻能稍稍突破，改變作法！

Repeating the same behavior will repeat the same result.

文章首次發布於 Medium，目前閱讀的版本為同步版。

感謝你的閱讀及支持，任何問題都歡迎來信交流｜imjhanemi@gmail.com

Medium｜Instagram｜Facebook｜Deerlight