1、使用

使用

小功能配置

修改个人特点

2024.8.13（已解决）。

公告

官方

https://docusaurus.io/zh-CN/docs/api/themes/configuration#table-of-contents

配置方法

    announcementBar: {
      id: 'support_us',
      content:
        '欢迎访问我的网站：这里将会持续更新docusaurus主题，感谢关注！',
      backgroundColor: '#fafbfc',
      textColor: '#091E42',
      isCloseable: true,
    },

效果

首页打字机效果

自己配置方法：

-2024.8.13（已解决）

配置方法

此部分代码在如下位置。

Hyde大佬配置方法：

https://hydoc.netlify.app/docs/Docusaurus-typewriter

1.安装类型声明

首先，确认是否有适用于 typeit-react 的类型声明包。某些库没有自带类型声明，但社区可能提供了相关的声明包。

运行以下命令来安装 @types 类型声明包（如果有的话）：

pnpm install @types/typeit-react --save-dev

如果没有找到对应的类型声明包，继续执行下面的步骤。

2.安装 typeit-react 模块

确保你已经安装了 typeit-react 模块

pnpm install typeit-react

json
yaml

"typeit-react": "^2.7.2"

3.创建自定义类型声明

如果没有找到现成的类型声明,【自己实操是有的，跳过此步骤】
你可以为 typeit-react 创建一个自定义的声明文件。

在项目的 src 目录下创建一个 types 文件夹（如果没有的话），然后在 types 文件夹内创建一个 typeit-react.d.ts 文件，并添加以下内容：

declare module 'typeit-react' {
  // 在这里添加自定义的类型声明
  import { FC } from 'react';

  interface TypeItProps {
    options?: any; // 根据需要添加具体的选项类型
    children?: React.ReactNode;
  }

  const TypeIt: FC<TypeItProps>;

  export default TypeIt;
}

4.组件中引入

在src\components\landing\Hero\index.tsx组件中引入

import TypeIt from 'typeit-react';

5.使用

点击查看更多

import { type Variants, motion } from 'framer-motion';
import Translate from '@docusaurus/Translate';
import HeroSvg from './img/hero.svg';
import SocialLinks from '@site/src/components/SocialLinks';
import { MovingButton } from '../../magicui/moving-border';
import styles from './styles.module.css';
import TypeIt from 'typeit-react';
const variants: Variants = {
  visible: (i) => ({
    opacity: 1,
    y: 0,
    transition: {
      type: 'spring',
      damping: 25,
      stiffness: 100,
      duration: 0.3,
      delay: i * 0.3,
    },
  }),
  hidden: { opacity: 0, y: 30 },
}

function Circle() {
  return <div className={styles.circle} />
}

function Name() {
  return (
    <motion.div
      className={styles.hero_text}
      custom={1}
      initial="hidden"
      animate="visible"
      variants={variants}
      onMouseMove={(e) => {
        e.currentTarget.style.setProperty('--x', `${e.clientX}px`)
        e.currentTarget.style.setProperty('--y', `${e.clientY}px`)
      }}
    >
      <Translate id="homepage.hero.greet">你好! 我是</Translate>
      <span
        className={styles.name}
        onMouseMove={(e) => {
          const bounding = e.currentTarget.getBoundingClientRect()
          e.currentTarget.style.setProperty('--mouse-x', `${bounding.x}px`)
          e.currentTarget.style.setProperty('--mouse-y', `${bounding.y}px`)
        }}
      >
        <Translate id="homepage.hero.name">Hyde</Translate>
      </span>
      <span className="ml-1">👋</span>
    </motion.div>
  )
}

export default function Hero() {
  return (
    <motion.div className={styles.hero}>

      <div className={styles.intro}>
        <Name />
        <motion.p custom={2} initial="hidden" animate="visible" variants={variants} className="max-lg:px-4">
          <TypeIt
            getBeforeInit={(instance) => {
              instance
                .type('明心静性，爱自己。')
                .pause(2000) // 停顿3秒
                .delete(9)
                .pause(500)
                .type('越长大，越孤独！')
                .pause(2000); // 停顿3秒
              return instance;
            }}
            options={{ loop: true, speed: 200 }} // 添加 speed 参数
            className={styles['rainbow-text']} // 添加彩虹色类
          />
        </motion.p>
        <motion.div custom={3} initial="hidden" animate="visible" variants={variants}>
          <SocialLinks />
        </motion.div>
        <motion.div className="mt-4 flex gap-2" custom={4} initial="hidden" animate="visible" variants={variants}>
          <MovingButton borderRadius="1.25rem" className="relative z-10 flex items-center rounded-2xl border border-neutral-200 border-solid bg-background px-5 py-3 text-center font-semibold text-base dark:border-neutral-800">
            <a href={'/'} className="font-semibold">
              <Translate id="hompage.hero.introduce">自我介绍</Translate>
            </a>
          </MovingButton>
        </motion.div>
      </div>

​      <motion.div className={styles.background}>
​        <HeroSvg />
​        <Circle />
​      </motion.div>
​    </motion.div>
  )
}

菜单栏模糊代码

-2024.8.22（测试成功）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 愧怍仓库

效果

配置

在src\css\custom.css路径下添加以下代码

.navbar {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: hsla(0, 0%, 100%, 0.2);
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.102),
    0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
  opacity: 1;
  /* 添加过渡动画 */
  transition: backdrop-filter 0.5s linear, background-color 0.5s linear,
    box-shadow 0.5s linear, opacity 0.5s linear;
}

.navbar-sidebar__backdrop {
  /* 移动端侧边栏背景色,背景色为透明 */
  background-color: rgba(0, 0, 0, 0);
}

解决移动端布局侧边栏高度自适应问题

-2024.8.22（测试成功）。

在src\css\custom.css路径下添加以下代码：

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 愧怍仓库

效果

原来

修改为

@media (max-width: 1100px) {
	省略...
	
  .navbar-sidebar {
    height: 200rem; /* 高度为视口高度的 200rem */
  }
}

2024.8.20-已解决。

自己配置方法

拷贝data/website.ts文件：

拷贝src/theme/Footer目录：

重启服务器，观察效果：

文章底部显示最近更新时间

2024年8月25日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

效果

配置方法

配置如下代码：

          showLastUpdateTime: true,
          showLastUpdateAuthor: false,

然后记得在md文件最开头写上如下内容：

title: 2、部署
id: filesite.io-photot-install
slug: /filesite.io-photot-install
author: One
date: 2024-08-20
last_update:
  date: 2024-08-24

在blog目录下是没用的

这个配置在日常文档里有用，但是配置在blog目录下是没用的。。。

默认日期问题该如何解决

提示

如果md文档默认不配置last_update选项，默认渲染后是有时间显示的，为2018年10月14日。（这个该如何解决呢？？。。。）

配置方法

侧边栏左侧线条

2024年8月25日，已解决。

此代码实现由Hydoc的小站大佬提供。🤞🤞（感谢大佬）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

效果

配置方法

在src\css\custom.css中添加以下代码：

/* 分割线================================================================================================================================== */
/* 侧边栏左侧线条 */
.menu__list .menu__list {
  border-bottom: 2px solid #ced9e3;
  /* 设置底部边框颜色为透明 */
  /* border-bottom-color: #ffc840 !important; */
  border-bottom-color: #ffffff00 !important;
  /* 设置左边框颜色 */
  border-left: 2px solid #ffc840;
  /* 设置边框圆角 */
  border-radius: 0 0 0 10px;
  /* 设置左边距 */
  margin-left: 1rem;
  /* 设置左边内边距 */
  padding-left: 0.3rem;
}

底部分页导航

2024年8月25日，已解决。

此代码实现由Hydoc的小站大佬提供。🤞🤞（感谢大佬）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

配置效果

配置方法

在src\css\custom.css中添加以下代码：

a:hover {
  color: #72a1ed;
}

/* 分页导航 */
.pagination-nav__link {
  border: 1px solid #00000000;
  padding: 0.5rem;
  margin: 0 0.5rem;
  transition: all 0.3s ease-in-out;
}

.pagination-nav__link:hover {
  border: 1px solid #72a1ed;
  transform: scaleX(0.9); /* 缩小宽度到 90% */
}

.pagination-nav__label:hover {
  transform: scale(1.1); /* 将元素缩小到原始大小的 80% */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
  display: inline-block; /* 确保元素在缩放时不会破坏布局 */
}

.pagination-nav {
  border: solid #d8d8d8;
  border-width: 2px 0 0;
  margin: 2em 0;
  padding-top: 0.5rem;
}

.pagination-nav__sublabel {
  /* 上一页下一页文字颜色 */
  color: #72a1ed;
}

上一页和下一个hover背景颜色

src\theme\PaginatorNavLink\index.tsx

export default function PaginatorNavLink(props: Props): JSX.Element {
  const { permalink, title, subLabel, isNext } = props
  return (
    <Link
      className={cn(
        // 上一页和下一个hover背景颜色
        'pagination-nav__link border-2 border-link hover:bg-[#00000000]',
        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
      )}
      to={permalink}
    >
      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
      <div className="pagination-nav__label">{title}</div>
    </Link>
  )
}

文章目录滚动条/全局滚动条样式设置

2024年8月25日，已解决。

此代码实现由Hydoc的小站大佬提供。🤞🤞（感谢大佬）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

效果

配置方法

目录悬停和激活样式

添加样式路径：src\css\custom.css

/* 样式规则适用于所有的 .table-of-contents__link 元素 */
.table-of-contents__link {
  border-radius: 8px; /* 圆角边框 */
  margin-top: -0.5rem; /* 上边距，调整元素的垂直位置 */
  padding: 0.3rem 0 0.3rem 1rem; /* 内边距，顶部和底部 0.3rem，左侧 1rem */
  font-weight: 550; /* 字体加粗 */
  transition: 0.25s !important; /* 过渡效果，设置样式变化的过渡时间 */
}

/* 鼠标悬停时的样式 */
.table-of-contents__link:hover,
.table-of-contents__link:hover code {
  background-color: rgba(4, 184, 145, 0.395); /* 背景颜色，带透明度 */
  color: #333; /* 字体颜色 */
}

/* 激活状态下的样式 */
.table-of-contents__link--active,
.table-of-contents__link--active code {
  background-color: #00d7a8; /* 背景颜色 */
  color: #FFF; /* 字体颜色 */
}

滚动条样式

全局滚动条样式

src\css\custom.css添加以下代码

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-track {
  border-radius: 2em;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: var(--color-pink-light);
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

目录滚动条样式 src\css\custom.css添加以下代码

/* 确保目录容器可滚动 */
.tableOfContents_src-theme-TOC-styles-module {
  overflow-y: auto; /* 启用垂直滚动条 */
  scrollbar-width: thin; /* Firefox 滚动条宽度 */
  scrollbar-color: var(--color-pink-light) transparent; /* Firefox 滚动条滑块和轨道颜色 */
}

/* WebKit 浏览器的滚动条样式 */
.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar {
  width: 0.5rem; /* 滚动条宽度 */
}

.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar-thumb {
  background: var(--color-pink-light); /* 滚动条滑块的颜色 */
  border-radius: 2em; /* 滚动条滑块的圆角 */
}

.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar-thumb:hover {
  background: #26c6da; /* 滚动条滑块悬停时的颜色 */
}

/* 尝试隐藏 WebKit 浏览器中的滚动条按钮（上下箭头） */
.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar-button {
  display: none; /* 隐藏滚动条按钮 */
}

/* 隐藏滚动条背景 */
.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar {
  background: transparent; /* 隐藏滚动条背景 */
}

/* 明亮模式样式 */
.tableOfContents_src-theme-TOC-styles-module {
  /* 由于不同浏览器兼容性和箭头不能隐藏，直接把整个目录滚动条隐藏了 */
  --color-pink-light: #00000000; /* 明亮模式下的滚动条颜色 */
}

/* 暗黑模式样式 */
@media (prefers-color-scheme: dark) {
  .tableOfContents_src-theme-TOC-styles-module {
    --color-pink-light: #322d31; /* 暗黑模式下的滚动条颜色 */
  }
}

首页技术栈动态图和github效果图

2024年8月26日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

效果

配置方法

新增这个目录：src/components/landing/FeaturesSection

新增友链 & 导航

2024年8月26日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

效果

配置方法

新增如下目录：src/pages/website

新增如下目录：src/pages/project/_components/ShowcaseTooltip

新增如下2个文件：

新增如下2个图片目录：

回到顶部小火箭

2024年8月27日，已解决。

此代码实现由Hydoc的小站大佬提供。🤞🤞（感谢大佬）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

2024年8月25日提出：

类似如下效果：

效果

在一篇文章，用鼠标慢慢往上轻轻滑动时，就会出现小火箭图标，点击后，立马就会回到文章开头。

配置方法

1.创建svg图片代码

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724594712811" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1850" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M528.032 226.7648l0.0832-0.0768c105.5232-105.536 252.2688-143.0656 382.72-111.2 31.872 130.4576-5.664 277.1968-111.1936 382.7264-1.4592 1.4592-2.9248 2.9056-4.4032 4.3392l-58.0352 58.0416 47.9808 84.768a76.8 76.8 0 0 1-3.7888 81.6832l-126.272 181.5488c-24.2112 34.816-72.0768 43.4112-106.8992 19.2a76.8 76.8 0 0 1-3.712-2.7584l0.3264-0.4096a41.6192 41.6192 0 0 1-14.8544-54.4768 34.624 34.624 0 0 0-0.0896-0.0384c24.9984-42.6752 28.0128-98.496 11.0464-155.456-61.984 13.824-129.4848-3.392-177.7152-51.616-48.2176-48.2176-65.4272-115.6992-51.6288-177.6704-56.928-16.9472-112.7232-13.9264-155.3792 11.0592a35.2384 35.2384 0 0 0-0.0384-0.0896 41.6192 41.6192 0 0 1-54.4768-14.848l-0.3584 0.2816c-23.4112-30.1312-21.28-73.6832 6.4-101.3632a76.8 76.8 0 0 1 10.4576-8.7488l181.6512-126.336a76.8 76.8 0 0 1 81.5232-3.8784l84.4032 47.5136 60.3648-60.3648c0.6208-0.6272 1.2544-1.2352 1.888-1.8304z m-261.504 378.8608c17.8752 45.9968 37.2864 79.4624 58.2272 100.4032 20.512 20.512 52.096 38.6112 94.7584 54.2912a19.2 19.2 0 0 1 4.896 33.3824l-72.8576 54.6368a19.2 19.2 0 0 1-30.1888-19.8336l3.1808-13.2736a19.2 19.2 0 0 0-27.8784-21.3248l-64.2624 35.1232a19.2 19.2 0 0 1-26.0544-26.048l37.4784-68.5824a19.2 19.2 0 0 0-19.5648-28.2176l-32.3264 4.6272a19.2 19.2 0 0 1-18.08-30.528l59.4112-79.2192a19.2 19.2 0 0 1 33.2544 4.5632zM621.2032 405.12c29.9904 29.9968 78.6176 29.9968 108.608 0 29.9968-29.984 29.9968-78.6112 0-108.608-29.9904-29.9904-78.6176-29.9904-108.608 0-29.9904 29.9968-29.9904 78.624 0 108.608z" fill="#12affa" p-id="1851" data-spm-anchor-id="a313x.search_index.0.i1.62433a810ptZyU"></path></svg>

保存图片路径：

在static\svg\中保存图片,并重命名back-top.svg

2.文件中引入在src\css\custom.css文件中引入

/* 返回顶部按钮样式 */
[class*="backToTopButton"] {
  /* 全局样式覆盖 */
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url(/static/svg/back-top.svg) !important;
  background-size: cover !important;
  transition: transform 0.8s ease-in-out !important;
}

[class*="backToTopButton"]:hover {
  background-color: transparent !important;
  transform: scale(1.2) !important;
}

[class*="backToTopButton"]::after {
  background-color: transparent !important;
}

集成看板娘和在线聊天

引入JavaScript外部脚本

2024年8月28日，已解决。

此代码实现由Hydoc的小站大佬提供。🤞🤞（感谢大佬）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

配置方法：

1.集成配置

在根目录下docusaurus.config.ts配置目录下插入以下代码

// 插入外部 JavaScript 链接
const config: Config = {
    themeConfig:{
        // ...
    },
      scripts: [
    {
        // 在线聊天
      src: '实际替换成您自己的聊天链接',
      async: true,  // 异步加载脚本
    },
    {
        // 看板娘
      src: 'https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js',
      defer: true,  // 延迟加载
    },
  ],
}

2.重新启动开发服务器

重新启动你的开发服务器，以确保docusaurus.config.ts配置重新加载生效

3.效果验证

自己的聊天机器人待后续配置。。。

大佬的聊天机器人：

在线聊天

https://app.salesmartly.com/registration?source=&shop_id=&shop_name=&shop_source=&plugin_id=&plugin_name=&plugin_is_del=&sys_user_id=&nickname=&project_id=&project_name=&type=&redirect_url=&channel=

生成自己专属代码

<script src="你的专属代码"></script>

配置到自己docus网站

重启docus开发服务器

ok。

首页博客创建时间和标签

2024年8月28日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

【bug】【重要】2024.8.12（待解决）

解决办法：

更新如下文件代码即可：src/components/landing/BlogSection/index.tsx

具体代码见源仓库文件：

点击查看更多

export default function BlogSection(): JSX.Element {
  const blogData = usePluginData('docusaurus-plugin-content-blog') as {
    posts: BlogPost[];
    postNum: number;
    tagNum: number;
  };

  const posts = chunk(blogData.posts.slice(0, BLOG_POSTS_COUNT), BLOG_POSTS_PER_ROW);

  const ref = React.useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 0.5, 1], [20, 0, -20], {
    clamp: false,
  });

  if (blogData.postNum === 0) {
    return <>作者还没开始写博文哦...</>;
  }

  return (
    <Section title={<Translate id="homepage.blog.title">🎉 近期博客</Translate>} href={'/blog'}>
      <div ref={ref} className="flex flex-col gap-4 overflow-hidden rounded-card p-3 md:grid md:grid-cols-12">
        {posts.map((postGroup, index) => (
          <div className="col-span-6 lg:col-span-4" key={index}>
            {postGroup.map((post, i) => (
              <motion.div style={{ y: i / 2 ? y : 0 }} key={i}>
                <BlogItem key={post.id} post={post} />
              </motion.div>
            ))}
          </div>
        ))}
      </div>
    </Section>
  );
}

效果

修改首页个人特点3张图片从svg变为为png类型

2024年8月28日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

效果

配置方法

（1）修改文件/d/docusaurus/data/features.tsx内容为：

features.tsx文件内容

// docusaurus/data/features.tsx

import Translate, { translate } from '@docusaurus/Translate';
import { Icon } from '@iconify/react';

export type FeatureItem = {
  title: string | React.ReactNode;
  description: string | React.ReactNode;
  header: React.ReactNode;
  icon?: React.ReactNode;
};

const FEATURES: FeatureItem[] = [
  {
    title: translate({
      id: 'homepage.feature.developer',
      message: 'linux',
    }),
    description: (
      <Translate>
        初见
      </Translate>
    ),
    header: <img src="/img/1.png" style={{ maxHeight: '150px', width: 'auto', borderRadius: '50%' }} alt="Linux" />,
    icon: <Icon icon="logos:typescript-icon" className="h-4 w-4 text-neutral-500" />,
  },
  {
    title: translate({
      id: 'homepage.feature.spider',
      message: 'k8s',
    }),
    description: (
      <Translate>
        幸福
      </Translate>
    ),
    header: <img src="/img/2.png" style={{ maxHeight: '150px', width: 'auto', borderRadius: '50%' }} alt="K8s" />,
  },
  {
    title: translate({
      id: 'homepage.feature.enthusiast',
      message: '运维开发',
    }),
    description: (
      <Translate>
        后来
      </Translate>
    ),
    header: <img src="/img/3.png" style={{ maxHeight: '150px', width: 'auto', borderRadius: '50%' }} alt="DevOps" />,
  },
];

export default FEATURES;

（2）在src\css\custom.css路径下添加以下代码

/* src/css/custom.css */

.feature-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.feature-image {
  max-height: 150px;
  width: auto;
  border-radius: 50%;
  margin-right: 16px; /* 根据需要调整间距 */
}

.feature-text h3 {
  margin: 0;
  font-size: 1.25rem; /* 根据需要调整字体大小 */
}

.feature-text p {
  margin: 0;
  font-size: 1rem; /* 根据需要调整字体大小 */
}

当前原作者kuizuo版本为啥构建时会报错呢

2024.8.18(后面自己莫名奇妙又好了)

故障环境：

win10

$ node -v
v20.12.1

$ pnpm -v
8.12.0

"@docusaurus/core": "3.4.0",

故障现象

[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nUnexpected '}' at assets/css/styles.b50603e7.css:25:71983.","compilerPath":"client"}   

[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nUnexpected '}' at assets/css/styles.b50603e7.css:25:105642.","compilerPath":"client"}      
[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name '&' at assets/css/styles.b50603e7.css:25:70794. Ignoring.","compilerPath":"client"}

[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name '&' at assets/css/styles.b50603e7.css:25:71728. Ignoring.","compilerPath":"client"}
[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name '&' at assets/css/styles.b50603e7.css:25:71808. Ignoring.","compilerPath":"client"}
[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name '>a{padding-bottom' at assets/css/styles.b50603e7.css:25:71894. Ignoring.","compilerPath":"client"}
[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name '&' at assets/css/styles.b50603e7.css:25:84812. Ignoring.","compilerPath":"client"}
[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name '&' at assets/css/styles.b50603e7.css:25:85594. Ignoring.","compilerPath":"client"}
[WARNING] {"file":"assets/css/styles.b50603e7.css","message":"assets/css/styles.b50603e7.css from Css Minimizer plugin\nInvalid property name 'a{color' at assets/css/styles.b50603e7.css:25:105566. Ignoring.","compilerPath":"client"}

gpt回答

Unexpected '}' 错误

这个错误通常是由于多余或缺少的闭合括号引起的。

检查 assets/css/styles.b50603e7.css 文件的第 25 行附近，确保所有的 { 和 } 是成对出现的，没有遗漏或多余的。

Invalid property name '&' 错误

这个错误通常发生在预处理器代码中。预处理器如Sass会使用 & 符号来表示父选择器引用。如果你直接将Sass或者Less代码编译成CSS而没有经过预处理器的处理，就会出现这个错误。

3.Invalid property name '>a{padding-bottom'错误

这个错误通常是因为CSS选择器和属性之间缺少了正确的分隔符（如 : 号），或者是选择器语法错误。

Invalid property name 'a{color' 错误

同样地，这个错误也是由于选择器和属性之间缺少了正确的分隔符，或者是语法错误。

解决方法

检查CSS文件：检查 assets/css/styles.b50603e7.css 文件中的错误行（特别是第 25 行和附近行）是否存在语法错误。确保所有的选择器和属性是正确的。
使用预处理器：如果你使用Sass或Less等预处理器，确保你在项目中正确配置了这些工具，并且你的CSS编译步骤包括了对这些预处理器的处理。
检查构建工具配置：确保你的构建工具链（如Webpack）正确配置，以处理预处理器文件（如 .scss 或 .less 文件）。

举例

假设在 styles.scss 文件中有以下代码：

.parent {
  color: red;
  & .child {
    color: blue;
  }
}

确保你在构建过程中使用了Sass编译器（如 sass-loader），而不是直接使用CSS编译器。

在 webpack.config.js 中，你需要配置 sass-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

如果你没有使用预处理器，请检查你的CSS文件，确保所有语法都是有效的CSS语法。

总结

检查 assets/css/styles.b50603e7.css 文件中的语法错误。
如果使用了预处理器，确保正确配置了构建工具链。
修复具体错误行的语法错误。

通过这些步骤，你应该能够解决这些CSS相关的构建错误。

如何解决

只能等原作者有空来更新代码了……

后面又好了。。。

找不到“jest”的类型定义文件

2024年8月25日，已解决。

此代码实现由Hydoc的小站大佬提供。🤞🤞（感谢大佬）

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

找不到“jest”的类型定义文件。程序包含该文件是因为:在 compilerOptions 中指定的类型库 "jest" 的入口点

找不到文件“@docusaurus/tsconfig”。

Option 'bundler' can only be used when 'module' is set to 'preserve' or to 'es2015' or later.

报错截图：

遇到这种情况时，通常是因为 TypeScript 找不到 jest 的类型定义文件。你可以按照以下步骤来解决这个问题：

1.确保已安装 @types/jest

确保你已经安装了 Jest 的类型定义包。你可以使用以下命令安装：

pnpm install --save-dev @types/jest

2.tsconfig.json 配置

在 tsconfig.json 文件中，确保 "types" 字段包含 "@types/jest"：

{
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "types": ["@types/jest"]
  }
}

3.重新启动开发服务器重新启动你的开发服务器，以确保 TypeScript 能够找到 jest 的类型定义文件。

pnpm start

4.效果展示

本docus项目本地运行报错？

2024年8月31日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

报错现象

本地运行是成功的：

但是点击菜单栏后，就报如下错误了：

Uncaught runtime errors:
×
ERROR
Script error.
    at handleError (webpack-internal:///./node_modules/.pnpm/webpack-dev-server@4.15.1_webpack@5.88.2/node_modules/webpack-dev-server/client/overlay.js:252:58)
    at eval (webpack-internal:///./node_modules/.pnpm/webpack-dev-server@4.15.1_webpack@5.88.2/node_modules/webpack-dev-server/client/overlay.js:271:7)

gpt

这个错误提示表明在使用 Docusaurus 时出现了一些运行时错误，可能由于多种原因导致。以下是一些可能的解决步骤：

1. 检查控制台错误

在浏览器的开发者工具中查看控制台（Console）是否有更详细的错误消息。这可以帮助你定位问题的根源。

2. 清理缓存

有时，旧的缓存可能会导致问题。你可以尝试清理缓存并重新启动开发服务器：

# 清除缓存并重新安装依赖
rm -rf node_modules
rm -rf package-lock.json # 如果使用 npm
rm -rf yarn.lock # 如果使用 yarn
npm cache clean --force
npm install

或者使用 Yarn：

yarn cache clean
yarn install

3. 更新依赖

确保你使用的是最新版本的 Docusaurus 和其他依赖。你可以通过以下命令更新：

npm update

或者使用 Yarn：

yarn upgrade

4. 检查配置文件

确保你的 docusaurus.config.js 文件中没有语法错误。特别是检查插件、主题和其他配置项是否正确。

5. 运行在生产模式下

尝试构建项目并在生产模式下运行，查看是否仍然出现错误：

npm run build
npm run serve

6. 禁用插件

如果你最近添加了新的插件或功能，尝试暂时禁用它们并查看问题是否依然存在。

7. 查看社区和文档

在 Docusaurus 的 GitHub 讨论区或 Docusaurus 的问题页面搜索类似的问题，看看其他用户是否遇到过此问题以及他们的解决方案。

8. 提供更多信息

如果以上步骤没有解决问题，可以考虑在 Docusaurus 的 GitHub 上提交一个问题（issue），提供详细的错误信息和重现步骤，以便开发团队和社区帮助你解决问题。

希望这些步骤能帮你解决问题！如果问题仍然存在，请提供更多上下文信息，以便更好地帮助你。

自己排查

有看板娘/github/图标等问题：

！

还有个404的

打开vpn观察下（果真好了）

如何让docus里默认加粗是红色字体

2024年8月28日，已解决。

环境

win10 Docusaurus version: 3.4.0 Node version: v20.12.1 pnpm 9.4.0 基于愧怍仓库

==背景==

docus里加粗默认是黑色字体

typora里效果，字体是红色的：

那么问题来了：

如何让docus里默认加粗是红色字体?

==配置方法：==

在src/css/custom.css添加如下css配置：

/* 分割线================================================================================================================================== */
/* 字体加粗后效果为红色 */
strong {
  color: red; /* 将加粗文本的颜色设置为红色 */
}

验证：(完美)

使用密码访问某个页面

2024年9月6日

需求

能不能实现这样一个需求：

我访问某个docusaurus页面时，需要输入密码后，才能正常允许访问？

如果可以，请帮我输出具体的完整代码，我的docusaurus是用typescript魔改的。

在 Docusaurus 中实现页面访问控制（例如要求输入密码才能访问某个页面）并不是直接内置的功能，但您可以通过一些自定义代码来实现这一需求。下面是一个基本的实现思路和代码示例。

1. 创建密码保护的页面

首先，您需要创建一个新的 React 组件，用于处理密码输入和验证。可以在 src/components 文件夹中创建一个名为 ProtectedPage.tsx 的文件。

// src/components/ProtectedPage.tsx
import React, { useState } from 'react';

const ProtectedPage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [password, setPassword] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const correctPassword = 'your-password'; // 将此处替换为您的密码

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (password === correctPassword) {
      setIsAuthenticated(true);
    } else {
      alert('Incorrect password!');
    }
  };

  if (!isAuthenticated) {
    return (
      <div style={{ padding: '20px' }}>
        <h2>Enter Password</h2>
        <form onSubmit={handleSubmit}>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }

  return <>{children}</>; // 如果认证成功，显示子组件内容
};

export default ProtectedPage;

2. 使用该组件保护页面

接下来，在您希望保护的页面中，使用 ProtectedPage 组件包裹页面内容。假设您有一个名为 my-protected-page.tsx 的页面。

// src/pages/my-protected-page.tsx
import React from 'react';
import Layout from '@theme/Layout';
import ProtectedPage from '../components/ProtectedPage';

const MyProtectedPage: React.FC = () => {
  return (
    <Layout title="Protected Page" description="This is a protected page">
      <ProtectedPage>
        <h1>This is a protected content</h1>
        <p>You have accessed the protected content successfully.</p>
      </ProtectedPage>
    </Layout>
  );
};

export default MyProtectedPage;

配置css风格：

src/css/custom.css 文件添加如下代码：

/* 分割线================================================================================================================================== */
/* 加密页面css */
/* src/css/custom.css */
.protected-container {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* background: linear-gradient(45deg, #d15e68, #f8d86f); */ 
  background: linear-gradient(45deg, #00d2ff, #3a7bd5); /*冷色调渐变 */
  background: linear-gradient(45deg, #b4d9fb, #ffeb3b, #a2e9f2, #a1e0ff, #a8ea68, #ffb7da); 
  background: linear-gradient(45deg, #ff5f6d, #ffc371); /*日落渐变 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  max-width: 400px;
  margin: auto; /* 居中 */
  color: white; /* 文本颜色 */
}

.protected-container h2 {
  margin-bottom: 20px;
}

.protected-container input {
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #fff; /* 输入框边框 */
  border-radius: 4px; /* 圆角 */
  background: rgba(255, 255, 255, 0.8); /* 输入框背景 */
  color: #333; /* 输入框文本颜色 */
}

.protected-container button {
  padding: 10px;
  border: none;
  border-radius: 4px; /* 圆角 */
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 按钮文本颜色 */
  cursor: pointer;
}

.protected-container button:hover {
  background-color: #0056b3; /* 按钮悬停效果 */
}

3. 运行并测试

确保您已经保存了所有更改，然后运行 Docusaurus 应用程序：

pnpm start

访问 /my-protected-page，您应该会看到一个输入密码的表单。输入正确的密码后，您将能够访问该页面的内容。

输入密码后：

注意

注意事项

安全性：这种密码保护的方法并不具备真正的安全性，仅适用于基本的访问控制。对于生产环境中需要保护敏感信息的场景，不建议使用这种前端解决方案。
密码管理：在代码中硬编码密码并不是一个好的做法。您可以考虑将其存储在环境变量中，或者使用更安全的认证机制。
用户体验：可以根据需要美化密码输入界面，以提高用户体验。

如果您有其他问题或需要进一步的帮助，请随时告诉我！

4.如何给我的markdown页面使用以上的页面加密功能呢？

在以上代码基础上，配置以下内容：

要在 Docusaurus 中为一个 Markdown 页面添加页面加密功能，您可以使用之前创建的 ProtectedPage 组件。以下是实现的步骤：

创建 Markdown 页面

首先，创建一个新的 Markdown 文件，例如 my-protected-page.mdx，并将其放置在 docs 目录中：

// docs/my-protected-page.mdx

---
id: my-protected-page
title: My Protected Page
---

# This is a Protected Page

This content is hidden behind a password.

使用 ProtectedPage 组件

然后，您需要在 Markdown 页面中使用 ProtectedPage 组件。Docusaurus 允许您在 Markdown 文件中嵌入 React 组件。

请按照以下步骤操作：

创建一个新的页面组件

在 src/pages 目录中创建一个新的页面组件，例如 ProtectedPageWrapper.tsx：

// src/pages/ProtectedPageWrapper.tsx
import React from 'react';
import ProtectedPage from '../components/ProtectedPage';
import MyMarkdownContent from '@site/docs/my-protected-page.mdx'; // 使用 @site 前缀

const ProtectedPageWrapper: React.FC = () => {
  return (
    <ProtectedPage>
      <div>
        <MyMarkdownContent />
      </div>
    </ProtectedPage>
  );
};

export default ProtectedPageWrapper;

验证：

http://localhost:3000/ProtectedPageWrapper

😎

配置文件

docusaurus.config.ts

docusaurus.config.ts 位于你的网站的根目录，包含了你的站点的配置信息。

在这里可以修改 logo，站点名(title)，作者名，顶部的公告(announcementBar)，导航栏(navbar)，底部导航(footer)等等。

docusaurus.config.tstypescript

const config: Config = {
  title: '愧怍的小站',
  url: 'https://kuizuo.cn',
  baseUrl: '/',
  favicon: 'img/favicon.ico',
  organizationName: 'kuizuo',
  projectName: 'blog',
  themeConfig: {
    image: 'img/logo.png',
    metadata: [
      {
        name: 'keywords',
        content: '愧怍, kuizuo, blog, javascript, typescript, node, react, vue, web, 前端, 后端',
      },
    ],
    // ...
}

export default config

同时绝大部分的配置信息都可以放在这里，例如搜索(algolia)，评论(giscus)，社交链接(socials)等等。这些配置都可以通过docusaurus内置的hook(useThemeConfig、useDocusaurusContext)来获取。

完整的配置信息说明 docusaurus.config.ts | Docusaurus

sidebars.js

用于配置文档的侧边栏，例如本博客中的技术笔记，工具推荐。侧边栏对应的每一项都是一个 markdown 文件，同时这些文件都存放在 docs 目录下，方便管理。

侧边栏 | Docusaurus

其他配置

可能还需要配置下 giscus 评论，搜索，站点统计等等，这些会放在插件中细讲。

样式与页面

样式和布局

Docusaurus 网站是一个 React 单页应用。你可以像一般的 React 应用一样给网站提供样式，像 tailwindcss 与组件库都是支持的。不过引入这些会带来一定的代码体积，因此在这套主题中我所使用的都是全局样式与 css 模块。

修改主题色

可以在这里设置主色调与背景色来查看浅色与深色模式下的效果，例如我的主题色是 #12AFFA

@docusaurus/preset-classic 用 Infima 作为底层样式框架。 Infima 提供了灵活的布局，以及常见的 UI 组件样式，适用于以内容为中心的网站（博客、文档、首页）。想要了解更多详情，请查看 Infima 网站。

主页

因为设置了仅博客模式，没有专门编写的首页，而是将博文列表设置为首页。需要将 src/pages/index.tsx 文件给删除（或者改个名），否则会导致首页路径冲突。当然你也可以专门搞一个主页，就像 docusaurus 那样，然后跳转至博文列表页。

所以博客页面，也就是首页。但仅仅只有博客是远远不够的，所以便添加了 Hero 组件，也就是首次访问博客的样子。

主页右侧 SVG 背景文件地址: src/components/Hero/img/hero_main.svg, 插画来源于 unDraw，在这个网站可以找到这类插画风格的背景。或者你可以找专门设计插画的人为你设计。

自定义页面

归档、友链、导航、项目以及关于我页面都在 src/pages 目录下定义，根据文件名映射对应路由。页面的创建可以查看创建页面 | Docusaurus

自定义组件

初始化的一个 docusaurus 项目就已经有预留好的的组件，例如博客布局，标签页归档页等等。但是这些组件的样式可能不满你的审美，或者是想增加在这些主题组件中增加点东西。那么就需要用到 Swizzle

主题组件

在 docusaurus 中的主题组件存放在 @docusaurus/theme-classic/theme 下，如果想要覆盖某个组件的话可以在 src/theme 目录下创建与之对应文件路径结构相同的文件。

像下面这样

website
├── node_modules
│   └── @docusaurus/theme-classic
│       └── theme
│           └── Navbar.js
└── src
    └── theme
        └── Navbar.js

每当导入 @theme/Navbar 时，website/src/theme/Navbar.js 都会被优先载入。

关于分层架构可看客户端架构 | Docusaurus

swizzle 组件

要输出所有 @docusaurus/theme-classic 组件的总览，可以运行：

npm run swizzle @docusaurus/theme-classic -- --list

这里以归档页举例，官方的归档页面组件是 theme/BlogArchivePage

有两种方式可以完成自定义组件：弹出组件或者包装组件

例如弹出组件，可以执行以下命令：

npm run swizzle @docusaurus/theme-classic BlogArchivePage -- --eject --typescript

这样会创建 src/theme/BlogArchivePage/index.tsx，也就是归档页面的代码，而要做的就是修改代码，实现自己所需的样式与功能。

不过这样获取到的只是 index.tsx 文件，有可能还存在子组件。所以我一般的做法是在 node_modules/@docusaurus/theme-classic/src/theme 中找到组件所在文件夹，然后将整个文件夹复制到 src/theme 下。这样能得到就是最原始的 ts 文件，同时所能修改的地方也就越多，更方便的个性化。

注意

但是，在使用自定义组件的时候，有些主题组件可能会存在一定风险。尤其是在升级 Docusaurus 变得更困难，因为如果接收的属性发生变化，或内部使用的主题 API 发生变化，有可能就会导致页面渲染失败。

就比如我在将 docusaurus 升级到 2.0.0 正式版的时候就出现页面错误，原因是 plugin-content-blog 在传递给组件的数据发生了变动，导致数据无法解析，自然而然页面就渲染失败。

如果不升级依赖也确实不会有问题，但谁能保证新版本的一些特性不吸引使用者去升级呢？所以在自定义组件的时候，升级依赖后就可能需要维护一定的代码。要做的是重新 swizzle 一份最新的文件，然后去比对变化，最终排查问题。

插件

在 docusaurus.config.ts 下的 plugins，可以看到所有插件以及插件配置。如下所示

docusaurus.config.tstypescript

plugins: [
    'docusaurus-plugin-image-zoom',
    'docusaurus-plugin-sass',
    '@docusaurus/plugin-ideal-image',
    ['docusaurus-plugin-baidu-tongji', { token: 'xxxxxxxxxxxxxxx' }],
    [
      '@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' },
        ],
      },
    ],
    [
      './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: 10,
        showReadingTime: true,
        readingTime: ({ content, frontMatter, defaultReadingTime }) =>
          defaultReadingTime({ content, options: { wordsPerMinute: 300 } }),
        feedOptions: {
          type: 'all',
          title: '愧怍',
          copyright: `Copyright © ${new Date().getFullYear()} 愧怍 Built with Docusaurus.<p><a href="http://beian.miit.gov.cn/" class="footer_lin">${beian}</a></p>`,
        },
      },
    ],
  ],

plugin-image-zoom

适用于 Docusaurus 的图像缩放插件。

plugin-sass

支持 sass 预处理器

plugin-pwa

创建支持离线模式和应用安装的 PWA 文档站点，就像下图这样。

plugin-content-blog

由于官方的 plugin-content-blog 插件没有将有关博客的数据设置为全局，所以只能在博客列表页面 BlogListPage 组件中获取到，而由于本博客的某些组件需要使用到部分数据，因此这里对 plugin-content-blog 进行魔改，将 blog 信息添加至全局数据中，可在任意页面中都访问到所有博文的信息。

src/plugin/plugin-content-blog.tstypescript

async function blogPluginEnhanced(context, options) {
  const blogPluginInstance = await blogPlugin(context, options)

  return {
    ...blogPluginInstance,
    async contentLoaded({ content, allContent, actions }) {
      // Create default plugin pages
      await blogPluginInstance.contentLoaded({ content, allContent, actions })

      // Create your additional pages
      const { blogPosts, blogTags } = content
      const { setGlobalData } = actions

      setGlobalData({
        posts: blogPosts.slice(0, 10), // Only store 10 posts
        postNum: blogPosts.length,
        tagNum: Object.keys(blogTags).length,
      })
    },
  }
}

这些数据可能会占据一定的空间，点我查看详情。

搜索

搜索 | Docusaurus

algolia

有两种方案来配置 algolia。

让 Docsearch（准确来说是 Algolia Crawler）每周一次爬取你的网站（也可自行爬取），前提是项目开源，否则收费，好处是无需额外配置，申请比较繁琐（本博客目前采用的方式）
自己运行 DocSearch 爬虫，可以随时爬取，但需要自行去注册账号和搭建爬虫环境，或者使用 Github Actions 来帮我们爬取。

方案1

关于申请 Algolia DocSearch 在文档中有详细介绍，主要是要申请麻烦，需要等待邮箱，并且还需要回复内容给对方进行确认。所以免费托管的 DocSearch 条件是，比较苛刻的，但申请完几乎是一劳永逸，也是我非常推荐的。如果申请成功后就可以在 Crawler Admin Console 中查看

然后将得到 algolia 的 appId，apiKey，indexName 填写到 docusaurus.config.ts 中即可。

docusaurus.config.tsjavascript

algolia: {
  appId: 'GV6YN1ODMO',
  apiKey: '50303937b0e4630bec4a20a14e3b7872',
  indexName: 'kuizuo',
}

爬取完毕后还会定时发送到你邮箱

方案2

Run your own | DocSearch (algolia.com)

因为方案1是真的难申请，极大概率会失败，无奈只能采用方案2。

首先去申请 Algolia 账号，然后在左侧 indices 创建索引，在 API Keys 中获取 Application ID 和 API Key（注意，有两个 API KEY）

填入到 docusaurus.config.ts 中的 API KEY 是 Search-Only API Key

themeConfig: {
    algolia: {
      apiKey: "xxxxxxxxxxx",
      appId: "xxxxxxxxxxx",
      indexName: "kuizuo",
    },
}

系统我选用的是 Linux，在 Docker 的环境下运行爬虫代码。不过要先安装 jq 我这里选择的是 0install 进行安装（安装可能稍慢），具体可以查看文档，然后在控制台查看安装结果

[root@kzserver kuizuo.cn]# jq --version
jq-1.6

接着在任意目录中创建 .env 文件，填入对应的 APPID 和 API KEY（这里是Admin API Key，当时我还一直以为是 Search API Key 坑了我半天 😭）

APPLICATION_ID = YOUR_APP_ID
API_KEY = YOUR_API_KEY

然后创建 docsearch.json 文件到项目目录下，其内容可以参考如下（将高亮部分替换成你的网站）

docsearch.jsonjson

{
  "index_name": "xxxx",
  "start_urls": ["https://example.com"],
  "sitemap_urls": ["https://example.com"],
  "selectors": {
    "lvl0": {
      "selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]",
      "type": "xpath",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "header h1, article h1",
    "lvl2": "article h2",
    "lvl3": "article h3",
    "lvl4": "article h4",
    "lvl5": "article h5, article td:first-child",
    "lvl6": "article h6",
    "text": "article p, article li, article td:last-child"
  },
  "custom_settings": {
    "attributesForFaceting": ["type", "lang", "language", "version", "docusaurus_tag"],
    "attributesToRetrieve": ["hierarchy", "content", "anchor", "url", "url_without_anchor", "type"],
    "attributesToHighlight": ["hierarchy", "content"],
    "attributesToSnippet": ["content:10"],
    "camelCaseAttributes": ["hierarchy", "content"],
    "searchableAttributes": [
      "unordered(hierarchy.lvl0)",
      "unordered(hierarchy.lvl1)",
      "unordered(hierarchy.lvl2)",
      "unordered(hierarchy.lvl3)",
      "unordered(hierarchy.lvl4)",
      "unordered(hierarchy.lvl5)",
      "unordered(hierarchy.lvl6)",
      "content"
    ],
    "distinct": true,
    "attributeForDistinct": "url",
    "customRanking": ["desc(weight.pageRank)", "desc(weight.level)", "asc(weight.position)"],
    "ranking": ["words", "filters", "typo", "attribute", "proximity", "exact", "custom"],
    "highlightPreTag": "<span class='algolia-docsearch-suggestion--highlight'>",
    "highlightPostTag": "</span>",
    "minWordSizefor1Typo": 3,
    "minWordSizefor2Typos": 7,
    "allowTyposOnNumericTokens": false,
    "minProximity": 1,
    "ignorePlurals": true,
    "advancedSyntax": true,
    "attributeCriteriaComputedByMinProximity": true,
    "removeWordsIfNoResults": "allOptional",
    "separatorsToIndex": "_",
    "synonyms": [
      ["js", "javascript"],
      ["ts", "typescript"]
    ]
  }
}

运行 docker 命令

docker run -it --env-file=.env -e "CONFIG=$(cat docsearch.json | jq -r tostring)" algolia/docsearch-scraper

接着等待容器运行，爬取你的网站即可。最终打开 algolia 控制台提示如下页面则表示成功

因为要确保项目成功部署后才触发，如果采用 vercel 部署可以按照如下触发条件。

.github/workflows/docsearch.ymlyaml

name: docsearch

on: deployment

jobs:
  algolia:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Get the content of docsearch.json as config
        id: algolia_config
        run: echo "::set-output name=config::$(cat docsearch.json | jq -r tostring)"

      - name: Run algolia/docsearch-scraper image
        env:
          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
          CONFIG: ${{ steps.algolia_config.outputs.config }}
        run: |
          docker run \
            --env APPLICATION_ID=${ALGOLIA_APP_ID} \
            --env API_KEY=${ALGOLIA_API_KEY} \
            --env "CONFIG=${CONFIG}" \
            algolia/docsearch-scraper

添加 secrets 到你的 Github 仓库中，提交代码便可触发爬虫规则。

orama

配置 algolia 的过程有稍许的复杂，这里你可以在 docusaurus 中集成 orama，这是一个在浏览器、服务器和边缘运行全文、矢量和混合搜索查询服务。最终实现的效果如图所示

本地搜索

如果你嫌 algolia 申请比较麻烦，docusaurus 也提供本地搜索，不过搜索上肯定会比全文搜索来的差一些。

本地搜索插件：docusaurus-search-local

部署

我之前使用 Vercel 一把梭，无需任何配置。这样我就只需要专注输出内容即可。这是我当时使用 Vercel 部署的文章 Vercel 部署个人博客

但如今，vercel.app 被 DNS 污染，即被墙了，导致国内无法访问，虽然使用有自己的域名解析到 Vercel 上也可能访问，但被墙了，也就意味着国内 DNS 的解析速度必然有所下降，导致站点访问速度有所下降。

加上我想有更好的访客体验，于是我决定采用国内国外不同的解析方式来加快访问。

首先在线路类型中，分别针对境内和境外做了不同的记录值，境内使用国内的 CDN 服务，而境外就使用 Vercel。

这样我国内访问就是访问国内的 CDN，访问国外访问就是 Vercel 的 CDN，这样针对不同的地区的网络都能有一个不错的访问速度，可以到 Ping.cn:网站测速-ping 检测中测试测试你的站点访问速度如何。

以下是我的网站测速结果，也可通过访问 kuizuo.cn 在全国各地区网络速度测试情况-Ping.cn 在线查看

果然，花钱了就是不一样。

持续集成

由于 Vercel 能够自动拉取仓库代码，并自行构建部署，因此通常什么配置都不需要。

由于代码提交到代码仓库(github)，则需要借用 CI 服务来帮助我们完成这些任务，这里我使用了 Github Action 来帮助我构建，构建记录可以在 Actions · kuizuo/blog 中查看。以下是我的配置文件

.github/workflows/ci.ymlyaml

name: CI

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ${{ matrix.os }}

    strategy:
      matrix:
        os: [ubuntu-latest] # macos-latest, windows-latest
        node: [18]

    steps:
      - uses: actions/checkout@v4

      - name: Set node version to ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      - run: corepack enable

      - name: Setup
        run: npm i -g @antfu/ni

      - name: Install
        run: nci

      - name: Build
        run: nr build

      - name: SSH Deploy
        uses: easingthemes/ssh-deploy@v4.1.10
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: '-avzr --delete'
          SOURCE: 'build'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: 'root'
          TARGET: '/opt/1panel/apps/openresty/openresty/www/sites/kuizuo.cn/index'

等待 CI 将最终构建的产物通过 rsync 放到自己的服务器上，便完成了整套部署的流程。

当一切都配置好了之后，我只需要将代码推送到远程仓库上，Github Action 与 Vercel 分别完成它们所该做的任务。等待片刻，再次访问站点，刚刚提交的代码就成功生效了。

没有域名和服务器该怎么部署？

当然了上述只是我的配置方案，有许多伙伴可能没有自己的域名或者自己的服务器，就想着白嫖，那么这里目前我只能推荐 Netlify，然后通过 netlify 的二级域名如 kuizuo-blog.netlify.app 来进行访问。

我个人还是非常建议去弄一个属于自己的域名，通过 Vercel 的自定义域名就可以访问。并且由于自己的域名解析的不是大陆的服务器（Vercel 的服务器就不是国内大陆的），因此无需备案这一更繁琐的步骤。

技术栈图标

案例1：skillicons（技术栈图标下载）

具体可在 src/pages/about.mdx 中查看与修改。

这里你可能需要展示你的技术栈，这里我推荐使用 skillicons 来生成技术栈的图标，就如下面这样

https://skillicons.dev/

案例2：https://simpleicons.org/ （动态效果技术栈svg图标）

https://simpleicons.org/

案例3：github面板栏显示

而 github 的状态信息使用GitHub Profile Summary Cards 或 github-stats ，这里我选用 github-stats 因为带有动画，但需要图片需要自行构建。

使用​

目录​

小功能配置​

修改个人特点​

公告​

首页打字机效果​

菜单栏模糊代码​

解决移动端布局侧边栏高度自适应问题​

footer波浪效果​

文章底部显示最近更新时间​

在blog目录下是没用的​

默认日期问题该如何解决​

配置方法​

侧边栏左侧线条​

底部分页导航​

文章目录滚动条/全局滚动条样式设置​

首页技术栈动态图和github效果图​

新增友链 & 导航​

回到顶部小火箭​

集成看板娘和在线聊天​

在线聊天​

首页博客创建时间和标签​

修改首页个人特点3张图片从svg变为为png类型​

当前原作者kuizuo版本为啥构建时会报错呢​

找不到“jest”的类型定义文件​

本docus项目本地运行报错？​

报错现象​

gpt​

1. 检查控制台错误​

2. 清理缓存​

3. 更新依赖​

4. 检查配置文件​

5. 运行在生产模式下​

6. 禁用插件​

7. 查看社区和文档​

8. 提供更多信息​

自己排查​

打开vpn观察下（果真好了）​

如何让docus里默认加粗是红色字体​

使用密码访问某个页面​

需求​

1. 创建密码保护的页面​

2. 使用该组件保护页面​

3. 运行并测试​

4.如何给我的markdown页面使用以上的页面加密功能呢？​

😎

配置文件​

docusaurus.config.ts​

sidebars.js​

相关信息​

基本信息​

关于我 页面​

友链、导航、项目 页面​

社交链接​

其他配置​

样式与页面​

样式和布局​

修改主题色​

主页​

自定义页面​

自定义组件​

主题组件​

swizzle 组件​

插件​

plugin-image-zoom​

plugin-sass​

plugin-pwa​

plugin-content-blog​

搜索​

algolia​

方案1​

方案2​

orama​

本地搜索​

部署​

持续集成​

没有域名和服务器该怎么部署？​

技术栈图标​

案例1：skillicons（技术栈图标下载）​

案例2：https://simpleicons.org/ （动态效果技术栈svg图标）​

使用

目录

小功能配置

修改个人特点

公告

首页打字机效果

菜单栏模糊代码

解决移动端布局侧边栏高度自适应问题

footer波浪效果

文章底部显示最近更新时间

在blog目录下是没用的

默认日期问题该如何解决

配置方法

侧边栏左侧线条

底部分页导航

文章目录滚动条/全局滚动条样式设置

首页技术栈动态图和github效果图

新增友链 & 导航

回到顶部小火箭

集成看板娘和在线聊天

在线聊天

首页博客创建时间和标签

修改首页个人特点3张图片从svg变为为png类型

当前原作者kuizuo版本为啥构建时会报错呢

找不到“jest”的类型定义文件

本docus项目本地运行报错？

报错现象

gpt

1. 检查控制台错误

2. 清理缓存

3. 更新依赖

4. 检查配置文件

5. 运行在生产模式下

6. 禁用插件

7. 查看社区和文档

8. 提供更多信息

自己排查

打开vpn观察下（果真好了）

如何让docus里默认加粗是红色字体

使用密码访问某个页面

需求

1. 创建密码保护的页面

2. 使用该组件保护页面

3. 运行并测试

4.如何给我的markdown页面使用以上的页面加密功能呢？

配置文件

docusaurus.config.ts

sidebars.js

相关信息

基本信息

关于我页面

友链、导航、项目页面

社交链接

其他配置

样式与页面

样式和布局

修改主题色

主页

自定义页面

自定义组件

主题组件

swizzle 组件

插件

plugin-image-zoom

plugin-sass

plugin-pwa

plugin-content-blog

搜索

algolia

方案1

方案2

orama

本地搜索

部署

持续集成

没有域名和服务器该怎么部署？

技术栈图标

案例1：skillicons（技术栈图标下载）

案例2：https://simpleicons.org/ （动态效果技术栈svg图标）

案例3：github面板栏显示