样式与布局

样式与页面

docusaurus里知识库框架、文档编写最佳实践

常见的页面就这几种类型。

docusaurus.config.ts配置

点击展开所有代码：

import type * as Preset from '@docusaurus/preset-classic'
import type { Config } from '@docusaurus/types'
import { themes } from 'prism-react-renderer'
import social from './data/social'
import type { GiscusConfig } from './src/components/Comment'

const beian = '陇ICP备2023002645号'
const beian1 = '待公安备案……'

const config: Config = {
  title: "One's wiki",
  url: 'https://wiki.onedayxyy.cn/',
  baseUrl: '/',
  // baseUrl: '/wiki2/',
  favicon: 'img/xyy.png',
  organizationName: 'One',
  projectName: 'blog',


  // onBrokenLinks: 'throw',
  onBrokenLinks: 'ignore',
  onBrokenMarkdownLinks: 'warn',

  onBrokenAnchors: 'ignore',



  customFields: {
    bio: '明心静性，爱自己',
    description:
      '是一个由One创建的个人博客，主要分享编程开发知识和项目，该网站基于 React 驱动的静态网站生成器 Docusaurus 构建。',
  },
  themeConfig: {
    // announcementBar: {
    //   id: 'announcementBar-3',
    //   content: ``,
    // },
    image: '/img/og.png',
    metadata: [
      {
        name: 'author',
        content: 'One',
      },
      {
        name: 'keywords',
        content: 'blog, javascript, typescript, node, react, vue, web',
      },
      {
        name: 'keywords',
        content: '编程爱好者, Web开发者, 写过爬虫, 学过逆向, 主攻ts全栈',
      },
    ],
    docs: {
      sidebar: {
        hideable: true,
      },
    },
    navbar: {
      logo: {
        alt: 'One',
        src: 'img/xyy.png',
        srcDark: 'img/xyy.png',
      },
      hideOnScroll: true,



      items: [
        {
          label: '🏡首页',
          position: 'left',
          items: [
            { label: '首页', to: '/' },
            { label: '起始页', to: 'https://onedayxyy.cn' },
            { label: '导航', to: '/docs/tool' },
          ],
        },
        // { to: '/docs/tool', label: '导航', position: 'left' },
        { to: '/docs/zhishiku', label: '📘知识库', position: 'left' },
        {
            label: '🌈博客',
            position: 'left',
            items: [
                { label: 'ruyu-blog', to: 'http://blog.onedayxyy.cn/' },
                { label: 'hexo', to: 'http://onedayxyy.cn/hexoblog/' },
                { label: 'docus', to: 'blog' },
                { label: '归档', to: 'blog/archive' },
            ],
        },  
        {
            label: '💎专题',
            // position: 'right',
            items: [                      
              { label: '0、开源项目', to: '/docs/OpenSource' },
              { label: '1、网站搭建', to: '/docs/beauty-website' },
              { label: '2、云笔记最佳实践', to: '/docs/cloud-note' },
              { label: '3、知识库选型', to: '/docs/wiki-select' },
              { label: '4、前端示例', to: '/docs/QianDuanShiLi' },
              { label: '5、NAS', to: '/docs/nas' },
              { label: '6、脚本', to: '/docs/scripts' },
              { label: '7、vscode', to: '/docs/vscode' },
            ],
          },  
          {
            label: '📸娱乐',
            position: 'left',
            items: [
                { label: '相册', to: 'https://photo.onedayxyy.cn/' },
                { label: '音乐', to: 'https://music.onedayxyy.cn/' },
                { label: '观影厅', to: '/docs/movie' },  
            ],
        },  

        {
            label: '💖精神小屋',
            position: 'left',
            items: [
                { label: '说说', to: 'https://moments.onedayxyy.cn/' },
                { label: '树洞', to: '/' },
                { label: '精神世界', to: '/docs/missing' },
                { label: '时间管理', to: '/docs/timeplan' },
            ],
            
        },        
          
          {
            label: '🍷更多',
            // position: 'right',
            items: [
              { label: '关于我', to: '/docs/aboutAuthor' },
              { label: '关于本站', to: '/docs/AboutMywebsite' },
              { label: '留言板', to: '/' },
              { label: '🔗友链', to: 'friends' },
              { label: '项目', to: 'project' },
              { label: '监控', to: 'http://47.100.215.163:3000/d/9CWBz0bik/1-node-exporter-for-prometheus-dashboard-cn-v20200628?orgId=2' },
              { label: '后台管理系统', to: '/' },
              { label: '百度网盘', to: 'https://pan.baidu.com/s/1E0zTSlmuQHgTKLhAr6ZBTg?pwd=g9yv' },
              { label: 'zdir网盘', to: 'http://47.100.215.163:6080' },
            ],
          },    
        {
            href: 'https://onedayxyy.cn/images/image-20240703070602.png',
            label: 'QQ群',
            position: 'right',
        },                                   

    ],




    },
    footer: {
      style: 'dark',
      links: [
        {
          title: '开始',
          items: [
            { label: '起始页', href: 'https://onedayxyy.cn/' },
            { label: '首页', to: '/' },
          ],
        },
        {
          title: '学习',
          items: [
            { label: '知识库', href: 'https://wiki.onedayxyy.cn/' },
            { label: '博客', href: 'https://blog.onedayxyy.cn/' },
          ],
        },
        {
          title: '娱乐',
          items: [
            { label: '相册', href: 'https://photo.onedayxyy.cn/' },
            { label: '音乐', href: 'https://music.onedayxyy.cn/' },
          ],
        },
        {
          title: '资源',
          items: [
            { label: '百度网盘', href: 'https://pan.baidu.com/s/1E0zTSlmuQHgTKLhAr6ZBTg?pwd=g9yv' },
            { label: 'zdir网盘', href: 'http://47.100.215.163:6080' },
          ],
        },
        {
          title: '更多',
          items: [
            { label: '友链', position: 'right', to: 'friends' },
            {
              html: `
                <a href="https://docusaurus.io/zh-CN/" target="_blank" rel="noreferrer noopener">
                  <img src="/img/buildwith.png" alt="build with docusaurus" width="120" height="50"/>
                <a/>
                `,
            },
          ],
        },
      ],
      copyright: `
        <p style="margin-bottom: 0;"><a href="http://beian.miit.gov.cn/">${beian}</a></p>
        <p style="display: inline-flex; align-items: center;"><img style="height:20px;margin-right: 0.5rem;" src="/img/police.png" alt="police" height="20"/><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${
          beian1.match(/\d+/)?.[0]
        }" >${beian1}</a></p>
        <p>Copyright © 2023 - ${new Date().getFullYear()} One. | Built with Docusaurus.</p>
        `,
    },
    algolia: {
      appId: '0R34U',
      apiKey: 'a515c48bx4464301',
      indexName: 'algoliaSearch',
    },
    prism: {
      theme: themes.oneLight,
      darkTheme: themes.oneDark,
      additionalLanguages: ['bash', 'json', 'java', 'python', 'php', 'graphql', 'rust', 'toml', 'protobuf'],
      defaultLanguage: 'javascript',
      magicComments: [
        {
          className: 'theme-code-block-highlighted-line',
          line: 'highlight-next-line',
          block: { start: 'highlight-start', end: 'highlight-end' },
        },
        {
          className: 'code-block-error-line',
          line: 'This will error',
        },
      ],
    },
    giscus: {
      repo: 'kuizuo/blog',
      repoId: 'MDEwOlJlcG9zaXRvcnkzOTc2MjU2MTI=',
      category: 'General',
      categoryId: 'DIC_kwDOF7NJDM4CPK95',
      theme: 'light',
      darkTheme: 'dark_dimmed',
    } satisfies Partial<GiscusConfig>,
    tableOfContents: {
      minHeadingLevel: 2,
      maxHeadingLevel: 6,
    },
    liveCodeBlock: { playgroundPosition: 'top' },
    zoom: {
      selector: '.markdown :not(em) > img',
      background: {
        light: 'rgb(255, 255, 255)',
        dark: 'rgb(50, 50, 50)',
      },
    },
  } satisfies Preset.ThemeConfig,
  presets: [
    [
      'classic',
      {
        docs: {
          path: 'docs',
          sidebarPath: 'sidebars.ts',
        },
        blog: false,
        theme: {
          customCss: ['./src/css/custom.css'],
        },
        sitemap: {
          priority: 0.5,
        },
        gtag: {
          trackingID: 'G-S4SD5NXWXF',
          anonymizeIP: true,
        },
        debug: process.env.NODE_ENV === 'development',
      } satisfies Preset.Options,
    ],
  ],
  plugins: [
    'docusaurus-plugin-image-zoom',
    '@docusaurus/plugin-ideal-image',
    // ['docusaurus-plugin-baidu-tongji', { token: 'c9a3849aa75f9c4a4e65f846cd1a5155' }],
    [
      '@docusaurus/plugin-pwa',
      {
        debug: process.env.NODE_ENV === 'development',
        offlineModeActivationStrategies: ['appInstalled', 'standalone', 'queryString'],
        pwaHead: [
          { tagName: 'link', rel: 'icon', href: 'img/logo.png' },
          { tagName: 'link', rel: 'manifest', href: '/manifest.json' },
          { tagName: 'meta', name: 'theme-color', content: '#12affa' },
        ],
      },
    ],
    [
      'vercel-analytics',
      {
        debug: process.env.NODE_ENV === 'development',
        mode: 'auto',
      },
    ],
    [
      './src/plugin/plugin-content-blog', // 为了实现全局 blog 数据，必须改写 plugin-content-blog 插件
      {
        path: 'blog',
        editUrl: ({ locale, blogDirPath, blogPath, permalink }) =>
          `https://github.com/kuizuo/blog/edit/main/${blogDirPath}/${blogPath}`,
        editLocalizedFiles: false,
        blogDescription: '代码人生：编织技术与生活的博客之旅',
        blogSidebarCount: 10,
        blogSidebarTitle: 'Blogs',
        postsPerPage: 12,
        showReadingTime: true,
        readingTime: ({ content, frontMatter, defaultReadingTime }) =>
          defaultReadingTime({ content, options: { wordsPerMinute: 300 } }),
        feedOptions: {
          type: 'all',
          title: 'One',
          copyright: `Copyright © ${new Date().getFullYear()} One Built with Docusaurus.<p><a href="http://beian.miit.gov.cn/" class="footer_lin">${beian}</a></p>`,
        },
      },
    ],
    async function tailwindcssPlugin() {
      return {
        name: 'docusaurus-tailwindcss',
        configurePostCss(postcssOptions) {
          // Appends TailwindCSS and AutoPrefixer.
          postcssOptions.plugins.push(require('tailwindcss'))
          postcssOptions.plugins.push(require('autoprefixer'))
          return postcssOptions
        },
      }
    },
    async function injectMotto() {
      return {
        name: 'docusaurus-motto',
        injectHtmlTags() {
          return {
            headTags: [
              {
                tagName: 'script',
                innerHTML: `
    (${function () {
      console.log(
        `%c Kz Blog %c https://github.com/kuizuo/blog`,
        'color: #fff; margin: 1em 0; padding: 5px 0; background: #12affa;',
        'margin: 1em 0; padding: 5px 0; background: #efefef;',
      )

      const motto = `
This Webisite Powered By Kz Blog.
Written by Docusaurus, Coding with Love.
--------
Love what you do and do what you love.
`

      if (document.firstChild?.nodeType !== Node.COMMENT_NODE) {
        document.prepend(document.createComment(motto))
      }
    }.toString()})();`,
              },
            ],
          }
        },
      }
    },
  ],
  headTags: [
    {
      tagName: 'meta',
      attributes: {
        name: 'description',
        content: 'One的个人博客',
      },
    },
  ],
  stylesheets: [
    'https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Normal.min.css',
    'https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Medium.min.css',
    'https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Semibold.min.css',
  ],
  i18n: {
    defaultLocale: 'zh-CN',
    locales: ['en', 'zh-CN'],
    localeConfigs: {
      en: {
        htmlLang: 'en-GB',
      },
    },
  },
  onBrokenLinks: 'warn',
}

export default config

重点代码：

点击展开所有代码：

      items: [
        {
          label: '🏡首页',
          position: 'left',
          items: [
            { label: '首页', to: '/' },
            { label: '起始页', to: 'https://onedayxyy.cn' },
            { label: '导航', to: '/docs/tool' },
          ],
        },
        // { to: '/docs/tool', label: '导航', position: 'left' },
        { to: '/docs/zhishiku', label: '📘知识库', position: 'left' },
        {
            label: '🌈博客',
            position: 'left',
            items: [
                { label: 'ruyu-blog', to: 'http://blog.onedayxyy.cn/' },
                { label: 'hexo', to: 'http://onedayxyy.cn/hexoblog/' },
                { label: 'docus', to: 'blog' },
                { label: '归档', to: 'blog/archive' },
            ],
        },  
        {
            label: '💎专题',
            // position: 'right',
            items: [                      
              { label: '0、开源项目', to: '/docs/OpenSource' },
              { label: '1、网站搭建', to: '/docs/beauty-website' },
              { label: '2、云笔记最佳实践', to: '/docs/cloud-note' },
              { label: '3、知识库选型', to: '/docs/wiki-select' },
              { label: '4、前端示例', to: '/docs/QianDuanShiLi' },
              { label: '5、NAS', to: '/docs/nas' },
              { label: '6、脚本', to: '/docs/scripts' },
              { label: '7、vscode', to: '/docs/vscode' },
            ],
          },  
          {
            label: '📸娱乐',
            position: 'left',
            items: [
                { label: '相册', to: 'https://photo.onedayxyy.cn/' },
                { label: '音乐', to: 'https://music.onedayxyy.cn/' },
                { label: '观影厅', to: '/docs/movie' },  
            ],
        },  

        {
            label: '💖精神小屋',
            position: 'left',
            items: [
                { label: '说说', to: 'https://moments.onedayxyy.cn/' },
                { label: '树洞', to: '/' },
                { label: '精神世界', to: '/docs/missing' },
                { label: '时间管理', to: '/docs/timeplan' },
            ],
            
        },        
          
          {
            label: '🍷更多',
            // position: 'right',
            items: [
              { label: '关于我', to: '/docs/aboutAuthor' },
              { label: '关于本站', to: '/docs/AboutMywebsite' },
              { label: '留言板', to: '/' },
              { label: '🔗友链', to: 'friends' },
              { label: '项目', to: 'project' },
              { label: '监控', to: 'http://47.100.215.163:3000/d/9CWBz0bik/1-node-exporter-for-prometheus-dashboard-cn-v20200628?orgId=2' },
              { label: '后台管理系统', to: '/' },
              { label: '百度网盘', to: 'https://pan.baidu.com/s/1E0zTSlmuQHgTKLhAr6ZBTg?pwd=g9yv' },
              { label: 'zdir网盘', to: 'http://47.100.215.163:6080' },
            ],
          },    
        {
            href: 'https://onedayxyy.cn/images/image-20240703070602.png',
            label: 'QQ群',
            position: 'right',
        },                                   

    ],

sidebars.ts配置

点击展开所有代码：

/**
 * Creating a sidebar enables you to:
 - create an ordered group of docs
 - render a sidebar for each doc of that group
 - provide next/previous navigation

 The sidebars can be generated from the filesystem, or explicitly defined here.

 Create as many sidebars as you want.
 */

// @ts-check

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure

  //笔记数据
  linux: [{ type: 'autogenerated', dirName: '1、笔记数据' }],


  //开源项目

  opensource: [{ type: 'autogenerated', dirName: '2、开源项目' }],


  //专题
  website: [{ type: 'autogenerated', dirName: '3、专题/01、网站搭建' }],
  cloudnote: [{ type: 'autogenerated', dirName: '3、专题/02、云笔记最佳实践' }],
  wiki: [{ type: 'autogenerated', dirName: '3、专题/03、知识库选型' }],
  shell: [{ type: 'autogenerated', dirName: '1、笔记数据/1、运维/1、linux/2、shell/4、shell脚本' }],
  nas: [{ type: 'autogenerated', dirName: '3、专题/05、NAS' }],
  vscode: [{ type: 'autogenerated', dirName: '1、笔记数据/1、运维/5、other/文本编辑软件/1、vscode' }],

  //精神世界
  life: [{ type: 'autogenerated', dirName: '4、精神世界/生活' }],
  one: [{ type: 'autogenerated', dirName: '4、精神世界/终将释怀' }],

  
  //关于我
  aboutMyWebsite: [{ type: 'autogenerated', dirName: '5、关于我/关于本站' }],
 
};

export default sidebars;

自定义菜单栏：风格1

• 想要实现这个效果的

按如下配置：

自定义菜单栏：风格2

• 想要实现这个风格的

按如下配置：

注意：docusaurus.config.ts文件里要填对应的文件slug内容。

自定义菜单栏：风格3

• 想要实现这个风格的：

• 按如下配置

即不需要在sidebars.ts里配置。