使用Docsify快速搭建个人博客

什么是docsify

除了自己手写一个博客网站,通常快速搭建个人博客有三种方式:

从以上三者的使用经验来看,docsify最大的优点就是“快速”,你的markdown笔记内容无需任何修改,直接被加载到客户端,并由docsify自身的js将这些markdown文件渲染成网页。

最关键的是: 它非常适合与GitHub Pages集成

通过GitHub Pages,无需云服务器和个人域名,在30分钟内就能搭建一个公网上的博客。

下面通过GitHub举例,国内用户可以使用Gitee Pages,操作类似。

如何搭建

npm i docsify-cli -g 

注意:你需要先安装node

docsify init ./docs 

初始化完成后,目录下会出现docs文件夹,里面包含几个文件:

  • index.html 项目入口
  • README.md 会渲染成项目首页
  • .nojekyll docsify的文件多为下划线开头,这个文件可以使GitHub Pages 忽略掉这些下划线开头的文件

当然,你也可以创建一个index.html文件,其中引用相关js文件并进行window.$docsify的配置即可

docsify serve ./docs 

功能介绍

通过设置index.html中window.$docsify的 coverpage 参数,可以为你的网站增加封面

<script> window.$docsify = { coverpage: true } </script> 

通过设置index.html中的window.$docsify可以开启多页面侧边栏,你可以理解为“左侧菜单”

<script> window.$docsify = { loadSidebar: true } </script> 

docsify会寻找_sidebar.md文件,来渲染多个页面侧边栏,它还支持设定标题的展示级别,具体使用可参考官方文档

使用方式:

将docsify-sidebar-generator.jar放到你的docsify根目录下

然后输入以下命令: java -jar docsify-sidebar-generator.jar

官方提供了五种主题,切换index.html中的css文件即可改变网站的主题风格

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css"> 

index.html中引用全文搜索的js文件,并配置window.$docsify

<script> window.$docsify = { search: 'auto' } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> 

配置完成后,网站左上角会出现一个搜索框,docsify会帮你在localstorage中建立索引

集成GitHub Pages

现在,你就有了个人的在线博客了

你可以专注于文档书写,然后刷新_sidebar.md并推送到GitHub即可

附一个window下将你的本地仓库自动同步GitHub的bat脚本

@echo off echo 1. 开始拉取 git pull echo 2. 生成侧边栏 java -jar .\docsify-sidebar.jar echo 3. 添加文件 git add * echo 4. 提交 git commit -m 'sync' echo 5. 推送 git push 

原文链接:https://blog.csdn.net/kansting/article/details/123655665?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816781818779766%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816781818779766&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-123655665-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/8006

(0)
上一篇 2022年8月19日
下一篇 2022年8月19日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml