用docker使用jekyll
有了docker，就不用很麻烦的配置了，只需要一行
docker run --rm --label=jekyll --volume /c/try_for_docker1:/srv/jekyll -it -p 127.0.0.1:4006:4000 jekyll/jekyll jekyll serve --force_polling --destination /srv/jekyll/blog --source /srv/jekyll/blog_md_dir
也可以用 bash 进去，允许手动进行一些操作
docker run --rm --label=jekyll --volume /c/try_for_docker1:/srv/jekyll -it -p 127.0.0.1:4006:4000 jekyll/jekyll bash
网站结构
jekyll官网写的很简洁明了，用的时候去查
高级功能
Google Analytics
一个用来统计用户点击的分析网站
https://analytics.google.com/
使用很简单，一步一步照着做就行了
LaTeX支持
Katex
katex 在本地成功了，且是预先解析的，非常方便。
但在 GitHub Pages 上没成功。（需要加载2个js才能解析，且不是预先解析，原理是借用 MathJax 的解析，缺点是切换页面时公式还是不正常）
两种方法都在这里记录一下。
第一种方法很简单。
# _config.yml 上加一句
kramdown:
math_engine: katex
# header 上加一句
<link rel="stylesheet" href="/public/katex/katex.min.css">
# 引入CSS在本地，因此还需要去 Katex 的 GitHub 库下载一下，
# 另外需要下载 fonts 文件夹，放到 katex.min.css 同级
在运行 Jekyll 前需要安装解析器 gem install kramdown-math-katex
方法2
由于 Github Pages 不支持 math_engine: katex，因此用一堆 js，在本地搞一套转换
# header 上
<link rel="stylesheet" href="/public/katex/katex.min.css">
<script defer src="/public/katex/katex.min.js"></script>
<script defer src="/public/katex/auto-render.min.js"></script>
<script>
// document.addEventListener("DOMContentLoaded", function() {
// renderMathInElement(document.body, {
// // ...options...
// });
// });
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: true},
// {left: '\\(', right: '\\)', display: false},
// {left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : true
});
});
</script>
缺点是切换页面时，不能解析公式。（很致命）
参考： https://gendignoux.com/blog/2020/05/23/katex.html https://frankindev.com/2017/02/08/using-katex-in-jekyll/
案例： https://github.com/xuningy/xuningy.github.io/blob/master/_includes/head.html
设置： https://katex.org/docs/autorender.html#api
mathJax
在header里加入这么一句就可以使用LaTeX了。
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
},
TeX: {
equationNumbers: {
autoNumber: ["AMS"],
useLabelIds: true
}
},
"HTML-CSS": {
linebreaks: {
automatic: true
},
scale: 85
},
SVG: {
linebreaks: {
automatic: true
}
}
});
</script>
语法很简单，
Line1是import MathJax这个js包，
Line2是配置MathJax
2017-05-07新加：原mathjex包将被关停，改为以下继续使用：
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
文档见于官网
这时出现一个新问题
问题描述：
点击侧边栏上的按钮，打开一个页面时，LaTeX不能正常渲染。
问题分析：
点击侧边栏时，没有回调MathJax。
问题解决：
在base.js中的函数contentEffects()中插入这么一行代码：
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
效果 \(y=\oint_l \dfrac{\alpha}{1+e^{-z}}dz\)
加入404公益
在404.html页内插入这个
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://www.guofei.site" homePageName="回到郭飞的博客"></script>
echarts支持
首页引用echarts即可，直接支持异步调用等
echarts图的代码放在markdown结尾时，chrome无法解析
360，Edge，chrome本地都能解析，未找到原因。
只要结尾写几个字就一切正常了，因此几乎不影响使用。
一些实用图标
http://www.fontawesome.com.cn/faicons/
<i class="fa fa-tags fa-lg"></i>
<i class="fa fa-archive fa-lg"></i>
<i class="fa fa-user fa-lg"></i>
效果：
一些js代码
site.categories
使用方法介绍
{ % for category in site.categories % }
插入音乐
<iframe frameborder="20" border="20" marginwidth="10" marginheight="0" width="298" height="80" src="/public/assets/追梦人.mp3"></iframe>
打赏模块
见于 https://github.com/guofei9987/donate
颜色美化
code颜色示例
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
'string'
data = np.random.uniform(low=-5, high=5, size=(100, 2))
data=pd.DataFrame(data)
mask = (data.iloc[:, 0] + 0.5* data.iloc[:, 1])<0
data['y']=mask*1
obj.attribute
data1 = data[data.iloc[:, 2] == 1] #为了画图，两类不同颜色
data2 = data[data.iloc[:, 2] == 0]
plt.plot(data1.iloc[:, 0], data1.iloc[:, 1], '.')
plt.plot(data2.iloc[:, 0], data2.iloc[:, 1], '.')
plt.show()
jekyll代码示例
之前的首页，展示近期文章-机器学习-智能算法这几个项目
<!--<font color="#601986">进</font><font color="#556fb5">一</font><font color="#fa1089">寸</font><font color="#638c0b">有</font><font color="#e00089">一</font><font color="#0a1089">寸</font><font color="#f0c089">的</font><font color="#00c380">欢</font><font color="#cc1089">喜</font>--></h3></center>
<!--之前的首页，展示近期文章-机器学习-智能算法，有点丑，换成模版中的archive.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading"></div>
</div>
</div>
</div>
-->
一些模版语言
site.posts 指的是 _posts 下的文件，与 layout 无关
解析到www
github 端用www.guofei.site
阿里云解析时 用cname 和 @ 和 guofei9987.github.io
一些有用的图标
timeline那一部分专用
<(▰˘◡˘▰)>
