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备案号、公安备案号、版权信息配置(符合大陆网站审核要求)
- 文章元数据信息显示:文章标题下显示作者、发布时间、所属分类、标签列表等信息,可全局配置作者及作者主页信息
- 《我的标签》:模仿语雀标签页风格,另有标签云展示。语雀标签页地址:https://www.yuque.com/r/语雀用户名/tags?tag=
- 《我的归档》:自定义时间轴,展示历史文章数据。年份前可展示生肖,还可按分类、标签筛选
- 文章评论:目前仅支持Gitalk
- 版权声明:文末显示文章版权声明,可自由配置采用的版权协议
- 徽章:标题后可显示徽章,此功能来自于 VitePress 未合并的 PR,如若后续被合并,则改用官方主题功能
- Mermaid 流程图:在 Markdown 中绘制流程图、状态图、时序图、甘特图、饼图等,更多语法请参见:Mermaid 官方文档 。(Typora 编辑器也支持
mermaid
语法) - 更多细节优化:敬请发现
- vuejs/vitepress (本知识库基于 VitePress 构建)
- vitejs/vite (参考主页美化)
- windicss/docs (参考配置文件拆分)
- brc-dd/vitepress-blog-demo (感谢 VitePress 维护者 brc-dd 的热心帮助)
- brc-dd/vitepress-with-arco
- clark-cui/vitepress-blog-zaun (参考文章标签的数据处理方案)
- dingqianwen/my-blog (参考 Gitalk 配置暗黑主题)
- Dedicatus546/Dedicatus546.github.io (参考 Gitalk 跨域调用 API 失效的解决方案)
- xiaoxian521/pure-admin-utils-docs (参考词云组件的使用)
- arco-design/arco-design-vue (使用部分组件及图标)
- antvis/G2plot (使用部分图表)
- richardo2016/vitepress-pr (使用徽章)
- emersonbottero/vitepress-plugin-mermaid (VitePress Mermaid 流程图插件)
- mermaid-js/mermaid
- ......
- 文章遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和声明
- 源码遵循 MIT 许可协议
- Copyright © 2019-2022 Charles7c