nodejs版本的Gitalk/Gitment评论自动初始化
node ./comment.js
参考文献：
https://blog.csdn.net/tangguoxing000/article/details/104187400
https://blog.csdn.net/daihaoxin/article/details/84958369
头像旋转
https://yansheng836.github.io/article/3efe2740.html
Hexo主题Yilia添加网站浏览量统计
参考文献：https://www.yuque.com/jinjidexiaobai/myblog/siruf5
设置摘要
https://blog.csdn.net/dta0502/article/details/84387959
主题个性化设置
参考文献：http://yearito.cn/posts/hexo-advanced-settings.html
搞怪标签
参考文献：https://yansheng836.github.io/article/1e69113d.html
文本结束
https://www.cnblogs.com/zzw1024/p/12051480.html
版权声明
https://www.cnblogs.com/zzw1024/p/12051480.html
代码块样式修改
https://blog.csdn.net/weixin_41287260/article/details/103051056
标签和分类
参考文献：
https://tding.top/archives/9a232bbe.html
https://blog.csdn.net/weixin_41599858/article/details/104805987
https://www.freesion.com/article/8457169718/
https://yansheng836.github.io/article/521a17ae.html
- 安装云标签
cnpm install hexo-tag-cloud@^2.0.* --save
- 在主题配置文件 _config.yml 中，添加
menu:
主页: /
分类: /categories
归档: /
标签: /tags
- 打开 DOS 窗口或 git bash，输入以下命令
hexo new page 'categories'
hexo new page 'tags'
- 打开 source\categories\index.md 文件，修改如下
title: 文章分类
date: 2020-12-15 17:09:31
type: categories
layout: "categories"
toc: false
comments: false
- 打开 source\tags\index.md 文件，修改如下
title: 标签
date: 2020-12-15 17:09:39
type: tags
layout: "tags"
comments: false
- 打开 scaffolds/ 目录下的 post.md 文件，添加
title: {{ title }}
date: {{ date }}
tags:
categories:
- 在 themes\yilia-plus\layout 目录下，新建文件 tags.ejs 与 categories.ejs
- 在 tags.ejs 添加如下代码：
<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">标签</h1>
</header>
<% if (site.tags.length) { %>
<div class="tag-cloud">
<div class="tag-cloud-title">
<br>
<br>
</div>
<div class="tag-cloud-tags">
<%- tagcloud({
min_font: 12,
max_font: 30,
amount: 200,
color: true,
start_color: '#555',
end_color: '#111'
}) %>
</div>
</div>
<% } %>
</article>
- 在 categories.ejs 添加如下代码：
<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">
<%= page.title %>
</h1>
</header>
<% if (site.categories.length){ %>
<div class="category-all-page">
<h2>共计 <%= site.categories.length %> 个分类</h2>
<%- list_categories(site.categories, {
show_count: true,
class: 'category-list-item',
style: 'list',
depth: 2,
separator: ''
}) %>
</div>
<% } %>
</article>
- 在样式文件 themes\yilia-plus\source\main.b8fa34.css 中，添加
category-all-page {
margin: 30px 40px 30px 40px;
position: relative;
min-height: 70vh;
}
.category-all-page h2 {
margin: 20px 0;
}
.category-all-page .category-all-title {
text-align: center;
}
.category-all-page .category-all {
margin-top: 20px;
}
.category-all-page .category-list {
margin: 0;
padding: 0;
list-style: none;
}
.category-all-page .category-list-item-list-item {
margin: 10px 15px;
}
.category-all-page .category-list-item-list-count {
color: $grey;
}
.category-all-page .category-list-item-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-item-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-item {
margin: 10px 10px;
}
.category-all-page .category-list-count {
color: $grey;
}
.category-all-page .category-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-child {
padding-left: 10px;
}
.tag-cloud {
text-align:center;
padding:20px
}
.tag-cloud a {
margin:0 20px;
word-break:keep-all;
position:relative
}
.tag-cloud a:hover::before {
width:100%;
left:0;
right:auto
}
.tag-cloud a::before {
content:"";
position:absolute;
width:0;
right:0;
bottom:0;
height:2px;
background:#08c;
-webkit-transition:width .3s ease;
transition:width .3s ease
}
网站运行时间
在 hexo/themes/yelee/layout/_partial/footer.ejs 文件中
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("11/23/2018 20:00:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
Url 持久化（好像没有成功）
参考文献：https://tding.top/archives/9a232bbe.html
我们可以发现 hexo 默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。
推荐安装 hexo-abbrlink 插件：
cnpm install hexo-abbrlink --save
然后配置_config.yml
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex
hexo-yilia博客添加图片(还没试)
https://segmentfault.com/a/1190000009163308
https://blog.csdn.net/weixin_41599858/article/details/104806129?utm_medium=distribute.pc_relevant.none-task-blog-title-3&spm=1001.2101.3001.4242
添加归档
https://blog.csdn.net/weixin_44330881/article/details/103315317
修改代码块样式
直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css
修改代码背景色，搜索 .article-entry .highlight, 修改background后面的颜色
pre{background:#272822;
改为
pre{background:#1a0139;
修改行号颜色，搜索 .article-entry .highlight .gutter pre .line
将
.article-entry .highlight .gutter pre .line{color:#666
改为
.article-entry .highlight .gutter pre .line{color:#fc0000
修改代码字体颜色 .article-entry .highlight .line
.article-entry .highlight .line{color:#fff;
修改为
.article-entry .highlight .line{color:#00ff0d;
代码块行号显示错乱
vim yilia/source/main.0cf68a.css
将 white-space:pre-wrap; 删除.
这个问题是自动换行造成的，使用不自动换行的white-space:pre;
样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。
复制代码块
参考文献：
https://yansheng836.github.io/article/c344994.html
https://code-ape.gitee.io/article/5bc9f198.html#%E4%BB%A3%E7%A0%81%E8%AF%B4%E6%98%8E
- 在hexo的根目录下的themes\yilia\source\js中新建clipboard_use.js如下:
$(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function () {
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-clipboard"></i><span>复制</span>';
copyHtml += '</button>';
$(".highlight .code").before(copyHtml);
var clipboard = new ClipboardJS('.btn-copy', {
target: function (trigger) {
return trigger.nextElementSibling;
}
});
clipboard.on('success', function (e) {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"
setTimeout(function () {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
}, 1000)
e.clearSelection();
});
clipboard.on('error', function (e) {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"
setTimeout(function () {
e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
}, 1000)
e.clearSelection();
});
}
initCopyCode();
}(window, document);
- 在H:\Hexo\themes\yilia\layout\layout.ejs文件的前引入：（作用：页面加载完再执行js）
注：我是在body中插入的
<!-- 代码块复制功能 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js"></script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/clipboard_use.js"></script>
- 修改：H:\Hexo\themes\yilia\source\main.0cf68a.css，在末尾添加下面代码（最好是pre .css~* .id, pre .id下面，即代码块样式附近）
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
. -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy {
opacity: 1;
}
- 需要引入font-awesome，在H:\Hexo\themes\yilia\layout_partial\head.ejs的前添加:
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
