借助 github pages 搭建博客

这里直接用了 github 上一个非常好看的开源主题 —— HardCandy-Jekyll，主题基于 jekyll 3.8.1 开发

搭建方法非常简单，详情可以查看作者仓库，使用方法和配置方法写的非常详细

这里给出简单的线上部署方式

首先在 github 上开启一个仓库起名为 你的github用户名.github.io 。并 clone 你的仓库到本地。 然后下载 HardCandy-Jekyll 的 源码 到本地之后，将 _config.yml 文件更改为自己的配置（仓库内有详细介绍）。之后，将所有文件拷贝至自己的本地仓库根目录下，再上传至自己的 github 线上仓库，即可通过域名 https://你的github用户名.github.io 访问看到自己的博客页面。

在原博客上的二次开发

Jekyll 文章侧边索引导航

第一种方案

内置 TOC：利用 markdown 编译器的 “toc” 生成目录，这样在文章开头就会更加 header 生成目录树。

效果非常丑陋，只能放在文章头部，无法忍受

第二种方案

采用新增 jekyll 模板的方式来支持自动生成目录。这种方式也可以直接运行在 Github Pages 下。主要的步骤是如下：

1. 将 toc.html 文件放入 _include 目录下

2. 在需要使用 toc 功能的页面模板(md文件)的 content 前面加上 toc: true

3. 将 post.html(通常在 _layouts 内) 处原先的 <div class="contents"> 替换为该文件中的内容 注：不知道为啥，使用 markdown 引用html代码，结果还是被解析了。所以只能用放在别的文件里然后超链接的方式

4. 在 style.css(通常在 assets 内)中添加：

        .container {
        width: 1060px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        }
        .container .contents {
        width: 740px;
        }
        .container .table-of-contents {
        padding: 0px;
        border-left: 2px solid #efefef;
        width: 280px;
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        margin-bottom: 80px;
        height: fit-content;
        margin-left: 40px;
        }
   
        .container .table-of-contents aa {
        font-family: fantasy;
        font-size: 24px;
        color: hsla(38, 100%, 49%, 0.718);
        }
        .container .table-of-contents ul {
        list-style: none;
        padding-left: 0;
        margin-left: 25px;
        list-style-type: revert; 
        font-size: 18px;
        line-height: 24px;
        color: #ff0505;
        }
        .container .table-of-contents ul a {
        color: #15c7fd;
        }
        .container .table-of-contents ul a:hover {
        color: #24fff4;
        text-decoration: underline;
        }
   
        @media screen and (max-width: 1060px) {
        .post-content .container {
            width: 100%;
        }
        .post-content .container .contents {
            width: 100%;
            float: none;
            margin: 0 auto;
        }
        .post-content .container .table-of-contents {
            display: none;
        }
        }
   

   以上采用 sticky 的 position 方案，使得目录内容块随着内容滑动而改变 position。参考自该博客

   里面的参数不做赘述，可以根据你自己的页面布局做适当的调整

   tips:可以通过这个网站将 scss/cass 转为css

网易云插件

具体步骤如下：

1. 在_include目录下创建cloud-music.html，具体代码如下:

        <!-- cloud music -->
        <!-- auto=1 可以控制自动播放与否，当值为 1 即打开网页就自动播放，值为 0 时需要访客手动点击播放 -->
        <!-- 此处不知道为啥设置 1 后打开网页无法自动播放 -->
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
                src="//music.163.com/outchain/player?type=2&id=&auto=1&height=66">
        </iframe>
   

2. 将整个cloud-music.html嵌入post.html，具体位置可以放在文件开头

   嵌入代码可见这里中的内容

3. 在需要添加音乐的md文件开头的配置项添加music-id: *****。 可参考此例子查看如何获取 music-id