六祎-搭建hexo next主题的博客---Hexo美化
显示文章更新时间
修改主题配置文件 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">
| {{ __('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
安装
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-wrap 的 background 属性值设置为：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，在 class 为 post-mata 的 div 中的添加如下内容：
1 2 3 4 |
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">共{{ totalcount(site) }}字</span>
</div> |
网易公司福利 162人发布
查看40道真题和解析