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.效果验证

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

大佬的聊天机器人：

在线聊天

2024年10月10日

已下线次功能，无用。

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年10月19日，已解决。

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

环境

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

效果

测试demo：https://wiki.onedayxyy.cn/

shubiaodianjixiaoguo

配置方法

vim D:\docusaurus\docusaurus.config.ts

    {
      src: 'https://cpython666.github.io/js/clickjs/fireworks.js',  //鼠标爆炸效果
      efer: true,  // 延迟加载
    },
    {
      src: 'https://cpython666.github.io/js/clickjs/anime.min.js',  //鼠标爆炸效果
      efer: true,  // 延迟加载
    },

待处理

如何把以下demo配置到自己的docus呢？？？

https://example.kuizuo.cn/example/click

效果：

shubiaodianjixiaoguo2

首页博客创建时间和标签

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

给导航栏加上紫色

测试成功-2024.11.6

环境

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

效果

https://wiki.onedayxyy.cn/

修改方法

/* 给导航栏加上紫色 */
.navbar {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: hsl(275.82deg 95.95% 49.27% / 36%);
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .102), 0 .2rem .4rem rgba(0, 0, 0, .2);
  transition: backdrop-filter .5s linear, background-color .5s linear, box-shadow .5s linear, opacity .5s linear, -webkit-backdrop-filter .5s linear;
}

使用​

目录​

小功能配置​

修改个人特点​

公告​

首页打字机效果​

菜单栏模糊代码​

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

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页面使用以上的页面加密功能呢？​

给导航栏加上紫色​

使用

目录

小功能配置

修改个人特点

公告

首页打字机效果

菜单栏模糊代码

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

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页面使用以上的页面加密功能呢？

给导航栏加上紫色