六祎-搭建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">
    &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-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>

 

posted @ 2022-04-26 00:55  你好，Alf  阅读(22)  评论(0)  编辑  收藏  举报