Skip to content

(保持最新版 VitePress)基于 VitePress 构建的个人知识库/博客。扩展 VitePress 默认主题:增加ICP备案号、公安备案号显示,增加文章元数据信息(原创标识、作者、发布时间、分类、标签)显示,增加文末版权声明,增加 Gitalk 评论功能,主页美化、自动生成侧边栏、文章内支持 Mermaid 流程图、MD公式、MD脚注、增加我的标签、我的归档等独立页面,以及浏览器滚条等细节优化。查尔斯的个人技术知识库,记录 & 分享个人碎片化、结构化、体系化的技术知识内容。

License

Notifications You must be signed in to change notification settings

iMousse/charles7c.github.io

 
 

Repository files navigation

English | 中文

查尔斯的知识库

📝 查尔斯的个人技术知识库,记录 & 分享个人碎片化、结构化、体系化的技术知识内容。

🐢 GitHub Pages(完整体验) | 🐇 Gitee Pages(无法评论)

开始

# 1.克隆本仓库
git clone https://github.com/Charles7c/charles7c.github.io.git
# 2.安装 PNPM
npm install pnpm -g
# 3.设置淘宝镜像源
pnpm config set registry https://registry.npmmirror.com/
# 4.安装依赖
pnpm install
# 5.dev 运行,访问:http://localhost:5173
pnpm dev
# 6.打包,文件存放位置:docs/.vitepress/dist
# 如果是部署到 GitHub Pages,可以利用 GitHub Actions,在 push 到 GitHub 后自动部署打包
# 详情见:.github/workflows/deploy-pages.yml,根据个人需要删减工作流配置
pnpm build
# 7.部署
# 7.1 push 到 GitHub 仓库,部署到 GitHub Pages:需要在仓库设置中启用 GitHub Pages(本仓库采用此种部署方式)
# 7.2 在其他平台部署, 例如:Gitee Pages、Vercel、Netlify、个人虚拟主机、个人服务器等

已扩展功能(持续优化细节)

  • 拆分配置文件:解决“大”配置文件问题,提取公有配置选项进行复用,方便维护

  • GitHub Actions:push 到 GitHub,自动进行项目打包及 GitHub Pages 部署,并同步到 Gitee Pages(可根据个人需要自行删减同步 Gitee Pages 部分工作流配置)

  • 自动生成侧边栏:将文章按规律性目录存放后,侧边栏将自动生成,支持文章置顶🔝(在文章 frontmatter 中配置 isTop: true,即可在侧边栏自动出现置顶分组)

  • 主页美化:参照 vite 文档主页进行美化

  • 自定义页脚:支持ICP备案号、公安备案号、版权信息配置(符合大陆网站审核要求)

  • 文章元数据信息显示:文章标题下显示是否原创、作者、发布时间、所属分类、标签列表等信息,可全局配置作者及作者主页信息

    • 已扩展文章阅读数信息,默认已启用,可在 docs/.vitepress/config/theme.ts 中 articleMetadataConfig 配置中关闭(开启需要自行提供并配置好 API 服务,API 服务可参考:Charles7c/charles7c-api,目前来看搞起来还有点麻烦,不喜欢折腾的可以直接关闭或更换其他方式提供 API 服务,欢迎提建议)
  • 《我的标签》:模仿语雀标签页风格,另有标签云展示。语雀标签页地址:https://www.yuque.com/r/语雀用户名/tags?tag=

  • 《我的归档》:自定义时间轴,展示历史文章数据。年份前可展示生肖,还可按分类、标签筛选

  • 文章评论:目前仅支持Gitalk

  • 版权声明:文末显示原创或转载文章的版权声明,可自由配置采用的版权协议

  • 徽章:标题后可显示徽章,此功能来自于 VitePress 未合并的 PR,如若后续被合并,则改用官方主题功能(官方已合并于 v1.0.0-alpha.27

  • 本地文档搜索支持:VitePress 官方目前仅提供了对接 algolia 的在线搜索配置,而且对接起来的流程也较为麻烦。所幸寻到一个本地文档搜索插件 emersonbottero/vitepress-plugin-search。目前对接了 vitepress-plugin-pagefind 本地搜索插件,中文搜索相对友好一些,如需体验,可将 docs/vite.config.ts 文件中的注释去除掉。目前 VitePress 官方有一个 PR 正在处理离线搜索功能,再过段时间应该就能合并了,到时候体验一下试试看。

    注意:本地文档搜索和 algolia 搜索无法同时使用,开启本地文档搜索后 algolia 搜索配置将不再生效。

  • Mermaid 流程图:在 Markdown 中绘制流程图、状态图、时序图、甘特图、饼图等,更多语法请参见:Mermaid 官方文档 。(Typora 编辑器也支持 mermaid 语法)

  • Markdown 脚注、Markdown 公式支持

  • 更多细节优化:敬请发现

    • 文章内图片增加圆角样式优化(#56
    • 浏览器滚动条样式优化(支持 Firfox、谷歌系浏览器)(#69
    • 侧边栏分组中的文章列表增加序号显示
    • ......

部分页面截图

主页美化

主页

侧边栏置顶分组(自动生成侧边栏及置顶分组)

侧边栏置顶分组

文章元数据信息

文章元数据信息

我的标签

我的标签 我的标签

我的归档

我的归档 我的归档

文章评论

文章评论 文章评论 文章评论

版权声明

版权声明

Mermaid 流程图

Mermaid流程图 Mermaid流程图

特别鸣谢

License

  • 文章遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和声明
  • 源码遵循 MIT 许可协议
  • Copyright © 2019-2022 Charles7c

About

(保持最新版 VitePress)基于 VitePress 构建的个人知识库/博客。扩展 VitePress 默认主题:增加ICP备案号、公安备案号显示,增加文章元数据信息(原创标识、作者、发布时间、分类、标签)显示,增加文末版权声明,增加 Gitalk 评论功能,主页美化、自动生成侧边栏、文章内支持 Mermaid 流程图、MD公式、MD脚注、增加我的标签、我的归档等独立页面,以及浏览器滚条等细节优化。查尔斯的个人技术知识库,记录 & 分享个人碎片化、结构化、体系化的技术知识内容。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%