Skip to main content

Config 設定

設定 header 上的 menu​

Menu Bar 是指頁面頂部的導航欄，用於導航網站上的不同頁面。根據 Docusaurus 的設計，Menu Bar 可以通過編輯 docusaurus.config.js 文件來進行設置。使用者可以在此文件中定義頁面的標題和路徑，以便能夠在 Menu Bar 上顯示。

以下是一個簡單的例子，說明如何在 Docusaurus 中設置 Menu Bar：

// docusaurus.config.js

module.exports = {
    title: "My Docusaurus Site",
    tagline: "A website for testing purposes",
    url: "<https://my-docusaurus-site.com>",
    baseUrl: "/",
    onBrokenLinks: "throw",
    favicon: "img/favicon.ico",
    organizationName: "my-org",
    projectName: "my-docusaurus-site",
    themeConfig: {...},
    presets: [...],
};

在上述代碼中，navbar 選項用於定義 Menu Bar。在這個例子中，Menu Bar 包含三個選項 - Docs、Blog 和 GitHub。使用者可以通過修改這些選項，或添加新的選項，來自定義自己的 Menu Bar。

themeConfig​

themeConfig: {
	...
}

metadata​

可以透過加上 meta 建立 google console 來幫網站建立 index

metadata: [
    {
        name: "google-site-verification",
        content: "YOUR_GOOGLE_SITE_VERIFICATION_CODE",
    },
],

docs​

docs: {
	sidebar: {
		hideable: true, // 展開 side
	},
},

algolia​

algolia 的 search 可以參考另外一篇，來設定 blog 的 search 功能。

algolia: {
    appId: 'YOUR_APP_ID', // The application ID provided by Algolia
    apiKey: 'YOUR_API_KEY', // Public API key: it is safe to commit it
    indexName: 'YOUR_INDEX_NAME', //
},

nav 設定 header 相關

navbar: {
    title: "CUSTOMER_HEADER_TEXT",
    logo: {
        alt: "My Site Logo",
        src: "img/logo.svg",
    },
    items: [
        ... // header 的上的列表項目
    ],
},

設定 header 上的選項，讓你的選項可以靠左靠右，和文字顯示

navbar: {
    ...
    items: [
        {
            type: "doc",
            docId: "intro",
            position: "left",
            label: "CODE-NOTE",
        },
        {
            type: "doc",
            docId: "volleyball-Intro", // click link 後的第一篇文章 folder name
            position: "left",
            label: "VOLLEYBALL",
        },

        { to: "/docs/tags", label: "Tags", position: "left" },
        { to: "/blog", label: "Blog", position: "left" },
        {
            href: "https://github.com/facebook/docusaurus",
            label: "GitHub",
            position: "right",
        },
    ],
},
footer: {
    style: "dark",
    links: [
        {
            title: "Docs",
            items: [ { label: "CODE-NOTE", to: "/docs/intro" } ],
            ...
        },
        ...
    ],
    copyright: `Copyright © ${new Date().getFullYear()} bla.. bla..`,
},

presets​

設定在資料夾下的排列和 url 相關設定。

presets: [
    [
        "classic",
        /** @type {import('@docusaurus/preset-classic').Options} */
        ({
            docs: {
                // routeBasePath:'/',
                sidebarPath: require.resolve("./sidebars.js"),
                // Please change this to your repo.
                editUrl: "https://github.com/thomas-chu-30/tech-note/tree/master",
            },
            blog: {
                showReadingTime: true,
                blogSidebarCount: "ALL",
                blogSidebarTitle: "All posts",
                editUrl: "https://github.com/thomas-chu-30/tech-note/tree/master",
            },
            theme: {
                customCss: require.resolve("./src/css/custom.css"),
            },
        }),
    ],
],