搭建hexo next主题的博客教程

显示文章更新时间

修改主题配置文件 hexo/themes/hexo-theme-next/layout/_macro/post.swig

找到 <div class="post-meta"> <span class="post-time"> 标签后增加:

1
2
3
4
5
6
7
8
{%if post.updated and post.updated > post.date%}
<span class="post-updated">
&nbsp; | &nbsp; {{ __('post.updated') }}
<time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
{{ date(post.updated, config.date_format) }}
</time>
</span>
{% endif %}

post-updated 用来访问对应的语言配置文件里的值,theme. 来访问主题配置文件的变量,post. 来访问每篇文章的前置设置 Front Matter 里的变量。
代码里需要保证updated的时间是date之后才会显示

修改语言配置文件 hexo/themes/hexo-theme-next/languages/zh-Hans.yml

增加 post 下 updated 的配置

1
2
post:
updated: 更新于

修改主题配置文件 hexo/themes/hexo-theme-next/_config.yml

增加一行:

1
display_updated: true


给博客设置RSS

安装

hexo-generator-feed

1
$ npm install hexo-generator-feed --save

设置

打开 站点配置文件 _config.yml
新增以下内容

1
2
3
4
5
6
7
8
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '


更改背景透明度

首先打开主题配置文件夹

themes\next\source\css\_schemes\Pisces

然后找到配置文件

_layout.styl

修改配置文件

1
2
3
.content-wrap {
background: rgba(255, 255, 254, 0.5);
}

如上图,将 .content-wrapbackground 属性值设置为:rgba(255, 255, 254, 0.5) (这个值可以根据个人需求自定义)


添加Google AdSense

新建 AdSense 模板

1
themes/next/layout/_custom/google_adsense.ejs

在 next 主题下的 layout/_custom 文件夹下创建一个 google_adsense.ejs 文件
然后将 Google AdSense 的代码复制到 google_adsense.ejs

编辑 _layout.swig

1
2
3
<!-- Google AdSense start -->
{% include '_custom/google_adsense.ejs' %}
<!-- Google AdSense end -->

根据 Google AdSense 的要求将代码放置在 <head></head> 标记之间


侧栏加入已运行的时间

加入下面代码:
文件位置:~/blog/themes/next/layout/_custom/sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="days"></div>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

上面 Date 的值记得改为你自己的


添加字数统计

安装 hexo-wordcount 插件

首先在博客目录下使用 npm 安装插件:

1
npm install hexo-wordcount --save

修改配置文件

为了方便地开启和关闭字数统计功能,我们需要在配置文件(站点配置文件或主题配置文件均可)中添加一个键值对:

1
2
3
4
5

# 开启字数统计
word_count: true
# 关闭字数统计
# word_count: false

修改 post.swig

为了能在文章信息处显示字数,我们需要修改 themes/next/layout/_macro/post.swig,在 classpost-matadiv 中的添加如下内容:

1
2
3
4
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">共{{ totalcount(site) }}字</span>
</div>

打赏

刘伟 wechat
欢迎您扫一扫上面的微信公众号( 或者搜索:darrenliuwei )订阅
如果觉得本文对您有启发,可以随意打赏一点鼓励我继续更新!