文章分类和展示逻辑
现在的网站有些耦合性，记录如下：
- 首页，按时间展示所有的 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 的方法，但插入进来太麻烦，暂时挂起。
kramdown-math-katex（弃用）
katex 在本地成功了，
- 是预先解析的，非常方便。
- 切换页码也能解析成功
但在 GitHub Pages 上没成功。
- 原因是 Kramdown 在某个新版本后不支持 Katex
- 解决：借用 MathJax 的解析，然后加载2个js才能解析，且不是预先解析，切换页面时不会解析
- 项目只有7个star呀
- 只能
# _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
我还用了这些，但貌似没太大用：
# GemFile：
gem 'katex'
gem 'kramdown-math-katex'
# _config.yml:
plugins:
- "katex"
- "kramdown-math-katex"
KaTeX 官方方法
不解析+官方用法 https://github.com/KaTeX/KaTeX
遗留问题
kramdown 总是把 $$y=x^2$$ 解析成 \( \) 的形式，
必需配置一下才能识别 $$ 这种 inline 的形式
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\)
徽章
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>
加入404公益（没用下线了）
在404.html页内插入这个
<script type="text/javascript" src="//qzo【为了防止影响此页面，插入本句】nestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://www.guofei.site" homePageName="回到郭飞的博客"></script>
echarts支持
一些实用图标
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 读取 json
<div class="row" id="book_list"></div>
<script type="text/javascript">
//1. 读入数据
var url = "https://www.guofei.site/pages/book_list.json";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var a = JSON.parse(this.responseText);
book_list.push(a);
}
};
var book_list = [];
xmlhttp.open("GET", url, false);
xmlhttp.send();
for (var i = 0; i < book_list[0].length; i++) {
book = book_list[0][i]
tmp= `
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">` + book['书名'] + `</div>
<div class="panel-body">
<div class="col-md-8 col-xs-12">
<table class="table table-bordered">
<tbody>
<tr><td style="width:80px;">书名</td><td>` + book['书名'] + `</td>
<td style="width:80px;">阅毕时间</td><td>` + book['读完时间'] + `</td>
</tr>
<tr><td style="width:40px;">作者</td><td>` + book['作者'] + `</td>
<td style="width:40px;">我的打分</td><td><font color="red">` + book['打分'] + `</font></td>
</tr>
<tr><td>出版商</td><td>` + book['出版商'] + `</td>
<td>读书笔记</td><td>
<a href="http://www.guofei.site/reading/#" title="http://www.guofei.site/reading/#">点击查看</a>
</td>
</tr>
<tr><td>简评</td><td colspan=" 3 ">` + book['简评'] + `</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`
// 写入
document.getElementById("book_list").innerHTML += tmp;
}
</script>
插入音乐
<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
timeline（没用下线了）
➡️小事记
小事记
My Timeline
------------------ 2 0 1 9 ------------------
------------------ 2 0 1 8 ------------------
2018年：写了82篇博客，读了42本书，LeetCode刷了203题，跑步69公里。
入职京东集团，在Y事业部收益管理组任职算法工程师
------------------ 2 0 1 7 ------------------
Contribute to scipy,
and become one of 121 authors in scipy 1.0.0
release
note
向scipy提交代码并被合并 成为scipy1.0.0的121名Author之一 release note ヾ(o◕∀◕)ﾉ
向scipy提交代码并被合并 成为scipy1.0.0的121名Author之一 release note ヾ(o◕∀◕)ﾉ
------------------ 2 0 1 6 ------------------
入职中体彩彩票运营管理有限公司，在量化组任职算法工程师
获得硕士学位
成为SPG旗下Journal of Finance and Accounting杂志的同行审稿员
------------------ 2 0 1 5 ------------------
1st author of
A New Index of Private Offering Fund for Stock Strategy
Journal of Finance and Accounting Volume 3, Issue 6, November 2015, Pages: 177-183
Journal of Finance and Accounting Volume 3, Issue 6, November 2015, Pages: 177-183
------------------ e a r l i e r ------------------
人生第一个1万米跑，用时69分钟
(ง •̀_•́)ง
(ง •̀_•́)ง
全国数学建模竞赛上海区一等奖
(ง •̀_•́)ง
(ง •̀_•́)ง
Born 呱呱坠地 ヾ (o ° ω ° O ) ノ゙
双线解析
- 调研了阿里云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
未完成
TOC
代码好了，但是嵌入到现在的页面有点儿麻烦
s
