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

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

上次更新時間: 六月 28, 2023

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

所有產品和版本

CSS (層疊樣式表)檔案是編碼檔案,可選擇頁面的元素並控制其演示文稿。 將自訂範本的HTML視為網站的骨骼,而CSS則是網站的皮膚。

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

新建CSS文件

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

編輯CSS檔案

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


design-manager-show-output-toggle

要查看HubSpot模板的標準CSS選擇器列表,請查看 Boilerplate CSS

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

  • 在程式碼編輯器底部的錯誤控制臺中。
  • 在程式碼編輯器左側的錯誤間隙中。
  • 在編輯器右側的捲軸列中。

阻止您發佈的錯誤將以紅色顯示,而一般警告將以黃色顯示。 在程式碼編輯器底部,按一下 顯示詳細資訊 以查看錯誤控制臺中錯誤的詳細資訊,並按一下 隱藏詳細資訊 以折疊錯誤控制臺。

在錯誤控制臺中,只要您的代碼或自訂模塊中有HubL錯誤或警告,就會有連結。 將遊標停留在程式碼編輯器左側的紅色錯誤指示器上,以查看程式碼中的錯誤或警告。 按一下該錯誤將使遊標循環到該行上的所有錯誤或警告。 按一下捲軸註解會將您帶到檔案的該部分。

您也可以在程式碼編輯器中按一下行號,並依此更新檔案的URL。 這可讓您與他人分享代碼的連結,並將他們引導至您在檔案中工作的確切位置。

編輯檔案後,按一下右上角的「發佈變更」。 如果您想在另一個編碼模板中使用此樣式表,請按一下左側邊欄選單 中的「 操作」 >「 複製公用URL」來複製工作表的URL。

Edit CSS

附加到模板

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

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

*必填

* *拖放布局所必需

* * *模板布局樣式表附件的建議方法

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

您可以編輯或移除已附加的樣式表,方法是將其懸停在該樣式表上,然後按一下 「編輯」 以進行變更,或按一下「 X」以移除該樣式表。

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

在特定頁面上附加或移除樣式表(僅限Marketing Hub Professional和Enterprise )

HubSpot Help article screenshot

請注意:此選項不適用於主題模板。 了解如何編輯主題設定

若要從頁面編輯器的「設定」部分新增或刪除特定頁面的樣式表,請按照以下步驟操作:

  • 瀏覽網站頁面或登陸頁面
  • 將遊標停留在頁面上,然後按一下「編輯」。
  • 在頁面編輯器中,按一下頂部的「設定」。
  • 向下捲動並按一下「進階選項」。
  • 在「 頁面樣式表」下,按一下附加樣式表下拉式選單,然後選擇要附加的工作表。 按一下您要移除的樣式表旁邊的 X。

  • 按一下右上角的「 儲存並發佈」。

您也可以停用由頁面從範本或網域繼承的樣式表。 禁用後,這些樣式表將不會套用到您的頁面:

  • 在頁面編輯器的 「 設定」標籤下, 從包含的樣式表旁的下拉式選單中選擇「已停用」。
  • 按一下右上角 的「儲存 並發佈」。

在網域級別上附加或移除樣式表(僅限Marketing Hub Professional和Enterprise )

請注意:主題範本必須包含註釋enableDomainStylesheets: true才能使用網域級樣式表。 了解有關模板批注的更多信息。

若要從網域上的所有內容中新增或移除樣式表,請按照以下步驟操作:

  • 了解更多
  • 在側邊欄選單中,按一下「 網站」 >「 頁面」。
  • 按一下下 拉式選單,選擇您想要更新設定的網域 。
  • 在範本 標籤上,捲動至 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 的協助