快捷搜索: 长连接 前端 源码 pan

Docsify+github/gitee搭建个人博客

关于博客

博客作为个人平时知识总结的空间,不仅帮助我们记录学到的知识内容,也能创造一个自己所用的平台,让更多人认识你,在以后的面试中有一张底牌!

从别人的博客上看到过这样一个小故事: up再一次面试时,HR问他:“作为软件从业者,平时有在上写博客的习惯吗?” 然后没等up说出下一句“我在简书上写文章…”,HR微微一笑要清场了我想这位up的清扬洗发水买成了清场…

个人博客工具选型

在建博客之前我们要了解一下博客的分类。

博客在广义上其实可以分为两类,源码搭建博客和静态配置博客。

前者我们需要自己开发,或者从网上找一个开源的博客项目,之后购买一台服务器,搭建自己的博客项目。

而后者,则是使用一些前端工具,将你的文章生成一个个人博客。

而我用的好像是两者的结合...没有那么强大到自己手撕一个博客,我们需要一个搭建工具...

搭建静态博客工具我们改怎么选择呢? Hexo Sphinx Docsify Jekyll … … hexo、sphinx、Docsify在使用时需要依赖Nodejs,而Jekyll则依赖Ruby,作为爱国青年(其实是懒得接触),Ruby我是肯定不会考虑的,难么剩下的三种工具该如何选择呢?Hexo和Sphinx有一个问题,我们每次部署前需要将写好的markdown编译成html后再进行发布,而Docsify无需编译,只要自己简单创建简单的路由,即可支持markdown直接发布网站,那么该怎么选择,你懂了吧…

Docsify安装

刚才说到Docsify需要依赖Nodejs,那么我们的电脑首先需要安装它。这个网上教程就太多了,进入nodejs中文官网下载:

接下来我们就可以通过Nodejs下的npm命令安装Docsify了

输入npm i docsify-cli -g
C:>npm i docsify-cli -g
C:Users
pmdocsify -> C:Users
pm
ode_modulesdocsify-cliindocsify
 
> docsify@4.11.6 postinstall C:UsersyhuAppDataRoaming
pm
ode_modulesdocsify-cli
ode_modulesdocsify
> opencollective-postinstall
 
Thank you for using docsify!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/docsify/donate
 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modulesdocsify-cli
ode_moduleschokidar
ode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ docsify-cli@4.4.1
added 204 packages from 90 contributors in 16.035s
输入docsify -v
>docsify -v

docsify-cli version:
  4.4.1

初始化博客项目

  1. 在博客目录下执行初始化操作 首先在你的d盘创建一个文件夹比如"myBlog" 然后在cmd窗口通过cd命令进入myBlog文件夹 输入docsify init . 然后输入y 进行确认,此时我们就创建好了初始目录
  2. 下来我们启动本地服务,查看下效果: 输入本地启动命令docsify serve . Serving D:myBlog now. Listening at http://localhost:3000 在浏览器中访问 初始页面 如果显示如上表示我们初始化博客的工作已经完成,下面的工作就该丰满它了。

主题配置

个人整理了(好吧别人整理好的,但是我们老师说过现有 拿来用就好了...)8种docsify的主题样式,大家可以一 一替换查看效果:

<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/dolphin.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">

window.$docsify总结

这里为大家整理好了页面有关的配置,修改内容后,即可使用。 (也是别人的啦)

<script>
    window.$docsify = {
          
   
        // 侧边栏支持,默认加载的是项目根目录下的_sidebar.md文件
        loadSidebar: true,
        // 导航栏支持,默认加载的是项目根目录下的_navbar.md文件
        loadNavbar: true,
        // 最大支持渲染的标题层级
        maxLevel: 4,
        // 自定义侧边栏后默认不会再生成目录,设置生成目录的最大层级,建议配置为1或者2
        subMaxLevel: 4,
        // 外链表达式
        externalLinkTarget: _blank,

        // auto2top: true,
        search: {
          
   
            maxAge: 86400000,
            paths: auto,
            placeholder: {
          
   
                /: 搜索
            },
            noData: {
          
   
                /: 找不到结果
            },
            depth: 4,
        },
        flexible-alerts: {
          
   
            style: flat
        },
        formatUpdated: {YYYY}/{MM}/{DD} {HH}:{mm}:{ss},
        // autoHeader: true,
        // relativePath: true,
        coverpage: true,
        homepage: README.md,
        disqus: shortname,
        alias: {
          
   
            /.*/_navbar.md: /_navbar.md,
            /.*/_sidebar.md: /_sidebar.md,
        },
        logo: images/logo.png,
        name: 标题名字,
        repo: 仓库地址,
        
    }
</script>

这里简单说明下几个关键内容:

    coverpage: true homepage: ‘README.md’ 展示封面内容 repo: ‘你的github仓库地址’ 即可在封面右上角 添加一个git图标挺好看的 loadNavbar: true, 看标签名字就知道,如果要设置顶部标签,就启用 loadSidebar: true, 侧边连是否要显示

Docsify插件总结

自己百度吧...很多好玩的但是有一些网络接口特别慢,慢慢找

侧边栏路由设置

这里重点说下_sidebar.md,这是Docsify中唯一比较麻烦的点。

如果你是一篇文章涵盖古今中外一口气写到底,比如docsify官网那样的,那么_sidebar.md对你无用,Docsify会根据你文章的标题,自动显示侧边栏目录。

但如果你是编程B,同时学习Java、Python、C++等等,每个编程语言下又区分了很多的知识点,那么_sidebar.md是必须的。

_sidebar.md总体有两种模式:

    通篇只使用根目录下这一个_sidebar.md,拿我的目录来说,因为文章和目录太多了,所以我使用一个统一路由完成所有目录及文章的跳转,如下面的例子: 这里要注意几点: 针对目录的跳转,在尾部需要添加一个/ 每个目录下需要存在一个README.md文件,否则跳转到这个目录会显示404 路径的地址需要严格按照路径设置,但是可以重新改名下。 另外一种比较细致的方式是, 主节点使用一个_sidebar.md进行目录的跳转,在目录目录下单独设置_sidebar.md ,这种二级路由的方式,会比较直观,但存在一个问题,跳转到子_sidebar.md后,就没有返回主目录的入口了…此时我们可以通过顶部设置_navbar.md提供用户跳转到其他目录的操作。

最终效果展示

我们整理好上面的内容,并且把自己之前写好的markdown文件放到自己创建的markdown文件夹下,博客基本就已经搭建完成了。

最后部署到云服务器/码云Pages

参考我的note: 这个是托管在Github上的 这个是布置在百度智能云BCC上的:

经验分享 程序员 微信小程序 职场和发展