跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

建立、編輯和附加CSS檔案以設定網站樣式

上次更新時間: 五月 23, 2024

可与下列任何一种订阅一起使用,除非有说明:

所有產品和版本

CSS (層疊樣式表)檔案是選擇頁面元素並控制其演示文稿的編碼檔案。 CSS檔案無法附加到電子郵件或電子郵件範本。 

本文介紹如何在HubSpot中建立、發佈和附加CSS檔案。 你可以了解如何對特定頁面進行簡單的設計變更。 如果你使用佈景主題範本,請了解如何編輯佈景主題設定

建立新的CSS檔案

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 按一下左上角的資料夾圖示folder,即可展開側邊欄選單。 然後按一下「檔案」>「新檔案」。
New coded file
  • 在對話方塊中,按一下CSS樣式表。 然後輸入CSS樣式表的名稱,然後按一下「建立」。

編輯CSS檔案

建立或開啟現有的CSS檔案後,請在程式碼編輯器中進行編輯。 除了標準CSS之外,程式碼編輯器還支援HubL變數和巨集,以便更輕鬆地維護CSS。 若要預覽HubL的渲染方式,請按一下以切換編輯器頂部的顯示輸出開關。 右側將打開一個面板,顯示渲染的預覽。


design-manager-show-output-toggle

若要查看HubSpot範本的標準CSS選擇器清單,請參閱Boilerplate CSS

發佈代碼前,請檢查代碼是否有HubL錯誤。 在自訂模組或編碼檔案中,有三個地方可以找到HubL錯誤或警告:

  • 在程式碼編輯器底部的錯誤主控臺中。
  • 在程式碼編輯器左側的錯誤溝槽中。
  • 在編輯器右側的捲動列中。

無法發佈的錯誤會顯示為紅色,而一般警告則會顯示為黃色。 在程式碼編輯器底部,按一下顯示詳細資訊,即可在錯誤主控臺中查看更多有關錯誤的資訊,並按一下隱藏詳細資訊,即可折疊錯誤主控臺。

在錯誤主控臺中,只要程式碼或自訂模組中出現HubL錯誤或警告,就會顯示連結。 將滑鼠遊標懸停在程式碼編輯器左側的紅色錯誤指示器上,即可查看程式碼中的錯誤或警告。 點擊錯誤將使光標循環到該行上的所有錯誤或警告。 單擊滾動條批注將帶您到文件的該部分。

您也可以在程式碼編輯器中按一下行號,並取得相應的檔案更新網址。 這樣您就可以與其他人分享程式碼的連結,並將他們引導至您在檔案中工作的確切位置。

編輯檔案後,按一下右上角的發佈變更。 如果您想在其他編碼範本中呼叫此樣式表,請按一下左側邊欄選單中的「操作」>「複製公開網址」,複製工作表的網址。

Edit CSS

附加到模板

在HubSpot中,您可以通過幾種不同的方式爲內容附加樣式表。 以下是您網站上附加樣式表的連結順序:

  1. public_common.css * :主要由HubSpot應用程序使用的樣式表,但也適用於某些網站功能。
  2. 在「網站」>「頁面:新增至網站全域< head >的連結標籤」下的設定中的標題HTML。
  3. Layout.css * * :附加到所有拖放模板布局的默認響應式CSS文件。
  4. 在「網站」>「頁面」下的設定中附加樣式表:附加到整個網站的樣式表。
  5. 在「網站」>「網 誌」下的設定中附加樣式表:附加到網誌的樣式表(覆蓋網站全域表)。
  6. 連結的樣式表* * * :樣式表附加在範本佈局中。
  7. 模板中的其他< head >標記:連結標籤已添加到特定模板佈局的< head >。
  8. 頁面特定的樣式表:在頁面設定中附加的樣式表。
  9. 頁首HTML :在頁面設置中添加到特定頁面的< head >的鏈接標籤。

*必填

* *需要拖放布局

* * *建議範本版面配置的樣式表附件方式

若要將樣式表附加至範本,請在設計管理員中開啟範本。 在「標頭與內文選項」下的右側欄選單中,從「連結的樣式表」旁邊的「新增」下拉式選單中選擇一個檔案。 

您可以編輯或移除已附加的樣式表,方法是將遊標暫留於該樣式表上,然後按一下「編輯」以進行變更,或按一下「X」以移除該樣式表。

新增樣式表後,按一下右上角的「發佈變更」,即可使用範本將變更套用至即時分頁。

HubSpot Help article screenshot

在特定頁面上附加或移除樣式表(僅適用於行銷中心專業版和企業版)

請注意:此選項不適用於佈景主題範本。 了解如何編輯佈景主題設定

要從頁面編輯器的設置部分添加或刪除頁面特定的樣式表:

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
  • 按一下頁面名稱。 
  • 在內容編輯器中,按一下「設定」選單,然後選取「進階」。 
  • 在對話框的「頁面樣式表」部分中,單擊附加樣式表下拉菜單,然後選擇樣式表。 要刪除樣式表,請單擊該樣式表旁邊的X。
  • 若要關閉從範本或網域繼承的樣式表,請按一下樣式表旁的下拉式選單,然後選取「已停用」。 

remove-or-turn-off-stylesheets-1

附加或移除網域樣式表(僅適用於行銷中心專業版和企業版)

請注意:主題範本必須包含註解enableDomainStylesheets: true ,才能使用網域層級的樣式表。 深入瞭解範本註解

若要在網域上的所有內容中新增或移除樣式表:

  • 在你的 HubSpot 帳戶中,點擊頂端導覽列中的settings「設定圖示」。
  • 在側邊欄選單中,按一下「網站」>「頁面」。
  • 按一下下拉式選單,選擇要更新設定的網域 。
  • 在「範本」索引標籤上,捲動至「CSS與樣式表」。 若要新增樣式表,請按一下+新增樣式表。 單擊附加樣式表旁邊的X以刪除它。
  • 按一下儲存。

請注意:降級到HubSpot的Starter或免費工具時,附加的網域級樣式表將保持有效,直到您刪除它們。 移除所有樣式表後,您便無法再在網域層級附加樣式表。 深入瞭解如何降級訂閱

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助