Hexo进阶

笔记

前言:在编辑代码的时候,切记不要使用系统自带的记事本 应使用如Notepad++之类的程序

​ 若已经用记事本编辑 要另存为 修改文件编码格式为UTF-8 否则中文会出现乱码

插入图片

1 把站点配置文件_config.yml 里的post_asset_folder:这个选项设置为true

2.安装插件:npm install https://github.com/CodeFalling/hexo-asset-image — save

3.运行hexo n “XXXXXX”,生成XXXXX.md博文时就会在/source/_posts目录下生成XXXXXX的文件夹,将你想在XXXXX博文中插入的照片放置到这个同名文件夹中即可,图片的命名随意。

4.添加图片:在想添加的位置写入,例如![](XXX.jpg)

WARN:新版本的hexo-assrt-image 代码有问题!需修改

打开/node_modules/hexo-asset-image/index.js,修改为以下代码

详细代码
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
var beginPos = getPosition(link, '/', 1) + 1;
else
var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);

var toprocess = ['excerpt', 'more', 'content'];
for(var i = 0; i < toprocess.length; i++){
var key = toprocess[i];

var $ = cheerio.load(data[key], {
ignoreWhitespace: false,
xmlMode: false,
lowerCaseTags: false,
decodeEntities: false
});

$('img').each(function(){
if ($(this).attr('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src) &&
!/^\s*\//.test(src)) {
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '' && elem != '.';
});
if(srcArray.length > 1)
srcArray.shift();
src = srcArray.join('/');
$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
}
});
data[key] = $.html();
}
}
});

代码来源:https://blog.csdn.net/xjm850552586/article/details/84101345

(我被这个东西坑了很久,欲哭无泪TAT…)

此外也有其他方法可供参考

如在 /source新建一文件夹images,通过Markdown语法

![](https://yourweb.xxx/images/xxx.jpg)

也可使用另外一款插件:hexo-asset-image

一样确保 post_asset_folder: true 然后引用

![xxx](xxx.jpg)

添加字数统计和阅读时长

先在博客目录执行一下命令以下载Wordcount插件

npm i --save hexo-wordcount

在\themes\hexo-theme\layout_partial\post 目录下创建 word.ejs文件,写入以下代码:

详细代码
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count"><%= wordcount(post.content) %>字</span>
</span>
</span>

<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>

然后在\themes\hexo-theme\layout_partial\article.ejs 找到以下位置

<div class="article-inner">
<%- partial('post/gallery') %>
<% if (post.link || post.title){ %>
<header class="article-header">




</header>
<% } %>

将下面的代码复制到上面的间隔中

<% if(theme.word_count && !post.no_word_count){ %>
<%- partial('post/word') %>
<% } %>

在主题配置文件添加Workcount功能

#Workcount
word_count: ture

也可以在文章开头通过no_word_count控制当前页面是否显示字数统计

在博客底部显示总字数

找到themes\hexo-theme\layout\ _partial\foot.ejs

在合适的位置新建一段代码

<span class="post-count">字数统计: <%= totalcount(site) %></span>

参考文献:https://www.dazhuanlan.com/2019/11/04/5dbf794097c54/

添加网站运行时间

在\themes\hexo-theme\layout_partial\footer.ejs中加入以下代码:

详细代码
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("08/10/2018 17:38: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>

参考文献:https://zhuanlan.zhihu.com/p/69213954

添加文章目录

文章目录毋庸置疑添加到post布局上 可以使用Hexo的辅助函数,不是很复杂

直接找到post布局所指向的ejs文件

<%- partial('_partial/article', {item: page, index: false}) %>

于是打开_partial/article.ejs文件 找到<%- post.content %>(应该是引入MD的文章内容)

在之前添加TOC代码:

<!-- Table of Contents -->
<% if (!index && post.toc){ %> //判断index值和post.toc是否不等于false 可以在文章的前置声明开关
<div id="toc" class="toc-article">
<div class="toc-title">文章目录</div>
<%- toc(post.content) %>
</div>
<% } %>

设置目录样式

暂时没有使用这个功能 因为发现引用toc辅助函数和aplayer同时存在的时候 toc无效

找到对应的source/css/_partial/article.styl文件

在文件最后添加以下样式:

详细代码
/*toc*/
.toc-article
background color-background
border 1px solid #bbb //设置边框颜色
border-radius 10px
margin 1.5em 0 0.3em 1.5em
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120% //设置“目录”大小
color #5953F3 //“目录”颜色
#toc
line-height 1em //行高
font-size 0.9em //目录字体大小
float right //在右侧浮动 但由于主题布局设置,现在无法做到浮动
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em

启用目录

在需要启用目录的文章前置声明中添加一行

toc: true

如果之后的所有文章都要开启目录 可以直接修改post模板

在your‘s blog\scaffolds\post.md中加入

toc: true

即为默认开启toc 在如果部分文章不需要直接将true改为false即可

链接样式优化

添加完目录功能,对颜色还是不大满意 参考了官方的目录样式 决定增加点击时改变颜色的功能

链接样式用法:

a:link 定义正常链接的样式
a:visited 定义已访问过链接的样式
a:hover 定义鼠标悬浮在链接上时的样式
a:active 定义鼠标点击链接时的样式

如果有些样式相同 也可以合并定义

a:link,
a:visited {
...
...
}

书写顺序 link—visited—hover-active LoVe HAte原则(大写字母就是它们的首字母) ——后面的原则不知道

局部链接样式特殊化

在链接样式定义的前面加上指定的id或class就可以了 如

#class-id a:link
#class-id a:visited{
...
...
}

调用方法:

//

记得超过一行代码的要加{}(应该和C++原因一样)

于是将目录class特殊化:

#toc a:hover
color: #5953F3

修改主题字体

发现主题的代码块在选中的情况下会出现类似重影的问题

利用浏览器的审查元素发现是代码块开启了box-shadow(阴影效果) 没有丝毫用处

于是找到主题下的\source\css\ _partial\highlight.styl

找到.article-entry下的code 在这里可以修改代码块的参数 随便你改咯

(为什么我产生了有人看我博客的错觉)

我是把box-shadow删掉了 并且略微调大了font-size