2. it
  3. 六祎-搭建hexo next主题的博客---Hexo美化

六祎-搭建hexo next主题的博客---Hexo美化

mac2022-06-30  101

 

显示文章更新时间

修改主题配置文件 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

安装

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>

 

最新回复(0)