SQ|使用純 CSS 在 Squarespace 做出偽雙語系導覽列

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

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


大綱
1. 前言
2. Squarespace
3. Squarespace 官方提供的方法
4. 製作方式
5. 最後的碎碎唸

前言

當客戶需要製作具備管理後台的網站,且預算又不高時,通常會建議客戶使用 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 ,樣式會套用至每個頁面。

id=”collection……….”
  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 編輯器

可以躺著,為什麼要站著?

(????


最後的碎碎唸

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

Repeating the same behavior will repeat the same result.

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

🥯 設計指南
畫面中的視覺動線設計
🧇 平台經營
使用 Canva 製作精美的 IG 貼文
🍞 理想生活
近期的健康狀態
🧇 接案秘辛
接案時應避免以口頭或訊息提供報價
🍞 書籍評論
《就算要考吉卜力也不能不會畫鋼彈》書評:不畏變化,勇於嘗試
🥯 設計指南
無痛學習簡易的版面概念
🧇 接案秘辛
自由接案設計工作者,須具備的能力
🍞 書籍評論
《少年與狗》書評:無論身處於光明或黑暗中,我們只是向著內心的方向前進或倒退

Share