知識庫

自訂知識庫主題

作者:HubSpot Support | Nov 21, 2022 1:12:13 PM

您可以在主題編輯器中選擇佈局和設定主題,自訂知識庫的外觀。您也可以檢視知識庫主題在範本、不同語言和不同螢幕尺寸下的顯示效果。

開始之前

在您開始使用此功能之前,請務必充分瞭解應該提前採取哪些步驟,以及此功能的限制和使用此功能的潛在後果。

瞭解需求

確認您擁有下列其中一種使用者權限:

瞭解限制與注意事項

  • 這些工具僅適用於已遷移的知識庫。瞭解更多關於遷移知識庫的資訊。
  • 對於尚未遷移的知識庫,請瞭解有關建立和自訂傳統知識庫的更多資訊。
  • 您無法在 Design Manager 中自訂知識庫或使用自訂主題。

檢視知識庫主題

建立知識庫後,您可以在主題編輯器中檢視主題的外觀。您可以檢視主題在不同範本、語言和螢幕尺寸下的外觀。

  1. 在右上方,按一下組態下拉式功能表,然後選擇主題
  2. 若要檢視包含範例內容的範本,請按一下左上方的檢視 下拉式功能表,然後選取一個範本。主題的變更將套用至所有知識庫範本。

  1. 若要檢視不同語言的範本,請按一下左上方的第二個下拉式功能表,然後選擇一種語言

  1. 若要檢視範本在不同裝置上的顯示方式,請按一下編輯器上方的裝置圖示,或以像素為單位輸入螢幕寬度

編輯知識庫主題的顏色、排版和佈局

  1. 在右上方,按一下「設定」下拉式功能表,然後選擇「主題」。
  2. 若要變更主題的顏色,請按一下以展開 Colors (顏) 區段。然後輸入十六進位值,或從顏色選擇器中為主要次要強調正文背景 欄位選擇顏色 每個選項都會顯示您的 品牌顏色
  3. 若要變更主題的排版,請按一下排版
    • 主要次要區段中,按一下 字型下拉式功能表並選擇字型。若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色。其他字型樣式選項 (例如,字體重量、字型大小或轉換大小寫) 將取決於所選的字型。
    • 若要編輯標題、正文或連結排版,請按一下以展開標題(H1-H6)、正文連結區段:
      • 按一下字型下拉式功能表並選擇字型。額外的字型樣式選項 (例如:字型重量、字型大小或轉換大小寫) 將取決於所選的字型。
      • 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  4. 若要變更主題的版面設計,請按一下以展開版面設計區段,然後選擇選項(例如,TilesMinimal)。不同的版面選項會支援不同的樣式選項。
  5. 完成後,按一下右上方的「發佈主題」。

編輯知識庫主題的標題樣式

您可以編輯知識庫主題的標題樣式,包括標題寬度、頂部列、語言切換器、功能表、按鈕和搜尋列。您也可以在這些元素中編輯顏色、字型和盤旋樣式。

標題寬度

  1. 在右上方,按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的標題
  3. Header區段中,選擇Full widthContent width

標題頂部欄位

  1. 在右上方,按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的標題
  3. Header區段中,按一下以展開Top bar區段。
  4. 若要編輯背景顏色,請在背景顏色欄位的顏色選擇器中輸入十六進位代碼值或選擇背景顏色
  5. 按一下字型下拉式功能表,然後選擇字型。附加的字型樣式選項 (例如,字體重量、字體大小或轉換大小寫) 將取決於所選的字型。
  6. 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  7. 完成後,按一下右上方的「發佈主題」。

標題語言切換器

  1. 在右上方按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的標題
  3. 標題部分,按一下語言切換器
  4. 在「語言切換器」區段中,按一下下拉選項。
  5. 按一下以展開背景區段。
  6. 顏色懸浮欄位的顏色選擇器中輸入十六進位代碼值或選擇顏色
  7. 若要編輯透明度,請在第二個欄位輸入百分比值。例如,透明度為 100% 會不透明,而透明度為 0% 則不可见。
  8. 完成後,按一下右上方的「發佈主題」。

標題選單

  1. 在右上方按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的標題
  3. 在 Header 區段中,按一下Menu
  4. 若要編輯下拉式樣,請按一下下拉式樣:
    • 按一下以展開「背景 」部分,然後輸入十六進位代碼值,或在「顏色」和「懸停」欄位的顏色選擇器中選擇顏色。若要編輯透明度,請在第二個欄位輸入百分比值
    • 按一下以展開文字區段。然後按一下字型下拉式功能表並選擇字型。額外的字型樣式選項 (例如字體重量、字型大小或轉換大小寫) 將取決於所選的字型。
    • 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  5. 若要編輯字型文字樣式,請按一下以展開文字區段:
    • 按一下字型下拉式功能表,然後選擇字型。其他字體樣式選項 (例如字體重量、字體大小或轉換大小寫) 將取決於所選的字體。
    • 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  6. 若要編輯背景顏色,請按一下以展開背景部分,然後輸入十六進位代碼值或在顏色選擇器中選擇顏色
  7. 完成後,按一下右上方的「發佈主題」。

標題按鈕

  1. 在右上方按一下Configure (設定) 下拉式功能表,然後選擇Theme (主題)。
  2. 按一下左側欄中的標題
  3. Header區段中,按一下Button。
  4. 若要編輯字型,請按一下以展開文字區段:
    • 按一下字型下拉式功能表,然後選擇字型。額外的字型樣式選項 (例如字體重量、字型大小或轉換大小寫) 將取決於所選的字型。
    • 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  5. 若要編輯背景,請按一下以展開背景區段,然後輸入十六進位代碼值或在顏色選擇器中選擇顏色。若要編輯透明度,請輸入百分比值
  6. 若要編輯邊框樣式,請按一下以展開邊框部分,然後按一下樣式下拉式功能表,並選擇邊框 樣式(例如,虛線)。
  7. 若要編輯角落樣式,請按一下以展開角落區段。然後在半徑欄位中輸入像素值(例如30px)。
  8. 若要編輯懸停樣式,請按一下懸停
    • 按一下以展開文字區段。
      • 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
      • 若要套用字型文字樣式,請選取italicizeIcon 斜體圖示underlineIcon 底線圖示
    • 按一下以展開背景區段,然後輸入十六進位代碼值或在顏色選擇器中選擇顏色。若要編輯透明度,請輸入百分比值
    • 按一下以展開邊部分,然後按一下樣式 下拉式功能表以選擇邊框樣式(例如,圓點)。
  9. 完成後,按一下右上方的「發佈主題」。

標題搜尋列

  1. 在右上方按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的標題
  3. 標題部分,按一下搜尋列。
  4. 若要編輯背景,請按一下以展開背景區段:然後按一下背景類型下拉式功能表以選取選項(例如:顏色圖片漸層)。根據選取的背景類型,會顯示其他樣式選項。
  5. 若要編輯標籤文字樣式,請按一下以展開標籤文字 區段:
    • 按一下字型下拉式功能表,然後選擇字型。附加的字型樣式選項(例如:字型重量、字型大小或轉換大小寫)將取決於所選的字型。
    • 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  6. 若要編輯輸入字型樣式,請按一下以展開輸入部分,然後輸入十六進位代碼值或按一下顏色 拾取器選取 顏色。若要編輯透明度,請輸入百分比值
  7. 完成後,按一下右上方的「發佈主題」。

編輯知識庫主題的頁尾樣式

您可以編輯知識庫主題的頁尾樣式,包括頁尾寬度、背景、功能表文字社交圖示。您也可以編輯這些元素的顏色、字型和懸停樣式。

頁尾寬度與背景

  1. 在右上方,按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的頁
  3. 若要變更頁尾寬度,請在頁尾寬度欄位中選擇「全寬」或「內容寬度」。
  4. 若要變更頁尾背景顏色,請輸入十六進位代碼值或按一下顏色選擇器來選擇顏色

頁尾功能表

  1. 在右上方按一下「設定」下拉式功能表,然後選擇「主題」。
  2. 按一下左側欄中的Footer
  3. Footer區段中,按一下以展開Menu 區段。
  4. 若要編輯選單的字型樣式,請按一下字型下拉式功能表,然後選擇字型額外的字型樣式選項 (例如,字體重量、字體大小或轉換大小寫) 將取決於所選的字型。
  5. 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  6. 完成後,按一下右上方的「發佈主題」。

頁尾文字

  1. 在右上方按一下組態下拉式功能表,然後選擇主題
  2. 按一下左側欄中的Footer
  3. 頁尾部分,按一下以展開文字 部分。
  4. 若要編輯選單的字型樣式,請按一下字型下拉式功能表,然後選擇字型額外的字型樣式選項(例如字體重量、字型大小或轉換大小寫)將取決於所選的字型。
  5. 若要變更字體顏色,請按一下顏色選擇器,然後選擇字體顏色
  6. 完成後,按一下右上方的「發佈主題」。

頁尾社交圖示

  1. 在右上方按一下Configure (設定) 下拉式功能表,然後選擇Theme (主題)。
  2. 按一下左側欄中的頁
  3. 在「頁尾」部分,按一下以展開「社交圖示 」部分。
  4. 若要變更社交圖示大小,請按一下圖示大小下拉式功能表,然後選擇選項(例如:一般 或大)。
  5. 若要變更社交圖示的形狀,請按一下圖示形狀下拉式功能表,然後選取一個選項(例如: 方形)。
  6. 若要變更社交圖示的顏色,請在圖示顏色欄位中輸入十六進位代碼值或按一下顏色 選擇器以選擇顏色。
  7. 若要變更社交圖示的背景顏色,請輸入十六進位代碼值,或按一下顏色 拾取器以背景顏色欄位中選取顏色。若要編輯透明度,請輸入百分比值
  8. 若要變更社交圖示的對齊方式,請在對齊方式欄位中按一下blockAlignmentLeftIcon Left alignblockAlignmentCenterIcon Center alignblockAlignmentRightIcon Right align圖示。
  9. 完成後,按一下右上方的「發佈主題」。

編輯知識庫主題的內容

您可以編輯知識庫標題和頁尾的內容。已發佈的變更將在所有知識庫頁面上可見。

頁首內容

  1. 在右上方,按一下「設定」下拉式功能表,然後選擇「標頭」。
  2. 全局內容編輯器中,按一下左側欄中的siteTree 內容圖示。
  3. 在左側欄中,按一下網站標頭模組。
  4. 若要編輯標頭標誌內容,請按一下以展開標誌區段:
    • 若要覆寫預設標誌,請切換「覆寫預設標誌」開關,或按一下「編輯此網域中的預設標誌」以更新預設標誌。
    • 如果您選擇覆寫預設徽標,您可以按一下上傳瀏覽影像來新增新徽標。
    • 若要在未設定徽標時顯示公司名稱,請切換開啟未設定徽標時顯示公司名稱開關
    • 若要在徽標中加入 URL連結,請在連結欄位中輸入URL
    • 按一下套用選項以查看您的變更。
  5. 若要編輯標頭功能表內容,請按一下以展開功能表區段:
    • 若要顯示標頭功能表,請按一下功能表下拉功能表,然後選擇一個功能表
    • 若要編輯現有的標頭功能表,請按一下編輯
    • 若要建立新的標頭功能表,請按一下建立新
    • 若要編輯可顯示在標頭功能表中的功能表樹子功能表數目,請使用最大層級欄位中的upIcon 增加downIcon 減少圖示。
    • 按一下套用選項以查看您的變更。
  6. 若要編輯標頭按鈕內容,請按一下按鈕
    • 若要在標題中加入按鈕,請選取加入按鈕核取方塊。
    • 若要編輯標頭中的按鈕文字,請在按鈕文字欄位中輸入文字
    • 若要編輯按鈕 URL連結,請按一下連結至下拉式功能表,然後選擇一個選項(例如:外部)。其他欄位會根據選取的選項顯示。
    • 若要在新視窗中開啟按鈕 URL 連結,請開啟在新視窗中開啟連結開關
    • 若要編輯按鈕的連結類型,請選取不跟隨旁邊核取方塊
    • 若要在按鈕上新增圖示,請選取新增圖示核取方塊:
      • 按一下「取代」以變更按鈕圖示。
      • 按一下位置下拉式功能表,選擇按鈕圖示的位置
    • 按一下套用選項,查看您的變更。
  7. 若要編輯語言切換器內容,請按一下以展開語言切換器部分:
    • 若要將語言切換器新增至標頭,請選取新增語言切換器 核取方塊。
    • 若要編輯語言切換器的顯示模式,請按一下顯示模式下拉式功能表,然後選擇選項(例如:本地化PageLang混合)。
    • 按一下套用選項以查看您的變更。
  8. 若要編輯其他支援選項內容,請按一下以展開其他支援選項部分:
    • 若要顯示客戶入口網站連結,請開啟顯示客戶入口網站連結開關。在客戶入口網站連結文字欄位中,輸入要顯示給瀏覽者的文字
    • 若要顯示受限制內容的登入,請切換開啟顯示受限制內容的登入開關。在登入連結文字登出連結文字欄位中,輸入顯示給訪客的文字
    • 若要顯示支援表單,請切換開啟支援表單開關,然後在表單下拉式功能表中選擇表單。在支援表單文字連結支援表單標題欄位中,輸入要顯示給訪客的文字
    • 按一下套用選項,查看您的變更。
  9. 完成後,按一下右上方的Publish to [#] assets

頁尾內容

  1. 在右上方,按一下「設定」下拉式功能表,然後選擇「頁」。
  2. 全局內容編輯器中,按一下左側欄中的siteTree 內容圖示。
  3. 若要顯示頁尾功能表,請按一下頁尾功能表模組:
    • 按一下功能表下拉式功能表,然後選擇一個功能表
    • 若要編輯現有的頁尾功能表,請按一下編輯
    • 若要建立新的頁尾功能表,請按一下建立新的。
    • 若要編輯可顯示在頁尾功能表中的功能表樹子功能表數目,請使用upIcon 增加downIcon 減少功能表顯示深度 欄位中的圖示。
    • 若要顯示頁尾功能表,請選取顯示功能表核取方塊。
    • 按一下套用選項以查看您的變更。
  4. 若要編輯頁尾標誌內容,請按一下標誌模組:
    • 若要覆寫預設標誌,請切換「覆寫預設標誌」開關,或按一下此網域中的「編輯預設標誌」以更新預設標誌。
    • 如果您選擇覆寫預設徽標,您可以按一下上傳瀏覽影像來新增新徽標。
    • 若要自訂頁尾標誌的載入方式,請按一下圖片載入下拉式功能表,然後選擇瀏覽器預設LazyEager
    • 若要在頁尾標誌中加入連結 URL,請在連結 URL欄位中輸入 URL文字
    • 按一下套用選項,查看您的變更。
  5. 若要編輯頁尾地址內容,請按一下頁尾地址模組 :
    • 按一下擴充檢視中的編輯
    • 在全局內容編輯器中,輸入頁尾地址的文字
    • 按一下左側列中的關閉擴充檢視
  6. 若要編輯頁尾社交追蹤內容,請按一下社交追蹤模組:
    • 社交連結部分,按一下editIcon 編輯, deleteIcon 刪除圖示,以編輯或刪除現有的社交連結。若要新增社交連結,請按一下+ 新增 按鈕。
    • 若要顯示社交關注圖示,請選取顯示圖示核取方塊。
  7. 若要編輯頁尾版權內容,請按一下頁尾版權模組:
    • 在擴充檢視中按一下編輯
    • 在全局內容編輯器中,輸入頁尾版權的文字
    • 按一下左側列中的關閉擴充檢視
  8. 完成後,按一下右上方的Publish to [#] assets