Jekyll 模板撰写博客 相关设置

Posted on | In |

博主是javascript盲，想要使用jekyll来进行文档管理和分享。这篇是记录在使用jekyll 建立Github博客的时候出现的问题。（后来博主弃用jekyll改用了hexo）

  1. 正常markdown编译下表格在kramdown编译中的显示问题
  2. 对页面进行布局之后，markdown插入的图片超过了页面布局
  3. markdown在于jekyll一起使用时支持content block横向滚动

表格在kramdown中的显示问题

在本地markdown编译下的表格显示正常，但是在jekyll server本地编译和Github Pages下表格完全没有显示表格线。

解决办法：参考https://www.yfmingo.cn/2017/06/30/Jekyll-kramdown-tableline/

在_include/下添加table.html来部署你的表格格式。（当然，表格格式不是固定的，而且上边连接的格式并不怎么好）。我采用的是如下模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# _include/table.html, 注意下边是所有的内容，一定要加上style。至于为什么，我作为一个javascript白痴我也不知道，这是我试出来的。
# 大概是 border:2px控制线宽； #000000是rgb的颜色控制，采用十六进制。比如#ff0000就是红色

<style>
table{
    border-collapse: collapse;
    border-spacing: 0;
    border:2px solid #000000;
}

th{
    border:2px solid #000000;
}

td{
    border:1px solid #000000;
}
</style>

然后找到你博客的显示页面，我的模板中是/_layouts/post.html。找到博文显示的部分，将上述style添加进去。之后进行编译就可以得到有表格线的表格了。
注意：这个方法在你使用Hexo的时候同样适用。重要的是找到theme/layout/post这个文件

content_template

当然，我的表格加上表格线之后还是有些丑，还存在表格中文字的缩进问题。我对javascript也一无所知，就暂且放在这。

markdown中统一修改插入图片大小的设定

问题描述：博客页面中使用了分栏，也就是博文内容占整个页面70%的空间，但是在markdown中插入的图片却通常要占整个页面的宽度。

解决办法：
_include/下加入image_size.html文件来统一设定图片的大小。

1
2
3
4
5
6
7
# _include/image_size.html

<style>
img{
    width: 100%;
}
</style>

像上述修改表格框线一样，将这个html头文件引用进content中。

markdown在于jekyll一起使用时支持content block横向滚动

参考如何在与Jekyll一起使用pygments时支持滚动

因为我采用的模板中含有css/bootstrap.min.css，因此采用了最简单的方案：
在该文件中添加如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
// -- selector prefixed to the wrapper div for collision prevention

.highlight pre code * {
  white-space: nowrap;    // this sets all children inside to nowrap
}

.highlight pre {
  overflow-x: auto;       // this sets the scrolling in x
}

.highlight pre code {
  white-space: pre;       // forces <code> to respect <pre> formatting
}