建立主題

您可以複製現有主題,然後變更複本來建立新的主題。也可以匯入 Bootstrap 內容並在新主題中使用。

註:

不論是建立新主題還是更新現有主題,請一律複製該主題,然後對其複本進行作業。使用範例網站或真實網站的複本來測試主題,以確保主題可正確運作。請注意,對現有主題所做的變更會在修訂過的主題發布後,立即在使用該主題的所有網站實行。

複製主題

  1. 在首頁中,按一下開發人員

    便會顯示開發人員頁面。

  2. 按一下檢視所有主題

    就會顯示現有的主題清單。您可以按一下檢視圖示並從清單中選取選項,來控制主題的顯示方式。

  3. 選取主題並從滑鼠右鍵功能表中選擇複製,或按一下動作列中的 「複製」圖示

    便會複製主題的所有資料夾和檔案,包括任何範例頁面和內容。

    註:

    當您複製主題時,不會複製主題的共用資訊。
  4. 輸入所複製主題的名稱。您不能使用其他主題已經使用的名稱。

    網站名稱可包含字母、數字、底線 (_) 以及連字號 (-)。如果您輸入空格,系統會自動以連字號取代。

    請勿使用下列作為樣板、主題、元件、網站、或網站頁面的名稱:authsite、content、pages、scstemplate_*、_comps、_components、_compsdelivery、_idcservice 、_sitescloud、_sitesclouddelivery、_themes、_themesdelivery。您可以使用下列名稱作為網站頁面的名稱,但不可以作為樣板、主題、元件或網站的名稱:文件、網站。

  5. (選擇性) 輸入主題的描述。

  6. 按一下複製

    畫面會出現一個進度列,顯示新的主題名稱和複製狀態。複製了主題之後,其名稱就會出現在主題清單中。按一下主題清單中的主題名稱,即可瀏覽構成主題的資料夾和檔案。

  7. 使用 Oracle Content Management 桌面應用程式,將主題資料夾和檔案同步到您的本機系統。如此,您就可以瀏覽本機資料夾並直接使用檔案。您對主題所做的變更會自動同步。您可以使用慣用的 HTML、程式碼或文字編輯工具來進行變更。

設定網站內是否可使用自訂樣式

主題管理員可以指定主題中的樣式或自訂樣式。

主題的 components.json 檔案中的設定,指定是否可在「網站產生器」設定自訂樣式。這是為了控管讓網站提供者在建置網站時能夠遵守網站的樣式,不會使用其他字型和色彩。

若不允許在網站中使用自訂樣式:

  1. 隱藏元件設定值面板中的自訂選項。

    在主題的 components.json 檔案中,增加下列物件與其他元件定義:

    [
        {
            "showStyleClassOnly": "true"
        }
    ]
  2. 自訂 CKEditor 的工具列群組和按鈕以移除自訂樣式:

    在主題的 components.json 檔案中,您可以指定 CKEditor 的 toolbarGroupsremoveButtons 特性,以自訂 TitleParagraph 元件的群組和群組內的按鈕。

    例如,增加下列物件與其他元件定義,以移除 Styles 群組中的樣式、字型和色彩:

    [
        {
            "name": "",
            "list": [
                {
                    "type": "scs-title",
                    "id": "scs-title",
                    "config": {
                        "toolbarGroups": [
                            {
                                "name": "basicstyles",
                                "groups": ["basicstyles"]
                            },
                            {
                                "name": "styles",
                                "groups": ["styles"]
                            },
                            {
                                "name": "colors",
                                "groups": ["colors"]
                            },
                            "/",
                            {
                                "name": "undo",
                                "groups": ["undo"]
                            },
                            {
                                "name": "links",
                                "groups": ["links"]
                            },
                            {
                                "name": "paragraph",
                                "groups": ["list", "indent"]
                            },
                            {
                                "name": "align",
                                "groups": ["align"]
                            },
                            {
                                "name": "cleanup",
                                "groups": ["cleanup"]
                            }
                        ],
                        "removeButtons": "Styles,Subscript,Superscript,Strike,Anchor,Blockquote,Link,Unlink,Font,TextColor,BGColor"
                    }
                },
                {
                    "type": "scs-paragraph",
                    "id": "scs-paragraph",
                    "config": {
                        "toolbarGroups": [
                            {
                                "name": "basicstyles",
                                "groups": ["basicstyles"]
                            },
                            {
                                "name": "styles",
                                "groups": ["styles"]
                            },
                            {
                                "name": "colors",
                                "groups": ["colors"]
                            },
                            "/",
                            {
                                "name": "undo",
                                "groups": ["undo"]
                            },
                            {
                                "name": "links",
                                "groups": ["links"]
                            },
                            {
                                "name": "paragraph",
                                "groups": ["list", "indent"]
                            },
                            {
                                "name": "align",
                                "groups": ["align"]
                            },
                            {
                                "name": "insert",
                                "groups": ["image", "table"]
                            },
                            {
                                "name": "cleanup",
                                "groups": ["cleanup"]
                            }
                        ],
                        "removeButtons": "Styles,Subscript,Superscript,Strike,Anchor,Blockquote,Link,Unlink,Font,TextColor,BGColor"
                    }
                }
            ]
        }
    ]
  3. 避免將樣式貼入 CKEditor 中。

    貼上的內容會採用設定的樣式和按鈕。在以上範例中,會將 Font 從貼上的資料中移除。

若不允許使用自訂樣式,會產生以下結果:
  • 在所有的內建元件中,樣式頁籤會隱藏「自訂」選項。
  • 在 CKEditor 中,會隱藏用以設定樣式的工具列按鈕,字型系列、字型色彩等設定都會被覆寫。
  • 此外在 CKEditor 中,也無法設定貼上之文字的樣式。可以使用粗體或斜體。

隱藏主題的元件和區段版面配置

您可以編輯主題的 component.json 檔案來隱藏元件和區段版面配置,讓網站開發人員無法使用它們。建議您這麼做,才能升級為一致的外觀與感覺。請參閱隱藏主題的元件和區段版面配置

在網站驗證主題

完成編輯主題後,您需要檢查主題是否可如預期般在網站運作。

  1. 確定使用 Oracle Content Management 桌面應用程式將複製的資料夾和檔案同步,並且確定所有的修改都已經儲存。

  2. 在「網站產生器」中開啟網站 (可以是測試網站或現有的離線網站),然後將網站切換成使用新主題。

  3. 使用此新主題測試網站,方法為新增頁面及使用設定值、檢視影像、檢查導覽,以及新主題中所有已變更的項目。

  4. 確定所有項目都正確呈現,包括所有檔案和連結。

  5. 發布主題,以便讓網站實行主題變更,然後在程式實際執行環境中檢查該主題。

請參閱發布主題

使用 Bootstrap 主題

由於 Oracle Content Management 主題與 Bootstrap 主題之間的相似性,因此您可以轉換現有的 Bootstrap 主題頁面和內容,供運用於 Oracle Content Management 主題中。

Bootstrap 是用於建立網站和 Web 應用程式的免費開源工具集合。它包含適用於介面元件和 JavaScript 擴充功能的 HTML 和 CSS 式設計樣板。

您可以依照相同的指示來建立主題,但需透過程式碼 (利用所選擇的編輯器) 匯入及編輯 Bootstrap 主題的任何頁面或內容。

您不太可能會完全使用 Bootstrap 主題與其所有頁面和內容。一般來說,您只會選取主題的幾個部分在 Oracle Content Management 主題中運用,也許只有幾個頁面樣板中的某些部分而已。例如,某個 Bootstrap 主題包含了樣板內的數個區塊,包括標頭、導覽區塊、主體區塊以及頁尾區塊。由於 Bootstrap 主題是以可直接從檔案系統檢視 (不需要 Web 伺服器) 的檔案集合形式提供,因此它們的每個頁面內包含許多重複項目 (因為未使用頁面組件引擎,所以這是必然的)。當您在 Oracle Content Management 主題中使用這項資訊時,您需要取得這些部分並將它們加到可重複使用的 Oracle Content Management 頁面樣板,然後使用 Oracle Content Management 將這些樣板中的多個頁面組合起來。

將資訊加到可重複使用樣板的一個範例便是導覽區段。典型 Bootstrap 主題中的導覽是在所有頁面中重複出現,不過當您將該導覽移到 Oracle Content Management 主題中時,您必須使用 JavaScript 程式碼來動態瀏覽網站階層及產生導覽結構。接著,您只要在所有頁面中包含該命令檔,頁面即可導覽,當頁面新增至網站或自網站中移除時,導覽也會配合調整。

請參閱從 Bootstrap 或網站設計樣板建立網站樣板