使用

使用

目录

[toc]

优秀docusaurus文章案例

案例：双节前把我的网站重构了一遍 (太空编程)

双节前把我的网站重构了一遍 https://mp.weixin.qq.com/s/eKHUaAwLPa_Fj5ZvbZzYhA

项目结构

假设你选择了经典模板并将网站命名为 my-website，你将会在新目录 my-website/ 下看到下列文件：

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

==1.项目结构解读==

• /blog/ - 包含博客的 Markdown 文件。 如果你后续禁用了博客插件，你可以删除这个目录，或者你也可以在设置 path 选项之后修改它的名称。 详情可参考博客指南
• /docs/ - 包含文档的 Markdown 文件。 你可以在 sidebars.js 中自定义文档的侧边栏顺序。 如果你后续禁用了文档插件，你可以删除这个目录，或者你也可以在设置 path 选项之后修改它的名称。 详情可参考文档指南
• /src -如页面或自定义 React 组件一类的非文档文件。 严格来说，你不一定要把非文档类文件放在这里。不过把它们放在一个集中的目录，可以让代码检查或者处理更为简便。
  • /src/pages - 所有放在此目录中的 JSX/TSX/MDX 文件都会被转换成网站页面。 详情可参考页面指南
• /static/ - 静态目录。 此处的所有内容都会被复制进 build 文件夹
• /docusaurus.config.js - 站点配置文件。 这等效于 Docusaurus 1 中的 siteConfig.js 文件
• /package.json - Docusaurus 网站是一个 React 应用。 你可以安装并使用任何 npm 包。
• /sidebars.js - 由文档使用，用于指定侧边栏中的文档顺序

==2.单仓模式==

如果你打算用 Docusaurus 来给一个现有的项目搭建文档，单仓模式可能是一种解决方案。 单仓允许你在类似项目间共享依赖项。 比如，你的网站可以用本地的包来展示最新的功能，而不是依赖于已发布的版本； 你的贡献者也可以在实现功能时方便地更新文档。 下面是单仓模式文件夹结构的一个例子：

my-monorepo
├── package-a # 另一个包，你的项目本身
│   ├── src
│   └── package.json #  package-a 的依赖项
├── website   # Docusaurus 根目录
│   ├── docs
│   ├── src
│   └── package.json # Docusaurus 的依赖项
├── package.json # 单仓的共享依赖项

这种情况下，你应该在 /my-monorepo 文件夹中运行 npx create-docusaurus。

如果你在用 Netlify 或 Vercel 等托管平台，你需要把网站的 Base directory 修改到你的 Docusaurus 根目录的位置。 在上面这个例子里，就是./website。

要了解更多关于怎么配置忽略命令的信息，可以阅读部署文档。

你可以在 Yarn 的文档中了解更多关于单仓的信息（Yarn 并不是建立单仓的唯一方法， 但这是常见的方案之一），或者参考 Docusaurus 和 Jest 等一些真实案例。

docusaurus里md图片存放问题==（已解决）==

• 发现时间：2023年11月13日

• 故障环境

$ npx docusaurus --version
3.0.0

$ node --version
v18.18.0

$ npm --version
9.1.2

win10

• docusaurus里md文档使用相对路径图片是没问题的

• docusaurus渲染后页面效果，是没问题的：

修改主页配置信息==（已解决）==

2023年11月12日更新

• 测试环境

$ npx docusaurus --version
3.0.0

$ node --version
v18.18.0

$ npm --version
9.1.2

win10

• 配置效果

• 配置方法

index.js

import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';

const FeatureList = [
  {
    title: 'linux',
    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        乐于开源
      </>
    ),
  },
  {
    title: 'k8s',
    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
    description: (
      <>
        干货满满
      </>
    ),
  },
  {
    title: '运维开发',
    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
    description: (
      <>
        持续更新
      </>
    ),
  },
];

function Feature({Svg, title, description}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}

_category_.json文件使用

• 无_category_.json效果

• 有_category_.json效果

• 注意_category_.json常用选项

是否生成目录配置：

##推荐使用这种方法
{
  "link": {
    "type": "generated-index"
  }
}


{
  "label": "linux",
  "position": 1,
  "link": {
    "type": "generated-index"
  }
}

mdx

Discord

问题：如何配置docusaurus自定义页面==(已解决)==

• 最终效果

• 配置方法

配置sidebars.js

/**
 * 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
  运维: [{type: 'autogenerated', dirName: '1、运维'}],
  开发: [{type: 'autogenerated', dirName: '2、开发'}],
  黑客: [{type: 'autogenerated', dirName: '3、黑客'}],
  前端: [{type: 'autogenerated', dirName: '4、前端'}],
  about: [{type: 'autogenerated', dirName: '关于我'}],
  love: [{type: 'autogenerated', dirName: '精神小屋'}],
  happy: [{type: 'autogenerated', dirName: '休闲一刻'}],

  // But you can create a sidebar manually

  // tutorialSidebar2: [
  //   'intro',
  //   'hello',
  //   {
  //     type: 'category',
  //     label: 'Tutorial',
  //     items: ['tutorial-basics/create-a-document'],
  //   },
  // ],

};

export default sidebars;

配置docusaurus.config.js

// @ts-check
// `@type` JSDoc annotations allow editor autocompletion and type checking
// (when paired with `@ts-check`).
// There are various equivalent ways to declare your Docusaurus config.
// See: https://docusaurus.io/docs/api/docusaurus-config

import {themes as prismThemes} from 'prism-react-renderer';

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'Rong',
  tagline: '明心静性，好好生活，爱自己',
  // favicon: 'img/favicon.ico',
  favicon: 'img/xyy.png',

  // Set the production url of your site here
  url: 'https://onedayxyy.cn',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/',

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internationalization, you can use this field to set
  // useful metadata like html lang. For example, if your site is Chinese, you
  // may want to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },



  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: './sidebars.js',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        // blog: {
        //   showReadingTime: true,
        //   // Please change this to your repo.
        //   // Remove this to remove the "edit this page" links.
        //   editUrl:
        //     'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        // },
        theme: {
          customCss: './src/css/custom.css',
        },
      }),
    ],
  ],

  
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: 'Rong',
        logo: {
          alt: 'My Site Logo',
          // src: 'img/logo.svg',
          src: 'img/xyy.png',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: '运维',
            position: 'left',
            label: '1、运维',
          }, 
          {
            type: 'docSidebar',
            sidebarId: '开发',
            position: 'left',
            label: '2、开发',
          }, 
          {
            type: 'docSidebar',
            sidebarId: '黑客',
            position: 'left',
            label: '3、黑客',
          },   
          {
            type: 'docSidebar',
            sidebarId: '前端',
            position: 'left',
            label: '4、前端',
          },                                                   
          {to: 'http://onedayxyy.cn/blog/', label: '博客', position: 'left'},
          {to: 'https://www.yuque.com/xyy-onlyone', label: '语雀', position: 'left'},
          {
            type: 'docSidebar',
            sidebarId: 'about',
            position: 'left',
            label: '关于我',
          },   
          {
            type: 'docSidebar',
            sidebarId: 'love',
            position: 'left',
            label: '精神小屋',
          },   
          {
            type: 'docSidebar',
            sidebarId: 'happy',
            position: 'left',
            label: '休闲一刻',
          },   
          // {
          //   type: 'docSidebar',
          //   sidebarId: 'tutorialSidebar',
          //   position: 'left',
          //   label: '关于本站',
          // },            
          // {to: '/blog', label: '博客', position: 'left'},
          // {
          //   href: 'https://github.com/facebook/docusaurus',
          //   label: 'GitHub',
          //   position: 'right',
          // },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Rong',
                to: '/',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: '博客',
                to: 'http://onedayxyy.cn/blog/',
              },
              {
                label: '语雀',
                href: 'https://www.yuque.com/xyy-onlyone',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: prismThemes.github,
        darkTheme: prismThemes.dracula,
      },
    }),
};

export default config;

案例：sidebars.js里不同定义方法出现的不同效果

测试时间：2024年4月27日

• 如果存在这条命令

将会是如下效果：

• 如果不存在这条命令

效果如下：

问题：分享链接为乱码问题==（已解决）==

• 故障现象

这批文章默认分享后的文章链接如下：

http://localhost:3000/docs/other/IT%E9%97%B2%E8%B0%88/simpread-%E6%88%91%E4%BB%AC%E8%83%BD%E4%BB%8E%E9%98%BF%E9%87%8C%E4%BA%91%E5%8F%B2%E8%AF%97%E7%BA%A7%E6%95%85%E9%9A%9C%E4%B8%AD%E5%AD%A6%E5%88%B0%E4%BB%80%E4%B9%88

会包含大量的乱码，这样很不友好。

• 那么，该如何解决这个问题呢？

• 通过给文章设置yaml字段即可解决

先来给文章yaml添加id字段：

再次拷贝文章链接：

http://localhost:3000/docs/other/IT%E9%97%B2%E8%B0%88/alicloud-down-2023.11.19

可以发先，此时文章名称被英文代替，没出现乱码，但是前面路径含中文，也导致了乱码的出现，因此这里再改进下。

• 添加slug字段再观察下

http://localhost:3000/docs/

额，这次文章链接里直接不包含任何标识信息了，这不是我们想要的效果，我们需要再次改进下。

• 再次修改slug内容

http://localhost:3000/docs/alicloud-down-2023.11.19

这次没有乱码了，链接里也包含本文章的关键信息，符合我的需求，以上问题已解决，完美。😘

• 总结，要想解决以上需求，只需要md开头yaml字段加上如下内容即可

---
title: 我们能从阿里云史诗级故障中学到什么
id: alicloud-down-2023.11.19
slug: /alicloud-down-2023.11.19
---

需求：自己的docusaurus网站，是否有必要配置cdn加速呢？-2023.11.29==（已解决）==

问题：自己目前网站是否有必要上cdn呢？

结论：

不需要，原因如下。

1、个人网站的外网流出流量很小哈哈；

2、个人网站里md里的图片是基于ecs的nginx的，并不是在oss上，因此不产生其他任何费用，nice。

---

2023年11月29日提问gpt

自己的docusaurus网站，是否有必要配置cdn加速呢？

配置 CDN（内容分发网络）加速对于 Docusaurus 网站是否有必要，取决于多个因素，包括你的网站目标受众的地理分布、网站的内容类型和大小，以及你对性能的要求。以下是一些考虑因素：

适用情况：

1. 全球受众： 如果你的网站受众分布在全球不同的地区，使用 CDN 可以加速内容传输，减少访问者的加载时间。CDN 服务器位于全球各地，能够将内容缓存到离用户更近的位置，提高访问速度。
2. 大型静态资源： 如果你的 Docusaurus 网站包含大量静态资源（例如图片、样式表、JavaScript 文件等），CDN 可以有效地缓存这些资源并加速其加载速度。
3. 流量峰值： 如果你的网站在某些时期会经历流量峰值，CDN 可以分担服务器负载，提高网站的稳定性和可用性。

可选情况：

1. 本地用户访问： 如果你的网站主要由本地用户访问，而且主机和用户之间的网络延迟较低，CDN 的加速效果可能相对有限。
2. 小型网站： 对于一些小型网站，且没有全球范围内的用户，可能并不需要配置 CDN。

思考因素：

1. 成本： 一些 CDN 服务可能需要额外的费用。在决定是否使用 CDN 之前，考虑一下成本效益，尤其是对于小型网站。
2. 配置复杂性： 配置 CDN 可能需要一些额外的配置步骤。确保你了解如何配置 CDN 并集成到你的 Docusaurus 网站中。
3. 性能监测： 使用工具监测你的网站性能，可以帮助你判断是否有必要配置 CDN。如果你的网站在各个地区的加载速度都在可接受范围内，可能不需要额外的 CDN 加速。

总体而言，如果你的 Docusaurus 网站面向全球受众，包含大量静态资源，并且你关注性能和用户体验，那么配置 CDN 可能是一个不错的选择。然而，具体的决策还需要根据你网站的具体情况和需求来做出。

需求：如何给docusaurus网站配置上自己的ISP备案信息？==（已解决）==

2023年11月17日

docusaurus 3.0.0
node v18.18.0
npm 9.1.2
win10

• 配置方法

docusaurus.config.js文件

            copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus. 陇ICP备2023002645`,

• 效果

需求：我想点击以后大标题后，会首先链接到其对应的一个主题md上==（已解决）==

• 故障环境

发现时间：2023年11月15日

docusaurus 3.0.0
node v18.18.0
npm 9.1.2
win10

• 提出需求

我想点击以后大标题后，会首先链接到其对应的一个主题md上，而不是当前默认在第一个文档上，不是很友好，对用户而言。

• 当前效果

点击运维大标题后的效果：

点击精神小屋大标题后的效果：

• 开始测试

对运维大标题测试：

新建一个linuxCover.md：

渲染后的效果：

• 出现在下面的顺序了，如何让这个md放在最上面那个位置呢？

• gpt

如何修改docusaurus里侧边栏md文档页面的顺序？

在 Docusaurus 中，侧边栏的顺序是由 Markdown 文件的位置和文件名来决定的。你可以通过调整文件夹中文件的排列顺序来改变侧边栏页面的顺序。

以下是一些方法：

方法一：通过文件名

Docusaurus会按照文件名的字母顺序在侧边栏中显示页面。你可以通过在文件名前加入数字或使用字母来调整顺序。例如：

1. FirstPage.md
2. SecondPage.md
3. ThirdPage.md

方法二：通过文件夹结构

如果你使用了嵌套的文件夹结构，Docusaurus 会按照文件夹的层次结构和字母顺序组织侧边栏。例如：

docs
|-- GettingStarted
|   |-- Introduction.md
|   |-- Installation.md
|-- AdvancedTopics
|   |-- Configuration.md
|   |-- Customization.md

在上面的例子中，GettingStarted 中的页面会在侧边栏中排在 AdvancedTopics 之前。

方法三：通过 sidebars.js 文件

你也可以通过 sidebars.js 文件来手动指定侧边栏的顺序。在 sidebars.js 文件中，你可以使用对象的方式定义文档的结构，手动调整顺序。以下是一个示例：

module.exports = {
  someSidebar: {
    "Getting Started": [
      "introduction",
      "installation",
    ],
    "Advanced Topics": [
      "configuration",
      "customization",
    ],
  },
};

在这个例子中，你可以调整每个部分下的页面的顺序，以满足你的需求。

请记住，每次修改了文档结构或 sidebars.js 文件后，你都需要重新运行 Docusaurus 来查看更改：

hnpm run build

或者，如果你希望在本地开发时自动重新加载：

bashnpm start

通过以上方法，你应该能够调整 Docusaurus 侧边栏中页面的顺序。

• 还是无法搞定，先这样吧。。。

• 哇哦，可以通过如下方式解决以上问题

• 此时渲染后的页面效果如下（符合预期）

需求：浏览器标签页这个提示有点不友好，如何改进==(已解决)==

• 发现时间：2023年11月13日

故障环境

$ npx docusaurus --version
3.0.0

$ node --version
v18.18.0

$ npm --version
9.1.2

win10

• 问题现象

• 自己期望的状态

标签页这里应该显示如下：

明心静性|Rong

• 原来配置

/d/docusaurus/src/pages/index.js

• 修改后

完美，符合预期：

需求：docusaurus不自带搜索功能呀==（已解决）==

搜索功能是一个刚需哦，因此这里开始配置搜索功能。

• 发现时间：2023年11月13日

故障环境

$ npx docusaurus --version
3.0.0

$ node --version
v18.18.0

$ npm --version
9.1.2

win10

• 故障现象

• 阳总的docusaurus是带搜索功能的：

测试效果还是不错的。

需求：如何定制最近更新top10功能==（已解决）==

2023年12月9日更新

ls命令

查找目录下最近修改过的5个文件命令？

你可以使用ls命令结合sort和head来查找目录下最近修改过的文件。以下是一个示例命令：

ls -lt | head -n 5

这个命令的含义是：

• ls -lt: 列出当前目录下的所有文件和目录，并按修改时间从新到旧排序。
• head -n 5: 仅显示前5行，即最近修改的5个文件。

如果你想在一个特定的目录中查找，可以将目录路径添加到命令中，例如：

ls -lt /path/to/your/directory | head -n 5

这将显示指定目录中最近修改的5个文件。请注意，这里的-lt选项中的 t 表示按修改时间排序。

---

我想用ls命令查看某个目录下最近修改过的10个md文件，但是我想排除掉目录，只想看md文件的修改，这个该如何做呢？

你可以使用ls命令结合grep来仅列出特定目录下最近修改的 .md 文件，排除目录。下面是一个示例命令：

ls -lt | grep ".md" | grep -v "^d" | head -n 10

这个命令的含义是：

• ls -lt: 列出当前目录下的所有文件和目录，并按修改时间从新到旧排序。
• grep ".md": 过滤出文件名中包含 .md 的文件。
• grep -v "^d": 过滤掉以 d 开头的行，即排除目录。-v 参数表示反向选择，"^d" 是一个正则表达式，匹配以 d 开头的行，即目录。
• head -n 10: 仅显示前10行，即最近修改的10个 .md 文件。

这样你就可以列出特定目录下最近修改的10个 .md 文件，并排除目录。

---

自己测试过程：

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus/resource/shell (master)
$ ls -ltR /d/docusaurus/docs/ | grep ".md" | grep -v "^d" | head -n 10
-rw-r--r-- 1 Win 197121     0 12月  8 07:04 latestUpdateArcticleTop10.md
-rw-r--r-- 1 Win 197121  5795 12月  8 07:01 微信公众号排版工具.md
-rw-r--r-- 1 Win 197121  2876 12月  6 12:45 _博客模板.md
-rw-r--r-- 1 Win 197121  4848 12月  4 09:20 画图软件.md
-rw-r--r-- 1 Win 197121  2260 12月  3 02:27 录屏软件.md
-rw-r--r-- 1 Win 197121   174 12月  2 10:00 字体.md
-rw-r--r-- 1 Win 197121 48274 11月 29 12:45 wiki.md
-rw-r--r-- 1 Win 197121  2509 11月 29 12:44 IT技术logo.md        
-rw-r--r-- 1 Win 197121  7894 11月 29 12:44 gpt.md
-rw-r--r-- 1 Win 197121  3515 11月 29 12:44 同步盘.md

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus/resource/shell (master)

find命令

能排查查找目录吗，我只想查找.md文件？

当你只想查找特定类型的文件时，你可以使用 find 命令。以下是查找指定目录下最近修改的5个 .md 文件的例子：

find /path/to/your/directory -name "*.md" -type f -exec stat --format="%Y %n" {} + | sort -n -r | head -5

这个命令的含义是：

• find /path/to/your/directory -name "*.md" -type f: 在指定目录下查找所有文件名匹配 *.md 的普通文件。
• -exec stat --format="%Y %n" {} +: 对每个找到的文件执行 stat 命令，获取文件的修改时间和文件名。
• sort -n -r: 按照修改时间从新到旧排序。
• head -5: 仅显示前5行，即最近修改的5个 .md 文件。

请将 /path/to/your/directory 替换为实际的目录路径。这样你就可以找到该目录下最近修改的5个 .md 文件。

%y   time of last modification, human-readable
%Y   time of last modification, seconds since Epoch

---

自己测试过程：

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus/resource/shell (master)
$ find /d/docusaurus/docs/ -name "*.md" -type f -exec stat --format="%Y %n" {} + | sort -n -r | head -10
1701990706 /d/docusaurus/docs/1、linux/linux命令/文件类/find.md
1701990265 /d/docusaurus/docs/other/latestUpdateArcticleTop10.md
1701990103 /d/docusaurus/docs/other/微信公众号排版工具.md
1701917442 /d/docusaurus/docs/关于我/1、精神小屋/2、懂得.md
1701908348 /d/docusaurus/docs/2、k8s/istio/3、Istio基础/07、Istio可观测性.md
1701905137 /d/docusaurus/docs/5、运维脚本/2、脚本案例/00、shell脚本案例.md
1701848907 /d/docusaurus/docs/开源项目/2、玩转docusaurus/网站迭代.md
1701848811 /d/docusaurus/docs/开源项目/2、玩转docusaurus/版本更新.md
1701848543 /d/docusaurus/docs/1、linux/定时器/crontab-linux定时任务.md
1701837930 /d/docusaurus/docs/other/_博客模板.md

再次更新后：（完美）

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus/resource/shell (master)
$ find /d/docusaurus/docs/ -name "*.md" -type f -exec stat --format="%y %n" {} + | sort -n -r | head -10
2023-12-08 07:11:46.527588300 +0800 /d/docusaurus/docs/1、linux/linux命令/文件类/find.md
2023-12-08 07:04:25.675984700 +0800 /d/docusaurus/docs/other/latestUpdateArcticleTop10.md
2023-12-08 07:01:43.285931300 +0800 /d/docusaurus/docs/other/微信公众号排版工具.md
2023-12-07 10:50:42.504374600 +0800 /d/docusaurus/docs/关于我/1、精神小屋/2、懂得.md
2023-12-07 08:19:08.224798500 +0800 /d/docusaurus/docs/2、k8s/istio/3、Istio基础/07、Istio可观测性.md
2023-12-07 07:25:37.526587000 +0800 /d/docusaurus/docs/5、运维脚本/2、脚本案例/00、shell脚本案例.md
2023-12-06 15:48:27.000000000 +0800 /d/docusaurus/docs/开源项目/2、玩转docusaurus/网站迭代.md
2023-12-06 15:46:51.000000000 +0800 /d/docusaurus/docs/开源项目/2、玩转docusaurus/版本更新.md
2023-12-06 15:42:23.000000000 +0800 /d/docusaurus/docs/1、linux/定时器/crontab-linux定时任务.md
2023-12-06 12:45:30.209284800 +0800 /d/docusaurus/docs/other/_博客模板.md

• 再更新

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus/resource/shell (master)
$ find /d/docusaurus/docs/ -name "*.md" -type f -exec stat --format="%y %n" {} + | sort -n -r | head -10|awk '{print $1 $2 $4}'
2023-12-0811:11:31.000000000/d/docusaurus/docs/other/黑客/内网穿透/实现内网穿透的几款工具-frp.md
2023-12-0811:01:57.000000000/d/docusaurus/docs/other/云服务器.md
2023-12-0807:34:28.820099500/d/docusaurus/docs/other/latestUpdateArcticleTop10.md
2023-12-0807:11:46.527588300/d/docusaurus/docs/1、linux/linux命令/文件类/find.md
2023-12-0807:01:43.285931300/d/docusaurus/docs/other/微信公众号排版工具.md
2023-12-0710:50:42.504374600/d/docusaurus/docs/关于我/1、精神小屋/2、懂得.md
2023-12-0708:19:08.224798500/d/docusaurus/docs/2、k8s/istio/3、Istio基础/07、Istio可观测性.md
2023-12-0707:25:37.526587000/d/docusaurus/docs/5、运维脚本/2、脚本案例/00、shell脚本案例.md
2023-12-0615:48:27.000000000/d/docusaurus/docs/开源项目/2、玩转docusaurus/网站迭代.md
2023-12-0615:46:51.000000000/d/docusaurus/docs/开源项目/2、玩转docusaurus/版本更新.md

##最终版
Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus/resource/shell (master)
$ find /d/docusaurus/docs/ -name "*.md" -type f -exec stat --format="%y %n" {} + | sort -n -r | head -10|awk '{print $1  $4}'
2023-12-08/d/docusaurus/docs/other/黑客/内网穿透/实现内网穿透的几款工具-frp.md
2023-12-08/d/docusaurus/docs/other/云服务器.md
2023-12-08/d/docusaurus/docs/other/latestUpdateArcticleTop10.md
2023-12-08/d/docusaurus/docs/1、linux/linux命令/文件类/find.md
2023-12-08/d/docusaurus/docs/other/微信公众号排版工具.md
2023-12-07/d/docusaurus/docs/关于我/1、精神小屋/2、懂得.md
2023-12-07/d/docusaurus/docs/2、k8s/istio/3、Istio基础/07、Istio可观测性.md
2023-12-07/d/docusaurus/docs/5、运维脚本/2、脚本案例/00、shell脚本案例.md
2023-12-06/d/docusaurus/docs/开源项目/2、玩转docusaurus/网站迭代.md
2023-12-06/d/docusaurus/docs/开源项目/2、玩转docusaurus/版本更新.md

结论

2者方案对比后：

明显是find命令符合自己需求!😘

出现的问题1

• docus渲染后结果是这样的现象……

• vscode里这样的现象都对着呢……

• 那么，该如何解决呢？

解决办法：加一个换行符-e

出现的问题2：ls命令和find命令输出的结果不一样

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus (master)
$ ls -ltR docs | grep ".md" | grep -v "^d" | head -n 10
-rw-r--r-- 1 Win 197121  889 12月  8 15:30 3、latestUpdateArcticleTop10.md
-rw-r--r-- 1 Win 197121   31 12月  8 14:57 2、网站监控.md
-rw-r--r-- 1 Win 197121 1912 12月  8 14:57 1、关于本站.md
-rw-r--r-- 1 Win 197121  5795 12月  8 07:01 微信公众号排版工具.md
-rw-r--r-- 1 Win 197121  2876 12月  6 12:45 _博客模板.md
-rw-r--r-- 1 Win 197121  4848 12月  4 09:20 画图软件.md
-rw-r--r-- 1 Win 197121  2260 12月  3 02:27 录屏软件.md
-rw-r--r-- 1 Win 197121   174 12月  2 10:00 字体.md
-rw-r--r-- 1 Win 197121 48274 11月 29 12:45 wiki.md
-rw-r--r-- 1 Win 197121  2509 11月 29 12:44 IT技术logo.md

Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus (master)
$ for i in {1..10}
> do
>   find /d/docusaurus/docs/ -name "*.md" ! -name 'latestUpdateArcticleTop10.md' -type f -exec stat --format="%y %n" {} + | sort -n -r | head -${i}|tail -1|awk -F'/' '{print $1" "$5"/"$6"/"$7"/"$8}';echo -e
> done
2023-12-09 06:47:57.406807400 +0800  1、linux/linux命令/文件类/文件类.md

2023-12-08 15:30:05.000000000 +0800  关于本站/3、latestUpdateArcticleTop10.md//

2023-12-08 15:13:30.000000000 +0800  1、linux/linux命令/linux命令.md/

2023-12-08 14:57:15.000000000 +0800  关于本站/2、网站监控.md//

2023-12-08 14:57:11.000000000 +0800  关于本站/1、关于本站.md//

2023-12-08 14:32:43.000000000 +0800  other/阿里云/阿里云.md/

2023-12-08 12:48:24.589747800 +0800  5、运维脚本/1、shell/1、shell/1、shell.md

2023-12-08 11:11:31.000000000 +0800  other/黑客/内网穿透/实现内网穿透的几款工具-frp.md

2023-12-08 11:01:57.000000000 +0800  other/阿里云/云服务器.md/

2023-12-08 07:01:43.285931300 +0800  other/微信公众号排版工具.md//


Win@DESKTOP-VUMV922 MINGW64 /d/docusaurus (master)
$ 

##1、ls命令
3、latestUpdateArcticleTop10.md
2、网站监控.md
1、关于本站.md
微信公众号排版工具.md
_博客模板.md
画图软件.md
录屏软件.md
字体.md
wiki.md
IT技术logo.md

##2、find命令
1、linux/linux命令/文件类/文件类.md
关于本站/3、latestUpdateArcticleTop10.md//
1、linux/linux命令/linux命令.md/
关于本站/2、网站监控.md//
关于本站/1、关于本站.md//
other/阿里云/阿里云.md/
5、运维脚本/1、shell/1、shell/1、shell.md
other/黑客/内网穿透/实现内网穿透的几款工具-frp.md
other/阿里云/云服务器.md/
other/微信公众号排版工具.md//

感觉还是find的命令会更准确些！估计还是因为find命令使用的是stat来输出的结果。。。

最终代码

• 实现效果

• 具体代码

/d/docusaurus/resource/shell/latestUpdateArcticleTop10.sh

#!/bin/bash


# for i in {1..10}
# do
#   echo "Iteration $i"
# done

# 将脚本赋值给变量
script=$(cat <<'END_SCRIPT'
for i in {1..10}
do
  find /d/docusaurus/docs/ -name "*.md" ! -name 'latestUpdateArcticleTop10.md' -type f -exec stat --format="%y %n" {} + | sort -n -r | head -${i}|tail -1|awk -F'/' '{print $1" "$5"/"$6"/"$7"/"$8}';echo -e
done
END_SCRIPT
)

cat > /d/docusaurus/docs/关于本站/3、latestUpdateArcticleTop10.md << EOF
---
title: 3、最近更新
id: latestUpdateArcticleTop10
slug: /latestUpdateArcticleTop10
---
EOF


# 执行脚本
eval "$script" >> /d/docusaurus/docs/关于本站/3、latestUpdateArcticleTop10.md

/d/docusaurus/resource/shell/xyy2.sh

#!/bin/sh

echo "Print latestUpdateArcticleTop10……" 
sh /d/docusaurus/resource/shell/latestUpdateArcticleTop10.sh 

存在问题

这2点需要改进：

更新脚本（更改时间格式）

更新于：2023年12月13日

说明：原来脚本的时间过于详细，这里进行再改进下。

• 原来效果

##脚本
for i in {1..10}
do
  find /d/docusaurus/docs/ -name "*.md" ! -name 'latestUpdateArcticleTop10.md' -type f -exec stat --format="%y %n" {} + | sort -n -r | head -${i}|tail -1|awk -F'/' '{print $1" "$5"/"$6"/"$7"/"$8"/"$9}';echo -e
done

• 当前效果

#!/bin/bash


# for i in {1..10}
# do
#   echo "Iteration $i"
# done

# 将脚本赋值给变量
script=$(cat <<'END_SCRIPT'
for i in {1..10}
do
  find /d/docusaurus/docs/ -name "*.md" ! -name 'latestUpdateArcticleTop10.md' -type f -exec stat --format="%y %n" {} + | sort -n -r | head -${i}|tail -1|awk '{print $1" "$4}';echo -e
done
END_SCRIPT
)

cat > /d/docusaurus/docs/关于本站/3、latestUpdateArcticleTop10.md << EOF
---
title: 3、最近更新
id: latestUpdateArcticleTop10
slug: /latestUpdateArcticleTop10
---
EOF


# 执行脚本
eval "$script" >> /d/docusaurus/docs/关于本站/3、latestUpdateArcticleTop10.md

更新脚本（刚改显示方式）

更新于：2023年12月15日

• 原来效果

• 当前效果

xyy2.sh脚本内容：

echo "Print websiteMonitor……" 
websiteMonitor="$(ssh root@47.100.215.163 sh /root/monitor.sh)"
echo ${websiteMonitor}
sed -i "1i\\${websiteMonitor}" /d/docusaurus/docs/关于本站/2、网站监控.md;echo -e
sed -i "1i\\\n" /d/docusaurus/docs/关于本站/2、网站监控.md
# echo "![](https://onedayxyy.cn/images/IMG_024.gif)" >> /d/docusaurus/docs/关于本站/2、网站监控.md

latestUpdateArcticleTop10.sh脚本内容：（这部分内容保持不变）

测试效果：

符合预期。😘

docusaurus build构建测试

测试时间：2023年11月22日

docusaurus 3.0.0
node v18.18.0
npm 9.1.2
win10

我们来测试下：

• 我们在docusaurus的_testdd目录里创建了一些文件，然后执行npm run build后，观察是否在build目录下回包含这些文件？

• 可以看到渲染后的页面是没这个_testdd目录的

• 执行npm run build

• 然后利用everything来在build目录下搜索下测试文件

无目标文件，符合预期。

---

我们再把_testdd目录重新拷贝一份数据，然后把_符号去掉，然后再次构建下，并观察下效果

• 把_testdd目录重新拷贝一份数据，然后把_符号去掉

• 再次构建

• 可以看到渲染后的页面个testdd2目录出现了：

• 然后利用everything来在build目录下搜索下测试文件

额，奇怪，这次怎么还没有呢……

• 这里再把build目录删除掉，然后重新生成试试：

还是没有，奇怪。。。。

---

gpt提问：

docsuaurus的docs目录下的例如.sh .py等文件类型的文件，执行npm run build命令后，会被构建到build目录里去吗？

在Docusaurus项目中，通常位于 docs 目录下的 .sh、.py 等文件类型并不会被默认构建到 build 目录中。Docusaurus主要专注于文档的构建和展示，对于非文档的文件，它默认会将它们复制到 build 目录，而不会对其进行额外的构建处理。

在Docusaurus项目的根目录下，你可能会看到一个 static 目录，其中的内容也会被复制到 build 目录，可以用于存放一些不需要额外处理的静态资源，比如图片、样式表等。

如果你希望特定类型的文件被构建并包含在生成的网站中，你可能需要修改 Docusaurus 的配置文件（docusaurus.config.js）以明确告诉 Docusaurus 如何处理这些文件。你可以使用 docs 配置中的 include 和 exclude 选项，例如：

javascriptmodule.exports = {
  // 其他配置...
  docs

但是自己经过测试：对于非文档的文件，它默认会将它们复制到build 目录，而不会对其进行额外的构建处理。`

这里并没有复制操作呀……

目录或文件命名原则

结论

1. 如果子目录较多，就建议用01、xx命名；
2. 如果子目录较少，就建议用1、xx命名；

另外，1、xx命名规范会比较有好些。

案例：实战文档命名规则

更新于：2024年3月18日

这样命名的方式，既有利于本地文件的查找，同时渲染后也是对用户更友好。

本地命名规则：

实战：完美解决Github 2fa二次验证问题-2024.1.4(已解决)

md里yaml命名规则：

渲染后效果：

案例：1.test1命名规则（不符合预期）

案例：目录或文件命名推荐使用1、xxx，否则如果配置成1.xxx，在docusaurus渲染后，页面是不会带标号的。

更新于：2023年11月12日

• 故障现象

==文件名称测试：==

==目录名称测试：==

案例：01、test1命名规则（测试成功，符合预期）

2023年11月21日

docusaurus 3.0.0
node v18.18.0
npm 9.1.2
win10

• 配置方法

• 效果

符合预期。😘

注意：采用这种方式命名后，可以在目录里使用label来修改显示名称，这样子渲染后的页面更友好些。（但是，自己后期知识库里禁止使用_category_,json，方便数据维护。）

案例：目录和文件同名（nice）😜

如果某个目录下有个md文件和目录同名的话，且目录下没_category_.json文件,那么这里会直接显示md文档内容。==（nice）==

更新于：2023年11月19日

案例：如果某个目录下有个md文件和目录同名的话，且目录下没_category_.json文件,那么这里会直接显示md文档内容

案例：

案例：文件和目录都是按1、这种标号去排序的哦

更新于：2023年11月17日

Docusaurus好强大哦，还可以这样自定义侧边栏文件/目录顺序哦。

这种方式渲染后的体验是真的很棒哦。😘

自定义Docusaurus网站字体-2024.1.1**（已解决）**

测试1：编辑src/css/custom.css文件（仅仅修改正文字体成功）

按gpt方式编辑src/css/custom.css文件后，可以发现网站页面正文的汉字是会发生变化的，但是网站首页字体、页面侧边栏、目录等字体均未发生改变。

但是有遗留问题：

• gpt

如何更改docusaurus网站里文章字体？

Docusaurus 是一个易于维护的静态网站生成器，专门用于生成文档网站。若要更改 Docusaurus 网站中文章的字体，你通常需要在网站的 CSS 文件中进行更改。请按照以下步骤更改文章的字体：

1. 定位样式文件: 找到网站项目中负责样式的 CSS 或 SCSS 文件。在 Docusaurus v2 中，你通常会在 src/css 目录下进行样式的自定义。

2. 编辑或添加样式: 打开你要编辑的 CSS 文件，并添加或修改选择器以更改字体。例如，若要更改主要内容区域的字体，你可能会添加如下样式规则：

   .markdown {
     font-family: 'Your Font Family', sans-serif;
   }

   确保替换 'Your Font Family' 为你想要的字体名称。

3. 引入字体: 如果你想使用的字体不是 web 安全字体，即不是大多数操作系统默认安装的字体，你可能需要在网站的 HTML 或 CSS 文件中引入它。例如，如果你使用的是 Google Fonts，你可以将以下代码添加到 Docusaurus 网站的 HTML <head> 部分（通常是在 src/pages/index.js 或 src/theme/Layout.js 文件中），或者直接在 CSS 文件的顶部：

   <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

   或者在 CSS 文件中使用 @import：

   @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

   并确保你的 CSS 规则中使用了正确的字体名称。

4. 重新构建项目: 保存你的更改，并在项目根目录下重新构建 Docusaurus 网站，通常使用以下命令：

   npm run build

   或者如果你使用的是 Yarn：

   yarn build

5. 检查效果: 本地启动网站预览更改，通常使用以下命令：

   npm run start

   或者如果你使用的是 Yarn：

   yarn start

请根据你使用的 Docusaurus 版本以及个人项目的设置进行相应的调整。如果你不熟悉前端开发，处理字体、CSS 和项目构建可能会有些复杂，你可能需要进一步学习相关的前端开发知识。

• 配置方法

.markdown {
  font-family: "寒蝉全圆体", "霞鹜文楷", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}

• 测试效果

测试2：进一步配置custom.css（网站所有字体均已修改成功）

再gpt

按你提供的方法修改了src/css/custom.css文件后，docusaurus网站的页面正文字体发生了改变，但是网站首页字体、侧边栏字体、文章目录字体都为发生改变，这个是要配置其他什么地方吗？

在 Docusaurus 中，如果你想要更改首页、侧边栏或者文章目录的字体，你可能需要对不同的 CSS 类进行定制。custom.css 文件是用来覆盖 Docusaurus 默认样式的地方。具体要修改哪些 CSS 类，取决于你想要改变的元素。以下是一些你可能需要覆盖的 CSS 类的例子：

1. 首页标题字体： 如果你想改变首页的标题字体，你需要找到对应的标题 CSS 类。例如：

   .hero__title {
     font-family: 'Your Font', sans-serif;
   }

2. 侧边栏字体： 侧边栏可能包含多个元素，你可以通过检查元素找到相应的类名来修改。比如：

   .navbar__title, .navbar__item {
     font-family: 'Your Font', sans-serif;
   }

3. 文章目录字体： 文章目录也可以通过其特定的 CSS 类来修改：

   .table-of-contents__left-border {
     font-family: 'Your Font', sans-serif;
   }

4. 正文内容： 如果你只改变了正文内容的字体，可能是类似这样的选择器：

   .markdown {
     font-family: 'Your Font', sans-serif;
   }

请记住，具体的类名可能会随 Docusaurus 版本和你使用的主题而变化。因此，如果你不确定要修改哪些类，可以使用浏览器的开发者工具（通常通过右键点击页面上的元素，然后选择“检查”或“Inspect Element”）来查看特定元素的当前应用的 CSS 类。

此外，确保在 custom.css 文件的样式规则后面使用 !important 来覆盖默认样式，如果默认样式的优先级更高的话：

.navbar__title {
  font-family: 'Your Font', sans-serif !important;
}

最后，当你修改完 custom.css 文件后，你可能需要重启 Docusaurus 的开发服务器来看到更改，或者如果是生产环境，确保你的浏览器没有缓存旧的样式文件。

---

经测试，部分是有效果的。

测试3：如何引入本地字体（测试成功）

gpt1（错误方法）

如果我想引入本地字体，该怎么写呢？

如果您想要在 Docusaurus 网站中引入本地字体，您可以按照以下步骤操作：

1. 将字体文件放置到项目中： 将字体文件（例如 .ttf、.woff、.woff2 等）放置到您的项目目录中，比如放在 static 文件夹下的一个子文件夹中。例如，您可以创建一个路径为 static/fonts/ 的文件夹，并将字体文件放在那里。

2. 更新 custom.css 文件： 在 src/css/custom.css 文件中使用 @font-face 规则来引入本地字体。因为 Docusaurus 会将 static 目录下的内容复制到网站的根目录下，所以您可以直接从根目录引用字体，如下所示：

@font-face {
  font-family: 'Your Font Name';
  src: url('/fonts/your-font-file.woff2') format('woff2'),
       url('/fonts/your-font-file.woff') format('woff'),
       url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

请将 'Your Font Name' 替换成您的字体名称，'your-font-file.xxx' 替换成您的字体文件名。

3. 使用字体： 使用 font-family 属性将字体应用到您想要修改的部分，例如：

body {
  font-family: 'Your Font Name', sans-serif;
}

注意：

• 您引入的字体名称 font-family: 'Your Font Name'; 必须与 @font-face 中指定的名称一致。
• 请确保您有权使用并分发您所引入的字体文件。如果字体是商用的，请确保您已经购买了相应的许可。
• 字体文件的格式和路径应该根据您的实际文件和项目结构进行相应的调整。
• 在一些浏览器中，出于安全原因，可能会限制从本地文件系统加载字体。如果在本地测试时遇到问题，您可能需要部署到服务器上才能看到效果。

---

自己测试

@font-face {
  font-family: '寒蝉全圆体';
  src: url('/fonts/ChillRoundF.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

自己测试后效果：

• 自己的pc端是没问题的

• 但是自己手机端是没现象的

• 自己ipad也是没现象的

• 其他用户pc访问也是不能正常出现象的：。。。

（linux机器安装桌面后）

gpt2（成功解决）

• gpt（没啥效果）

为什么其他用户访问我的网站吗，字体还是没生效呢？

如果其他用户访问您的网站时，自定义字体没有生效，可能存在以下原因：

1. 字体文件路径不正确：如果字体文件的路径指定错误，那么在用户的浏览器中就无法正确加载字体。请检查CSS中的@font-face规则，确保字体文件的URL是正确的，并且对所有用户都是可访问的。（我的是正确的）

2. 跨域限制（CORS）：字体文件由于浏览器的同源策略（Same-Origin Policy），在网站上使用时可能受到跨域限制。如果字体文件托管在不同的域上，您可能需要在托管字体的服务器上设置适当的CORS（Cross-Origin Resource Sharing）头，允许其他域访问这些文件。

3. 兼容性问题：不是所有的浏览器都支持所有的字体格式。确保您提供了几种不同格式的字体文件（如.woff, .woff2, .ttf, .eot），以使网站能在所有浏览器上正常工作。

4. 网络或文件权限问题：用户可能由于网络问题或者文件权限设置错误，无法下载字体文件。请检查服务器上的字体文件权限，确保它们对外公开且可下载。

5. CSS缓存：用户的浏览器可能缓存了旧的CSS文件。请确保您的服务器配置正确地处理了缓存，可能需要设置合适的缓存控制HTTP头或使用版本控制（如给CSS文件名添加版本号或时间戳）来强制浏览器加载新的CSS文件。

6. CSS优先级或覆盖：可能有其他CSS规则覆盖了您的字体设置。这可能是因为样式表中的选择器优先级较高，或者在其他地方使用了!important声明。

为了解决这个问题，您可以：

• 仔细检查您的CSS文件和@font-face规则，确保路径指向正确的服务器位置。
• 如果使用了CDN或其他域来托管字体文件，请确保设置了正确的CORS头。
• 提供多种格式的字体文件，并在CSS中按照正确的顺序声明它们。
• 检查服务器的文件权限以及网络连接，确保用户能够访问字体文件。
• 确保网页的HTTP头部正确地处理了缓存问题，或者在部署新版网站时更新文件的版本号。
• 使用开发者工具检查CSS的实际运行效果，看看自定义字体的CSS规则是否被正确应用。

测试1：添加ChillRoundF.otf--测试失败😥

• 配置方法

• 测试效果

手机和linux虚机测试，还是无效果哎。。。；🤣

测试2：在线字体测试

算了，不用测试了……

• gpt

还是有问题啊，该怎么办呢？

如果您已经尝试了前面提到的解决方案，而自定义字体在其他用户访问您的网站时仍然没有生效，那么可能需要进行更深入的调查。下面是一些您可以进行的额外步骤：

1. 验证字体许可：确保您拥有在网站上使用该字体的版权和授权。有些字体是有商用限制的，如果没有正确的授权，可能无法在您的网站上使用。

2. 检查浏览器控制台：打开网站时检查浏览器的开发者工具控制台（通常可以通过按F12或右键点击页面并选择“审查元素”来打开），查找可能有关字体文件加载失败的错误信息。

3. 网络问题：确认没有网络问题，如DNS配置错误，导致用户无法访问托管字体的服务器。

4. 检查字体服务商的问题：如果您使用的是第三方字体服务（如Google Fonts或Adobe Fonts），请检查这些服务是否正常工作。

5. 测试不同的设备和网络环境：尝试在不同的设备和网络环境中访问您的网站，以确定问题是否普遍存在。

6. 考虑字体加载方式：如果您是通过JavaScript或CSS异步加载字体，可能存在加载顺序的问题。确保字体在文本渲染之前就已经被加载和应用。

7. 检查样式表的顺序：确保包含@font-face规则的样式表在其他可能影响字体应用的样式表之前加载。

8. 测试字体堆栈（Font Stack）：在CSS中设置备用字体，以确定是否有字体正在被应用，例如：

   body {
     font-family: 'YourCustomFont', Arial, sans-serif;
   }

   这样设置可以确保即使自定义字体没有加载，用户仍能看到一个系统默认的字体。

9. 使用在线字体诊断工具：使用在线工具，如 Webfont Test 或 Font Inspector，来帮助诊断和测试您的字体文件。

10. 联系技术支持：如果问题依旧无法解决，考虑联系您的网站托管服务商或寻求一个专业的前端开发者帮助。

进行上述检查后，如果问题仍然存在，您可能需要分享更详细的信息，如网站的URL、字体加载的相关代码、以及任何特定的错误信息，这样可以帮助进一步地诊断问题。

百度方法**（成功解决）**

https://www.soinside.com/question/aGmgKxoZCVLVhgL8zg3GYF Docusaurus 未加载自定义字体

配置方法

我这里只修改了字体的本地路径：

原来的路径为：

@font-face {
  font-family: '寒蝉全圆体';
  src: url('/fonts/ChillRoundF.ttf') format('truetype'),
       url('/fonts/ChillRoundF.otf') format('otf') ;
  font-weight: normal;
  font-style: normal;
}

更新后的路径为：

@font-face {
  font-family: '寒蝉全圆体';
  src: url('../../static/fonts/ChillRoundF.ttf') format('truetype'),
       url('../../static/fonts/ChillRoundF.otf') format('otf') ;
  font-weight: normal;
  font-style: normal;
}

测试效果

网页端、手机端、ipad端均显示正常，符合预期

手机端和ipad都显示正常，符合预期：（完美😘）

但存在一个问题**（遗留问题，待改进）**

2024年1月12日当做遗留

这种引用本地字体后，有一个问题：

当首次打开网站首页时，加载的还是原来默认字体；

如果再次刷新后（会看到刷新按钮一直在加载），或者切换到其他页面后（稍等8s左右），

然后才能看到整个网站的字体才会发生改变。

我想问这个问题的原因是什么？

🔰

gpt：自定义字体加载有延迟

为什么docsuaurus网站加载本地字体后，第一次打开首页时还是原来的字体，要通过刷新页面或者切换到其他页面稍等一段时间后，整个网站才能加载自己定义的本地字体呢，这个是什么原因，该如何接解决呢？

这个问题可能是由于缓存机制导致的。当您首次访问网站时，浏览器会将页面的资源（包括字体文件）存储在本地缓存中，以加快后续的加载速度。因此，即使您在代码中指定了新的字体，浏览器可能仍然会使用缓存中的旧字体。

解决这个问题的一种方法是使用版本控制。您可以通过在链接字体文件的URL中添加版本号或更改文件名来确保浏览器获取到最新的字体文件。这样一来，当您更新字体文件时，链接的URL会发生变化，浏览器会重新下载最新版本的字体文件。

另外，您也可以通过在HTTP响应头中设置适当的缓存控制策略来解决这个问题。通过设置Cache-Control和Expires头，您可以指定字体文件的缓存时间，确保浏览器在一定时间后重新请求最新的字体文件。

最后，您还可以尝试使用JavaScript来动态加载字体文件。通过使用Web Font Loader等库，您可以在页面加载后再加载字体文件，避免缓存问题。

综上所述，您可以尝试使用版本控制、设置缓存控制策略或使用JavaScript来解决字体加载问题。根据您的具体需求和技术栈，选择最适合您的解决方案即可。

---

再gpt

解决这个问题的一种方法是使用版本控制。您可以通过在链接字体文件的URL中添加版本号或更改文件名来确保浏览器获取到最新的字体文件。这样一来，当您更新字体文件时，链接的URL会发生变化，浏览器会重新下载最新版本的字体文件。 上面这个方法具体要如何设置呢？

我的docusaurus的css里字体部分代码如下：

@font-face {
  font-family: '寒蝉全圆体';
  src: url('../../static/fonts/ChillRoundF.ttf') format('truetype'),
       url('../../static/fonts/ChillRoundF.otf') format('otf') ;
  font-weight: normal;
  font-style: normal;
}

要使用版本控制来解决字体加载问题，您可以在字体文件的URL中添加版本号或更改文件名。这样，当您更新字体文件时，链接的URL会发生变化，浏览器会重新下载最新版本的字体文件。

具体操作如下：

1. 在字体文件的URL中添加版本号：

   @font-face {
     font-family: '寒蝉全圆体';
     src: url('../../static/fonts/ChillRoundF-v1.0.ttf?v=1.0') format('truetype'),
          url('../../static/fonts/ChillRoundF-v1.0.otf?v=1.0') format('otf');
     font-weight: normal;
     font-style: normal;
   }

   将字体文件的URL末尾添加?v=1.0（版本号）来区分不同版本的字体文件。

2. 更改字体文件的文件名：

   @font-face {
     font-family: '寒蝉全圆体';
     src: url('../../static/fonts/ChillRoundF-v1.0.ttf') format('truetype'),
          url('../../static/fonts/ChillRoundF-v1.0.otf') format('otf');
     font-weight: normal;
     font-style: normal;
   }

   将字体文件的文件名更改为ChillRoundF-v1.0.ttf和ChillRoundF-v1.0.otf来表示不同版本的字体文件。

通过以上方法，当您更新字体文件时，只需修改版本号或更改文件名，浏览器就会重新下载最新版本的字体文件，避免使用缓存中的旧字体文件。请根据您的实际情况选择适合的方法进行设置。

---

经自己按第一种方法测试后，还是一样的效果……

就这样吧，当做一个遗留问题吧，后续改进。

关于我

我的博客主旨：

• 排版美观，语言精炼；
• 文档即手册，步骤明细，拒绝埋坑，提供源码；
• 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

🍀 微信公众号

《云原生架构师实战》

🍀 个人博客站点

https://onedayxyy.cn/

🍀 语雀

https://www.yuque.com/xyy-onlyone

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

🍀 知乎

https://www.zhihu.com/people/foryouone

最后

好了，关于本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！