One

主题

One2024-12-24
1621
6.5m
Get...

网站待办 ​

待处理 ​

文章摘要目录不能自动收缩/展开 ​

【需求】【迫切】（待解决）

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

  • 环境

bash
$ npx docusaurus --version
3.0.0

$ node --version
v18.18.0

$ npm --version
9.1.2

win10

问题现象：

docusaurus文章摘要目录不能自动收缩：

image-20231112202751280

image-20231112202804831

理想状态：

文章目录具有自动收缩功能：

打开文章默认是全部收缩的，只展开所有的二级目录；

但有一个收缩、展开按钮，可以对文章目录进行手动收缩/展开来浏览文章的一个大体框架。

为什么需要这个功能呢？

因为有的部署文档，篇幅特别长，里面包含好多的2-3级标题，且还会有一些特别的4-6级标题。

此时，我们的文章发布到docus后，如果没有默认收缩功能，此时给用户的第一感觉就很丑。反之，如果有收缩功能，则整个文章页面时很简洁的。

我们来看下如下效果：

如下文章是部署ruyu-blog输出的一篇长文，

它在typora本地的效果如下：

image-20240818121602196

它在docus的效果如下：

是不是很丑哈哈哈……🤣

image-20240818121648383

参考对象

记得hexo文章也是能自动收缩的：

它这个默认是全部收缩的，当文章滑倒某个级别内容后，就会弹出当前下面的内容。

image-20240818122102401

标签云 ​

待解决-2024年12月8日提出。

image-20241207072220735

给知识库里的文档也能不能打标签

这个小卡片功能能移植过来不

image-20240819123633242

监控数据 ​

给docusaurus首页增加一个数据汇总的功能

bash
本站数据汇总：
总共md篇数：x篇
合计访问人数：x次
今日访问人数：x次
当前在线人数：x个

如何把ruyu-blog效果整体移植到docus ​

2024年8月25日提出，待解决。

  • ruyu-blog效果

https://www.kuailemao.xyz/

image-20240825161014720

image-20240825161036598

image-20240825161051701

image-20240825161104222

这个git commit效果能移植过来不 ​

image-20240819123606940

如何让关于我页面更美 ​

2024年8月29日提出

src/pages/about.mdx文件：

image-20240829070814993

image-20240829070858517

如何美化docusaurus ​

（路漫漫……）

问题：

我想进一步美化docusaurus，那么我需要用到那些前端知识点呢？我看好多小伙伴用typescript来魔改docusaurus的，请帮我规划下关于美化docusaurus我所需要具备的技术。

回答：

如果您想要进一步美化Docusaurus，以下是一些前端知识点和技术，您可能需要具备或了解：

  1. HTML和CSS：了解基本的HTML和CSS语法和概念，以及如何使用它们来控制网页的结构和样式。

  2. JavaScript和React：Docusaurus是基于React构建的，因此对JavaScript和React有基本的了解是必要的。您需要了解React组件的创建、状态管理和生命周期方法等概念。

  3. CSS预处理器：使用CSS预处理器（例如Sass、Less或Stylus）可以更高效地编写CSS，并提供更多功能，如变量、嵌套、混合等。掌握其中一个预处理器可以帮助您更好地管理和组织样式代码。

  4. TypeScript：Docusaurus可以使用TypeScript进行开发。使用TypeScript可以提供更好的类型检查和代码提示，并增加代码的可维护性。如果您打算进行魔改，了解和使用TypeScript可能会更加方便。

  5. CSS框架：熟悉一些流行的CSS框架（如Bootstrap、Tailwind CSS、Bulma等）可以帮助您更快速地创建美观的界面，并提供一些常用的样式组件和工具类。

  6. 响应式设计：了解响应式设计的原理和技术，可以帮助您确保Docusaurus网站在不同设备和屏幕尺寸下具有良好的用户体验。

  7. 动画和过渡效果：学习一些基本的动画和过渡效果的实现方法，可以使您的Docusaurus网站更加生动和吸引人。

  8. 版本控制：熟悉使用Git进行版本控制，并了解常见的代码托管平台（如GitHub、GitLab或Bitbucket）的使用方法。

这些是您在美化Docusaurus时可能需要涉及的一些前端知识点和技术。根据您的需求和兴趣，您可以逐步深入学习和应用这些技术。同时，也可以根据具体的美化需求，进一步了解和学习相关的前端技术和工具。

Footer底部如何添加Vercel 标识 ​

同时还在 Footer 中添加了 @vercel/analytics 前提是需要本项目部署于 Vercel 上。

如何添加自己的docus网站到官方站点 ​

2024年8月29日提交。

https://docusaurus.io/zh-CN/showcase

image-20240829073904783

https://github.com/facebook/docusaurus/discussions/7826

image-20240829073951997

image-20240829075032912

image-20240829075054578

image-20240829075109457

==自己提交数据==

bash
以下是我的魔改docusaurus网站投稿，感谢：
网站标题：One's wiki
网站描述：一个超漂亮的个人知识库+博客docusaurus网站，专注无坑的运维文档输出，将会持续更新主题
网站 URL：https://wiki.onedayxyy.cn/
网站源代码 URL：https://gitee.com/onlyonexl/one-docusaurus
标签：[opensource, 设计, 个人]

image-20240829074922997

待官方反馈

但是没后文了。。。

他这个评论为啥是汉化的 ​

2024年9月1日发现。。。

https://spacexcode.com/

image-20240901072759859

我的这里：

image-20240901072819494

这个recallwei主题可以借鉴 ​

（因依赖包无法安装，舍弃）

2024年7月28日舍弃

考虑风格1

https://wiki.brucesong.xyz/

image-20240728085334733

https://github.com/recallwei/wiki

image-20240728085414137

docus官方最新博客样式如何给我的魔改网站使用呢？ ​

2024.9.5提出

  • docus官方最新博客样式

image-20240905212429988

  • 我的魔改网站

image-20240905212509541

最近更新