跳到主要内容

1、介绍

全网最美docusaurus网站​

（云笔记+知识库+博客 三合一）

image-20240825114351301

目录​

[toc]

版权​

本着开源共享、共同学习的精神：

本文是在 博主愧怍 文章：魔改docusaurus仓库https://github.com/kuizuo/blog 基础上修改为自己仓库的一些实践，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

原作者博客地址：

https://kuizuo.cn/

https://github.com/kuizuo/blog

image-20240811145652133

image-20240811150530880

鸣谢​

备注

这里万分感谢以下大佬们开源的代码，才能有如今这个丝滑的docusaurus主题供大家学习交流。🎉🎉🎉

  • 愧怍 开源的源码；
  • shaking 魔改愧怍原作者并开源的源码；
  • hyde 修复愧怍部分bug并提供菜单栏模糊背景功能；
  • 月桂树在嘉陵江喝咖啡qq昵称；

特性​

在这里我会分享各类技术栈所遇到问题与解决方案，带你了解最新的技术栈以及实际开发中如何应用，并希望我的开发经历对你有所启发。

如果你想要搭建一个类似的站点，可直接 Fork 本仓库使用，或者通过 StackBlitz 在线运行本项目，通过 Vercel 一键部署。

  • 🦖 Docusaurus - 基于 Docusaurus，提供强大的文档生成和博客功能

  • ✍️ Markdown - 写作方便，Markdown

  • 🎨 Beautiful - 整洁，美观，阅读体验优先

  • 🖥️ PWA - 支持 PWA，可安装，离线可用

  • 🌐 i18n - 支持国际化

  • 💯 SEO - 搜索引擎优化，易于收录

  • 📊 谷歌分析 - 支持 Google Analytics

  • 🔎 全文搜索 - 支持 Algolia DocSearch

  • 🚀 持续集成 - 支持 CI/CD，自动部署更新内容

  • 🏞️ 首页视图 - 显示最新博客文章、项目展示，个人特点，技术栈等

  • 🗃️ 博文视图 - 不同的博文视图，列表、宫格

  • 🌈 资源导航 - 收集并分享有用、有意思的资源

  • 📦 项目展示 - 展示你的项目，可用作于作品集

  • 基于kuizuo实现的新功能：

    提供菜单栏模糊背景功能；
    新增首页打字机效果；
    新增footer波浪效果；
    新增文章底部显示最近更新时间；
    新增侧边栏竖线效果；
    增加文章底部分割行效果及hover效果；
    设置文章目录滚动条/全局滚动条样式为彩色；
    增加首页技能动态旋转图 & 增加友链与导航页；
    新增回到顶部小火箭功能；
    首页博客卡片上具有创建时间/tag分类；

我的主题魔改实现：Docusaurus 主题魔改

技术栈​

image-20240620123704361

image-20240620123009775

demo及仓库地址​

我的demo：（持续更新）

https://wiki.onedayxyy.cn/

image-20240822225419115

  • 仓库地址
备注

这个仓库是基于 愧怍 ，然后逐步优化的一个开源主题，供大家学习交流。

https://gitee.com/onlyonexl/one-docusaurus

image-20240823122705480

部署​

git clone https://gitee.com/onlyonexl/one-docusaurus
cd one-docusaurus


#安装好pnpm
npm install -g pnpm@9.4.0
pnpm install
pnpm start
  • 构建：
pnpm build

目录结构​

├── blog                           # 博客
│   ├── first-blog.md
├── docs                           # 文档/笔记
│   └── doc.md
├── data
│   ├── feature.tsx                # 特点
│   ├── friends.tsx                # 友链
│   ├── projects.tsx               # 项目
│   ├── skills.tsx                 # 技术栈
│   ├── resources.tsx              # 资源
│   └── social.ts                  # 社交链接
├── i18n                           # 国际化
├── src
│   ├── components                 # 组件
│   ├── css                        # 自定义CSS
│   ├── pages                      # 自定义页面
│   ├── plugin                     # 自定义插件
│   └── theme                      # 自定义主题组件
├── static                         # 静态资源文件
│   └── img                        # 静态图片
├── docusaurus.config.ts           # 站点的配置信息
├── sidebars.ts                    # 文档的侧边栏
├── package.json
├── tsconfig.json
└── pnpm-lock.yaml

更新日志​

2024.10.20-release1.6.0​

【one-docusaurus更新】 1、更新时间：2024年10月20日 2、更新内容：增加鼠标点击效果 3、当前版本：release-1.6.0 4、demo地址：https://wiki.onedayxyy.cn/ 5、更新log：https://wiki.onedayxyy.cn/docs/One-Docusuaus

shubiaodianjixiaoguo

2024.9.1​

修改docus文章字体加粗后默认颜色为红色

2024.8.31​

增加在线聊天机器人

2024.8.30​

增加docs评论功能

2024.8.29​

增加博客评论功能

2024.8.28​

修改侧边目录竖线颜色
修改首页个人特点3个图片格式由svg变成png

2024.8.27-release1.1.0​

新增回到顶部小火箭功能
修改首页各模块小图标
修改博客卡片高度不一致bug & 新增博客卡片创建时间显示/tag显示功能

2024.8.26​

增加首页技能动态旋转图 & 增加友链与导航页

2024.8.25-release1.0.0​

《one-docusaurus》 release1.0.0发布-2024-08-25 1、仓库地址：https://gitee.com/onlyonexl/one-docusaurus 2、更新内容：基于kuizuo源码，发布自己第一版release1.0.0 3、具体更新log：https://gitee.com/onlyonexl/one-docusaurus/commit/610a4d2701023daf0e541c17a303c7eb30927c4f 4、demo地址：https://wiki.onedayxyy.cn 5、测试环境：（docusaurus 3.4.0, pnpm 9.4.0, node v20.12.1）

标签：
最后由 One 于 更新
0%