文章分类和展示逻辑
现在的网站有些耦合性，记录如下：
- 首页，按时间展示所有的 site.posts，但如果
post.visible == 'n'则不显示 - 404、精品博客，都继承
catalogue.md，按site.tags归类展示。区别在于 404 没有搜索框，并且有一段404的标题 - 搜索功能，展示 site.tags
- 侧边栏 navside：category是前端或者趣文的，放到橱窗专门的集合中
- 橱窗的集合，不单独展示，而是放到“语言”目录的末尾
- 前端
- 趣文
- 刷题
- Matlab
- TensorFlow
用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官网写的很简洁明了，用的时候去查
高级功能
GitHub Metadata
一个能读取自己GitHub情况的插件：https://jekyll.github.io/github-metadata/
参考学习：https://github.com/ityouknow/ityouknow.github.io
【% assign sorted_repos = (site.github.public_repositories | sort: 'stargazers_count') | reverse | where: "fork", "false" %】
【% for repo in sorted_repos | limit: 8 %】
* 【【 repo.name 】】
【% endfor %】
Google Analytics
一个用来统计用户点击的分析网站
https://analytics.google.com/
使用很简单，一步一步照着做就行了
TOC
见于 base.js
另外，调研出了随着阅读进度，高亮TOC 的方法，但插入进来太麻烦，暂时挂起。
KaTeX 官方方法
不解析+官方用法 https://github.com/KaTeX/KaTeX
遗留问题
kramdown 总是把 $$y=x^2$$ 解析成 \( \) 的形式，
必需配置一下才能识别 $$ 这种 inline 的形式
效果 \(y=\oint_l \dfrac{\alpha}{1+e^{-z}}dz\)
徽章
github-profile-trophy
- https://github-profile-trophy.vercel.app/?username=guofei9987&title=Stars,Followers,MultiLanguage,Commits,PullRequest&row=1&column=5
- https://github-readme-stats.vercel.app/api/pin/?username=guofei9987&repo=scikit-opt&theme=radical
- https://github-readme-stats.vercel.app/api?username=guofei9987&show_icons=true&theme=radical&hide=commits,prs
- https://img.shields.io/github/followers/guofei9987?label=%20&logoColor=%231abc9c&style=social
原始版本的自制徽章：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="20" role="img">
<text x="0" y="15" style="fill:red;font-weight: bold;">2本
</text>
</svg>
一些实用图标
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>
效果：
插入音乐
<iframe frameborder="20" border="20" marginwidth="10" marginheight="0" width="298" height="80" src="/public/assets/追梦人.mp3"></iframe>
打赏模块
见于 https://github.com/guofei9987/donate
颜色美化
code颜色示例(TODO)
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 无关
下面这个是
【% for category in site.categories %】
【% if category[0] == '前端' %】
【% continue %】
【% endif %】
【% endfor %】
下面这个是展示如何 只取出categories=前端
【% for post in site.categories['前端'] %】
。。。
【% endfor %】
解析到www
github 端用www.guofei.site
阿里云解析时 用cname 和 @ 和 guofei9987.github.io
双线解析
- 调研了阿里云oss挂载静态网页，感觉非常麻烦。
- gitee双线部署，但gitee收费不低
- coding https://www.sunweihu.com/5159.html
- 双线路 https://www.jianshu.com/p/a530cd48a059
搜索
教学文档： https://blog.webjeda.com/instant-jekyll-search/
其中，生成的json一定要符合规范，否则无法载入， json验证： https://blog.webjeda.com/instant-jekyll-search/
对于不符合规范的，需要滤掉非法字符：https://shopify.github.io/liquid/filters/replace/
（还有 lunr 也可以添加搜索功能，但是太坑了）
---
---
[
【 for post in site.posts 】
{
"title" : "",
"url" : "",
"category" : "",
"tags" : "",
"date" : "",
"discription" : "",
"content" : ""
} 【% unless forloop.last 】,【 endunless 】
【 endfor 】
]
代码拷贝功能
改一下 base.js 和 base.css：
https://github.com/guofei9987/guofei9987.github.io/commit/0aa4e8403ed0113c3ee27f666a84cb723ce8a0e4
GitHub的API
图片
个人的：
github.com/guofei9987/scikit-opt
个人：https://api.github.com/users/guofei9987
仓库API：https://api.github.com/users/guofei9987/repos
未完成
TOC
代码好了，但是嵌入到现在的页面有点儿麻烦
s
