本文记录在用 Jekyll 搭建博客时遇到的一些问题,因为问题比较杂,尚没有太多时间整理,如有疑问欢迎留言。

本地 Run jekyll

jekyll serve -w --host=0.0.0.0

排序需要接续标号

{:start="3"}

TOC 操作

  1. _includes/toc.html 加上:
<nav>
  <h2>Table of Contents</h2>
  * this unordered seed list will be replaced by toc as unordered list
  {:toc}
</nav>
  1. 在想要加 TOC 的博文中加入:

  {${ \% \text{ include toc.html } \% }$}

  1. _config.yml 需要加入:
kramdown:
  parse_block_html: true

jekyll-paginate 依赖问题

  当在根目录下运行 jekyll s 时会报如下依赖错误的话:

Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed.

  直接把 gem 那个设置去掉就行。

公式显示问题

  在页面上显示数学公式,这里要在 head.html 中加入如下代码:

<!--MathJax的配置脚本,用于临时简单的配置 -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    <!--输入Latex公式,以HTMLCSS的形式显示输出 -->
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      <!--$表示行内元素,$$表示块状元素 -->
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<!--加载MathJax的最新文件, async表示异步加载进来 -->
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>

  测试公式:内联公式 –> $x^2=y$

  换行居中公式:

  公式中如果有竖线的话可以用 $\vert$

  两个花括号连在一起时报错:

The page build failed for the `master` branch with the following error:

The variable `{ {|D^v|}` on line 79

  { {中间加一个空格即可。如果出现花括号打不出来,那么可以用 \\{

  以如下形式显示公式在刷新页面时公式显示更加快速:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      <!--输入Latex公式,以HTMLCSS的形式显示输出 -->
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        <!--$表示行内元素,$$表示块状元素 -->
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true
      },
      "HTML-CSS": { availableFonts: ["TeX"] }
    });
</script>
  
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

  这种方法值得注意的是 $ 方式出现两个下划线会以斜体出现,主要解决方案是尽量使得所有下划线都跟裸字母连着,不要连着圆/花括号或者空格。

图片显示问题

  将所有的 post 图片放到根目录下新建的 media 文件夹中,然后在引入图片的时候要用![](\media\name_of_pic.jpg) 这样来引入,不能有名字,要有 \media 开头。

  如果想要图片对齐,以及对图片大小做操作可以用如下的方式:

<p align="center">
  <img width="" height="" src="/img/media/15602214330109.jpg">
</p>

  如果要加上 caption:

<p align="center">
<img src="/img/media/15547073032659.jpg" width="">
</p>
<p style="margin-top:-2.5%" align="center">
    <em style="color:#808080;font-style:normal;font-size:80%;">卷积计算过程</em>
</p>

如何在 Github Pages 中加入 category 和 tags 功能

  在阅读了这篇博客后简单试了下。

折叠一部分内容

<details><summary markdown="span">Click to show the Code</summary>
something to show with click
</details>
Click to show the Code
public init(title: String, level: MarkdownHeaderLevel = .h1, style: MarkdownHeaderStyle = .atx,
                close: Bool = false)

算法伪代码的形式

  虽然麻烦点,但是能实现,每一行都用 $$

**输入**: 
* 训练集$D=\{(x_1,y_1),(x_2,y_2),... ,(x_n,y_n)\}$
* 属性集$A=\{a_1,a_2,...,a_n\}\\$

**过程**: 函数$TreeGenerate(D,A)$
**输出**: 以$node$为节点的一颗决策树

$1: 生成节点 node;$
$2: if$ $ D $ $ 中样本全属于同一类别$ $ C$ $ then$
$3: \quad将$ $ node $ $标 记为$ $ C$ $ 类叶节点;$ $ return$
$4: end$ $ if$
$5: if$ $ A=\emptyset $ $ OR$ $ D$ $ 中样本在A上取值相同$ $ then $
$6: \quad 将node标记为叶节点,其类别标记为D中样本数最多的类;then$
$7: end$ $if$
$8:从A中选择最优划分属性$
$9: for $ $ a_* $ $的每一个值$ $ a_{*}^{v}$ $ do$
$10:\quad 为node生成一个分支;令D_v表示D中在a_*上取值为a_{*}^{v} 的样本子集: $
$11:\quad if $ $D_v$ $为空$ $then$
$12: \quad\quad将分支节点标记为叶节点,其类别标记为D中样本最多的类;return$
$13: \quad else$
$14: \quad\quad以TreeGenerate(D_v,A$  $\{a_*\})为分支节点$
$15: \quad end$ $if$
$16: end$ $for$

输入:

  • 训练集$D={(x_1,y_1),(x_2,y_2),… ,(x_n,y_n)}$
  • 属性集$A={a_1,a_2,…,a_n}\$

过程: 函数$TreeGenerate(D,A)$ 输出: 以$node$为节点的一颗决策树

$1: 生成节点 node;$

$2: if$ $ D $ $ 中样本全属于同一类别$ $ C$ $ then$

$3: \quad将$ $ node $ $标 记为$ $ C$ $ 类叶节点;$ $ return$

$4: end$ $ if$

$5: if$ $ A=\emptyset $ $ OR$ $ D$ $ 中样本在A上取值相同$ $ then $

$6: \quad 将node标记为叶节点,其类别标记为D中样本数最多的类;then$

$7: end$ $if$

$8:从A中选择最优划分属性$

$9: for $ $ a_* $ $的每一个值$ $ a_{*}^{v}$ $ do$

$10:\quad 为node生成一个分支;令 D_v 表示 D 中在 a_* 上取值为 a_{*}^{v} 的样本子集: $

$11:\quad if $ $D_v$ $为空$ $then$

$12: \quad\quad将分支节点标记为叶节点,其类别标记为D中样本最多的类;return$

$13: \quad else$

$14: \quad\quad以TreeGenerate(D_v,A$ ${a_*})为分支节点$

$15: \quad end$ $if$

$16: end$ $for$

修改博文宽度

  beautiful-jekyll 主题 中可以在 bootstrap.min.css 文件中修改 col-lg-9 宽度,改 col-lg-offset-1 即左侧空白距离,关联是在 layout 中的 post 配置。

  博文排版的目的是为了方便阅读,如果中间有隔开的部分(公式)就不需要顶头空两格,尤其是在一行很短的情况下。

表格居中

<div align="center">
<div class="datatable-begin"></div>

Food    | Description                           
------- | -----------
Apples  | A small, somewhat round ...           
Bananas | A long and curved, often-yellow ...   
Kiwis   | A small, hairy-skinned sweet ...     
Oranges | A spherical, orange-colored sweet ... 

<div class="datatable-end"></div>
</div>
Food Description
Apples A small, somewhat round …
Bananas A long and curved, often-yellow …
Kiwis A small, hairy-skinned sweet …
Oranges A spherical, orange-colored sweet …

如果您觉得有用,可以考虑请我喝杯咖啡。☕️

WeChat AliPay

Jekyll Themes

  1. Simple Texture
  2. Lanyon Plus
  3. cayman
  4. minima
  5. julia
  6. Adding a Google Custom Search Engine to your beautiful-jekyll site
  7. Ruby China
  8. jekyll博客下添加打赏功能
  9. Table of contents using Jekyll and Kramdown
  10. 为Jekyll博客添加小功能