更换Jekyll模板——更简洁明了，增加侧边栏、目录栏、评论系统
一直觉得之前用的博客模板有点怪，今天又想起来了，就又找了一个我觉得更好的模板。
找模板的时候就是想找个简洁明了，有目录栏看着更方便的。碰着发现了我现在正在用的模板。
右下角还能设置一个二次元看板娘，虽然我不是二次元圈的，但是觉得萌萌哒挺有意思的。
郑重声明
此模板源于oukohou，我在oukohou的基础上做了适量的改动，删减了我觉的没用的部分，修改了部分内容以符合我的要求。在此特别感谢oukohou和这个模板的创始人maupassant-jekyll。
新赠Valine评论系统
我觉得这个比之前用的Gitment等系统好用多了，这个系统评论的时候不需要用户注册，临时输入一个用户名即可，非常的方便。
Valine的官网有非常详细的介绍和源代码设置，有兴趣的可以看一下，如果只是想用评论功能，移步到leancloud云服务注册应用，Valine实现的评论功能就是基于在leancloud上保存评论信息。
注意：
一定要从上面的链接进leancloud，也就是https://leancloud.app/，这个是国际版的，个人能免费使用，如果在百度上搜会进国内版的，国内版的2019年10月1日之后必须绑定个人的域名才能正常使用。因为我是基于GitPage的，没有申请域名，国内版的用不成。
1、点击网页右上角Console便可进行注册和新建应用
2、新建应用之后如下图所示
3、点击进应用，然后打开设置->应用Key，找到APP ID和APP Key
4、将APP ID和APP Key添加到_config.yml中，代码如下，在文件最后面。只将APP ID和APP Key两串字符复制粘贴过来即可
valine:
enable: true
app_id: yPxItE7bwrQBFHzHIQIfFXCG-****
app_key: rrUOPcAJyjIaA7iMYSIX****
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
visitor: true
avatar: retro
placeholder: say something~~\n - 昵称 为你所要显示的评论的ID；\n - 邮箱 只有后台可见，仅供讨论过程中是否需要交流邮件而设置，请放心填写;\n - 网址 为你的评论的昵称的超链接。\n以上都可以不写，评论依然会显示……
guest_info: nick,mail,link
pageSize: 10
5、别人评论之后，就可以在后台看到储存的评论了。这些评论都会被加载到相应的博客后面。
新赠live2D看板娘
大佬的模板中已经设置好了，你可以修改自己想设置的二次元图像。给自己的jekyll安装一个萌萌哒二次元看板娘是原博主自己写的设置教程，其中包括了编译，但是对于只应用来说，不用那么复杂。
如果想修改原博主默认设置的二次元形象的话往下看
1、首先下载原博主提供的编译好的文件
原博主提供的百度网盘: 链接：https://pan.baidu.com/s/1NrRkNR70X1jNN6aB3GS8EA 提取码：8dy2
下载完之后你会得到这么多个不同的看板娘
从中选一个即可，比如选择live2dw_koharu
2、进入live2dw_koharu文件夹，会看到assets和lib两个文件夹。
复制这两个文件，再打开博客根目录下的assets/live2dw，你会发现也是assets和lib两个文件夹，将这两个删除，把刚才复制的那两个粘贴进来即可。
3、打开_layouts/base.html，找到下面这一部分代码
<!--live2d function-->
<script src="/assets/live2dw/lib/L2Dwidget.min.js"></script>
<script>L2Dwidget.init({
"pluginRootPath": "live2dw/",
"pluginJsPath": "lib/",
"pluginModelPath": "assets/",
"tagMode": false,
"debug": false,
"model": {"jsonPath": "/assets/live2dw/assets/nitychan.model.json"},
"display": {"position": "right", "width": 65, "height": 90, "hOffset": 60, "vOffset": -10,},
"mobile": {"show": true, "scale": 1,},
"log": false
});</script>
将其中的"model": {"jsonPath": ""model": {"jsonPath": "/assets/live2dw/assets/nitychan.model.json"},"},中的路径/assets/live2dw/assets/nitychan.model.json改为 /assets/live2dw/assets/koharu.model.json
即为如下图所示的***..model.json文件的路径。（不同二次元形象的文件名不一样，都需要改一下）
4、改完之后重新jekyll serve编译一下即可（之前说过在本地编译博客，不想在本地编译看效果也可以之前上传到remote看效果）
看我右下角，是不是萌萌哒。
5、需要的话可以再 "display": {"position": "right", "width": 65, "height": 90, "hOffset": 60, "vOffset": -10,},中修改二次元形象的位置和大小。
新赠多种侧边栏
1、还是在_layouts/base.html文件中找到以下代码
<div class="pure-u-1-4">
<div id="sidebar">
<div class="widget">
<form id="search-form" class="search-form">
<input id="query" type="text" placeholder="Search" class="search-form-input">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
function find_posts(words, posts_data) {
var matched_posts = [];
posts_data.forEach(function(post) {
var content = (new Array(post["title"], post["keywords"])).join(" ");
words.forEach(function (word) {
if (word === null || word === undefined || word == "") {
return; // continue
}
var regex = new RegExp(word, 'i');
if (content.match(regex) != null) {
matched_posts.push(post);
}
});
});
return matched_posts;
}
function show_posts(posts) {
var html = '';
if (posts.length > 0) {
for (var i = 0; i < posts.length; i++) {
post = posts[i];
html += '<div class="post">';
html += '<h2 class="post-title">';
html += '<a href="' + post.url + '">' + post.title + '</a>';
html += '</h2>';
html += '<div class="post-meta"><i class="icon-post-date">';
html += ' ' + post.date;
html += '</i></div>';
html += '<div class="post-content">' + post.summary + '</div>';
html += '<p class="readmore">';
html += '<a href="' + post.url + '">阅读更多</a>';
html += '</p>';
html += '</div>';
}
} else {
html += "<h4>Whoops,您输入的关键词没有搜索结果，请更换关键词！ O(∩_∩)O~</h4>"
}
$('.content_container').html(html);
$('.content_container').show();
}
$('#search-form').submit(function() {
var query = $('#query').val();
var words = query.split(" ")
$('#query').blur().attr('disabled', true);
$('.content_container').hide();
$.ajax({
url: "/assets/data/posts.json",
dataType: "json",
timeout: 6000, // 6 sec
success: function(data) {
matched_posts = find_posts(words, data);
show_posts(matched_posts);
}
});
$('#query').blur().attr('disabled', false);
return false;
});
});
</script>
<!-- 搜索框 -->
<!-- <div class="widget">
<div class="widget-title"><i class="icon-edit"> 心情随笔</i></div><ul></ul>
我梦扬州,便想到扬州梦我。<br>
幸会。<br><br>
<td style="text-align: center"><a style="color: slategrey"></a>
微信公众号:
<a href="https://mp.weixin.qq.com/s/dCxGcuv5ngyR6U-uBYVI9Q"
style="color: darkorange;"
target="_blank" title="点击直达微信公众号～～"><u><b>璇珠杂俎</b></u></a>
</td>
</div>
--> <!-- 个性签名 -->
<div class="widget">
<div class="widget-title"><i class="icon-category"> 文章分类</i></div>
<ul class="category-list">
<li class="category-list-item">
<a class="category-list-link" href="/category/#文献管理与信息分析">文献管理与信息分析 (14)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#GeneralLecture">GeneralLecture (3)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#PythonManuals">PythonManuals (2)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#PaperReview">PaperReview (1)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#OriginManuals">OriginManuals (2)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#LaTeXManuals">LaTeXManuals (4)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#Efficient Application">Efficient Application (1)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#ConvexOptimization">ConvexOptimization (5)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#LinuxManuals">LinuxManuals (1)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#BlockChainLearning">BlockChainLearning (3)</a>
</li>
<li class="category-list-item">
<a class="category-list-link" href="/category/#Reinforcement Learning">Reinforcement Learning (1)</a>
</li>
</ul>
</div>
<!-- 目录列表 -->
<!--<div class="widget">
<div class="widget-title"><i class="icon-star"> 推荐文章</i></div>
<ul class="post-list">
<li class="post-list-item"><a class="post-list-link" href="https://www.oukohou.wang/2018/10/11/S3FD-Single-Shot-Scale-invariant-Face-Detector/">S3FD:Single Shot Scale-invariant Face Detector</a></li>
</ul>
<ul class="post-list">
<li class="post-list-item"><a class="post-list-link" href="https://www.oukohou.wang/2018/11/29/live2D_installation/">给自己的jekyll博客安装live2D看板娘</a></li>
</ul>
<ul class="post-list">
<li class="post-list-item"><a class="post-list-link" href="https://www.oukohou.wang/2018/11/20/process_of_blog_setting-up/">博客搭建历程</a></li>
</ul>
<ul class="post-list">
<li class="post-list-item"><a class="post-list-link" href="https://www.oukohou.wang/2018/12/06/autumn_poems/">寒事今牢落，人生亦有初</a></li>
</ul>
</div>
--><!-- 推荐列表 -->
<div class="widget">
<div class="widget-title">标签云</div>
<div class="tagcloud">
<a href="/tags/#Essential Skill" rel="nofollow" style="font-size: 15pt; color: #333;">Essential Skill</a>
<a href="/tags/#Science Paper" rel="nofollow" style="font-size: 18pt; color: #000;">Science Paper</a>
<a href="/tags/#Essential and Professional Course" rel="nofollow" style="font-size: 13.5pt; color: #444;">Essential and Professional Course</a>
<a href="/tags/#Python" rel="nofollow" style="font-size: 13pt; color: #555;">Python</a>
<a href="/tags/#Efficient Application" rel="nofollow" style="font-size: 10pt; color: #888;">Efficient Application</a>
<a href="/tags/#Broaden Horizons" rel="nofollow" style="font-size: 9pt; color: #999;">Broaden Horizons</a>
<a href="/tags/#LaTeX" rel="nofollow" style="font-size: 10.5pt; color: #777;">LaTeX</a>
<a href="/tags/#Comprehensive Quality" rel="nofollow" style="font-size: 10pt; color: #888;">Comprehensive Quality</a>
<a href="/tags/#Linux" rel="nofollow" style="font-size: 11pt; color: #777;">Linux</a>
<a href="/tags/#BlockChain" rel="nofollow" style="font-size: 10.5pt; color: #777;">BlockChain</a>
<a href="/tags/#CVX" rel="nofollow" style="font-size: 9pt; color: #999;">CVX</a>
<a href="/tags/#MATLAB" rel="nofollow" style="font-size: 9pt; color: #999;">MATLAB</a>
<a href="/tags/#Go" rel="nofollow" style="font-size: 9pt; color: #999;">Go</a>
<a href="/tags/#Photography" rel="nofollow" style="font-size: 10.5pt; color: #777;">Photography</a>
<a href="/tags/#Reinforcement Learning" rel="nofollow" style="font-size: 9pt; color: #999;">Reinforcement Learning</a>
<a href="/tags/#Microservice" rel="nofollow" style="font-size: 9pt; color: #999;">Microservice</a>
</div>
</div>
<!-- 标签词云 -->
<!-- <div class="widget">
<div class="widget-title"><i class="icon-code-hub"> 代码仓库</i></div>
<ul class="codehub-list">
<li class="codehub-list-item"><a href="" title="" target="_blank"></a></li>
</ul>
</div>
--> <!-- 代码仓库列表 -->
<!--<div class="widget">
<div class="widget-title"><i class="icon-link"> 友情链接</i></div>
<ul class="link-list">
<li class="link-list-item"><a href="http://jekyllcn.com/" title="Jekyll blog system" target="_blank">Jekyll blog system</a></li>
</ul>
</div>
--> <!-- 友情链接列表 -->
<div class="widget post-toc hide">
<div class="widget-title"><i class="icon-post-toc"> 文章目录</i></div><ul></ul>
</div>
<script type="text/javascript">
function TOCize(toc, content, matchHeightTo) {
if (!(toc && content && matchHeightTo)) return false
var cnt = 0;
var make = function(tag) {
return document.createElement(tag)
}
var aniscroll = {
to: function(top) {
aniscroll.target = top;
if (aniscroll.running) return;
aniscroll.running = setInterval(aniscroll.tick, 20);
},
target: 0,
running: 0,
getTop: function() {
return window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
},
setTop: function(value) {
(window['scrollTo'] && window.scrollTo(window.scrollX, value))
},
tick: function() {
var oldST = aniscroll.getTop(), newST = ~~((oldST + aniscroll.target) / 2);
aniscroll.setTop(newST);
if (aniscroll.getTop() < newST || Math.abs(newST - aniscroll.target) < 10) {
aniscroll.setTop(aniscroll.target);
clearInterval(aniscroll.running)
aniscroll.running = 0
}
}
}
function scrollToHeader(header, hash, ev) {
var y = header.getBoundingClientRect().top + aniscroll.getTop();
if (window.history['pushState']) {
window.history.pushState({}, header.textContent, "#" + hash);
aniscroll.to(y);
ev.preventDefault();
} else {
var y2 = aniscroll.getTop();
setTimeout(function() {
aniscroll.setTop(y2);
aniscroll.to(y);
}, 0);
}
}
var generateLink = function(h) {
var q = make('a');
cnt++;
var hash = h.getAttribute('id');
if (!hash) {
hash = ('generated-hash-' + cnt);
h.setAttribute('id', hash);
}
q.textContent = h.textContent;
q.setAttribute('href', '#' + hash );
q.addEventListener('click', scrollToHeader.bind(this, h, hash), false);
return q;
};
var hs = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
var cul = null, plevel = 1;
var uls = [make('ul')];
for (var i=0;i<hs.length;i++) {
var level = +hs[i].tagName.substr(1);
var hi = hs[i];
var ti = make('li');
ti.appendChild(generateLink(hi));
if (plevel < level) {
do {
uls.push(make('ul'));
uls[uls.length-2].appendChild(uls[uls.length-1]);
} while (++plevel < level);
} else if (plevel > level) {
do {
cul = uls.pop();
} while (--plevel > level);
}
cul = uls[uls.length-1];
cul.appendChild(ti);
}
while(true) {
var chs = uls[0].children;
if (chs.length == 1 && chs[0].tagName == 'UL')
uls.shift();
else
break;
}
if (!cnt) return false;
var scrolldummy=make('div');
toc.appendChild(scrolldummy);
toc.appendChild(uls[0]);
toc.style.display = 'block';
var maxHeightTOC = '';
var ppc = document.querySelector('.post');
var s1 = function(){
var scrollTop=aniscroll.getTop(), dummyClientTop=scrolldummy.getBoundingClientRect().top,
margin = 10,c,d; // c = dummyHeight, d = TOC.maxHeight (+'px')
if ((c = -dummyClientTop + margin) < 0) c = 0;
if (c) {
var wh = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight,
cbox = matchHeightTo.getBoundingClientRect(),
vq = cbox.bottom - dummyClientTop - uls[0].offsetHeight;
if (c>vq) c=vq;
d = (wh - (margin<<1)) + 'px';
} else {
d = "";
}
if (d != maxHeightTOC) { //status lock.
maxHeightTOC = d;
if (d) {
uls[0].setAttribute('style', 'max-height:' + d + '; width:' + (toc.offsetWidth-20) + "px" );
} else {
uls[0].setAttribute("style","");
}
}
scrolldummy.style.height = (c+'px');
};
window.addEventListener('scroll', s1, false);
window.addEventListener('resize', s1, false);
}
TOCize(
document.querySelector('.post-toc'),
document.querySelector('.post-content'),
document.querySelector('.post')
);
</script>
<!-- 博客目录 -->
</div>
</div>
这个就是设置侧边栏的，注意<!--******-->是注释内容，也就是不让他出现，也可以直接删了，但不轻易删代码是个好习惯，说不定以后就用得着了，直接取消注释就行，也是一种防止误删代码的方法。
2、可以设置的侧边栏在_include/widgets文件夹中，将想要设置的侧边栏的文件名填入即可。也可以对这些文件进行修改，修改成你的标准。
3、还是看我的效果，我是暂时只保留了，搜索栏，文章分类列表，标签词云，和打开博客后的目录。
修改了404界面
这个纯属闲的没事，我觉得他的404不好看，（是腾讯公益寻找失踪人口的界面，好多网站的404都是链接的这个）。但我的个人博客就没几个人看，用这个404界面没用，我就找了个404界面源代码，放进了博客根目录下的404.html文件里，还是挺有意思的。是个会动的小狗狗——蓝色个性可爱小狗404网页模板
注意！
在_layouts/base.html文件中
有这么一段代码
<!--Google Adsense, details at: "https://www.google.com/adsense/new/u/0/pub-3980406043325966/home" -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3980406043325966",
enable_page_level_ads: true
});
</script>
这个事Google广告呀，应该是这个博客模板的创造者故意加进去的，所有使用这个模板的人的博客都成了他的广告流量来源，只要打开网页就相当于给他点了广告。
这里，我也知道原作者非常辛苦的创作了这个模板，让他赚点钱是可以理解的，但在国内，加载一个这个脚本很慢的，是让整个博客的加载体验不好，所以再部署自己的博客的时候自己考虑是否把这一段注释或者删了
还有多个文件中都存在的
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130856615-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-130856615-1');
</script>
这个是统计网站访问情况的脚本，使用的Google Analysics。很多人搭建自己博客的应该都用，但是！这里是作者直接放在base.html中的，如果不一点一点的看根本看不到。
正常情况下是在
_config.yml中的# Google Analytics ga_track_id: #'UA-130856615-1' # Format: UA-xxxxxx-xx ga_domain: #www.oukohou.wang # 默认的是 auto, 这里我是自定义了的域名，你如果没有自己的域名，需要改成auto设置自己的
ga_track_id
但是这里直接设置了一个ga_track_id，UA-130856615-1,
也就是说，所有使用这个模板的人的博客的访问情况都会被作者的Google Analysics账号收集，有种隐私泄露的感觉，这个并不能为作者带来收益呀，不知道他为什么要收集这个信息。还是自行考虑部署自己的博客的时候自己考虑是否把这一段注释或者删了。
对本文有任何问题，请在下面评论：