之前添加各种功能的时候零散地写了几篇东西，似乎很没有条理的样子。以后博客建设的相关内容都会集中在这里，也许会持续更新( ᐛ )

$\LaTeX$ 支持

首先要解决的就是 Jekyll 博客原生不支持 LaTeX 的问题，过程如下：

首先需要禁用 Kramdown 的数学引擎，做法为在 _config.yml 中添加以下代码

kramdown:
    math_engine: null

添加 MathJax 支持，做法为在 \_includes\head.html 中添加以下代码：

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
      inlineMath: [['$','$']]
    }
  });
</script>

现在我们可以愉快地书写数学公式啦！

例
- $\LaTeX$ 代码
```
  $$H(e^{j\omega})=\int_{-\infty}^\infty x(t)e^{-j\omega t}{\rm d}x$$
```
- 输出
$$ H(e^{j\omega})=\int_{-\infty}^\infty h(t)e^{-j\omega t}{\rm d}t $$

添加图片的方法

根据 Jekyll 官方文档，添加图片应使用如下代码：

![有帮助的截图](http://localhost:4000/assets/images/RailwayMap.jpg)

然而经过实测，这种方法虽然可以在本地使用 jekyll s 命令预览时显示图片，部署到 GitHub 后却无法显示。对 GitHub Page 进行检查后发现，该图片元素的连接仍然为 localhost:4000/assets/images/RailwayMap.png。

经查证与实践，官方文档中给出的代码中的 http://localhost:4000 并无必要，直接使用后面的相对路径即可：

![有帮助的截图](/assets/images/RailwayMap.png)

渲染效果：有帮助的截图

博客分页

所有博客都显示在同一页难免显得冗长，因此我们需要分页功能。

根据官方文档：

我们首先需要安装 jekyll-paginate 插件。在根目录下执行以下命令：
```
  gem install jekyll-paginate
  bundle
```
在根目录中的 Gemfile 中添加：
```
  gem "jekyll-paginate"
```
在 _config.yml 中添加以下代码，开启分页功能并设置每页存储10篇博客
```
  paginate: 10
  paginate_path: "page:num"
```

官方文档的教程到此为止。然而这样并不能够在我的模板中运行。我在这篇博客中找到了解决方法。所需的额外步骤如下：

文章的分页显示都需要在html文档中进行，所以需要将index.md修改为index.html

为index.html添加分页支持：

  ---
  layout: home
  paginate: true
  ---

现在博客就具有翻页的功能啦：（目前文章较少，一页都能放下）

博客归档

基本功能

为博客添加归档可以清晰分辨出文章的类别。我参考了这篇博客中的教程。

修改 _config.yml 文件，添加以下一行代码：
```
  permalink: /:categories/:title/
```

创建 categories.html 文件：在根目录下创建categories.html文件，并写入以下内容：

  ---
  layout: page
  permalink: /categories/
  title: 博客分类
  ---

  <!--添加搜索框-->
  <br/>
  <!-- HTML elements for search -->
  <input type="text" id="search-input" placeholder="搜索博客 - 输入标题/相关内容/日期/Tags.." style="width:380px;"/>
  <ul id="results-container"></ul>

  <!-- script pointing to jekyll-search.js -->
  <script src="\{\{ site.baseurl \}\}/js/simple-jekyll-search.min.js"></script>

  <script>
  SimpleJekyllSearch({
      searchInput: document.getElementById('search-input'),
      resultsContainer: document.getElementById('results-container'),
      json: '/search.json',
      searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
      noResultsText: '没有搜索到文章',
      limit: 20,
      fuzzy: false
  })
  </script>
  <br/>


  <div id="archives">
  {\%\for category in site.categories \%\}
  <div class="archive-group">
      {\%\capture category_name \%\}\{\{ category | first \}\}{\%\endcapture \%\}
      <div id="#\{\{ category_name | slugize \}\}"></div>
      <p></p>

      <h3 class="category-head">\{\{ category_name \}\} (\{\{site.categories[category_name].size()\}\})</h3>
      <a name="\{\{ category_name | slugize \}\}"></a>
      {\%\for post in site.categories[category_name] \%\}
      <article class="archive-item">
      <h4><a href="\{\{ site.baseurl \}\}\{\{ post.url \}\}">\{\{ post.title \}\}</a></h4>
      </article>
      {\%\endfor \%\}
  </div>
  {\%\endfor \%\}
  </div>

搜索功能的代码暂时缺失，想起来的时候再加上吧 :P

为每篇文章的 md 文件都添加一个categories属性，以这篇文章为例：
```
  ---
  layout: post
  title: "博客搭建相关总集"
  categories: Jekyll
  ---
```
至此，归档页面就搭建成功啦！

然而到这里我们却还不能在每篇文章中看出它的归档，我想让每篇文章都能直接显示出它的归档。在/_layouts/post.html的 <\header>标签之前添加以下代码：

  {\%\if page.categories.size > 0 \%\}
          <div class="blog-tags">
          Category：
          {\%\if post \%\}
              {\%\assign categories = post.categories \%\}
          {\%\else \%\}
              {\%\assign categories = page.categories \%\}
          {\%\endif \%\}
          {\%\for category in categories \%\}
              <a href="\{\{site.baseurl\}\}/categories/#\{\{category|slugize\}\}">\{\{category\}\}</a>
              {\%\unless forloop.last \%\}&nbsp;{\%\endunless \%\}
              {\%\endfor \%\}
          </div>
      {\%\endif \%\}

大功告成啦：

文章显示归档

展开面板

原本的归档形式最终会随着文章的增加变回一长条，所以我将归档页面categories.html和菜鸟教程中的折叠插件结合了一下，做成了展开面板的形式。现在可以在归档页面看到啦！

文章目录

参考这篇博客给文章加了目录。

原文给出了三种方法，我采用了给 Jekyll 新增模板的方法，因为~~我太菜了不会其他两种~~这种方法简单高效且为 Github Pages 所原生支持。

在 /_includes 中新增文件 toc.html
在 _layouts 中需要目录的地方加上一行代码 \{\% include toc.html html=content \%\}（记得删掉转义字符即可）

其实我想把目录做成放在页面侧边的 sticky 样式，但是我的前端水平和我本站贫瘠的内容不允许我多折腾，于是就此作罢，放在顶部也挺好的对吧 :)