Hexo-Next 主题博客个性化配置超详细，超全面(两万字)

网页预览：

zxiaoxuan.cn

因为本人比较喜欢简介风格的，所以整个界面都是简约风格的，一个好的博客，应该让人一眼就能看清楚技术分类,文章也应该就是文章，让人能够最好的阅读你的博客 这才是我们应该做的，所以没有太多花里胡哨的东西。

使用工具：

Git
Github
Nodepad++
QQ浏览器F12开发者选项

Hexo简易安装

前置条件

npm install -g hexo-cli

安装hexo

npm install -g hexo-cli

主题下载安装

进入命令行，下载 NexT 主题，输入：

git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站点配置文件_config.yml，找到如下代码：

## Themes: https://hexo.io/themes/
theme: landscape

将 landscape 修改为 next 即可。

配置文件

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的站点配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

/hexo/_config.yml

/hexo/themes/next/_config.yml

修改语言

打开站点配置文件，搜索 language，找到如下代码：

author:
language:
timezone:

在 language 后面输入 zh-CN。

新建标签及分类界面

打开 主题配置文件，搜索 menu，找到如下代码：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

把 tags 和 categories 前面的 # 删除，

切换主题

next 主题自带四种样式。

在主题配置文件/next/_config.yml中查找：scheme，找到如下代码：

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
选择你喜欢的一种样式，去掉前面的 #，其他主题前加上 # 即可。

隐藏网页底部 powered By Hexo / 强力驱动

打开 themes/next/layout/_partials/footer.swig

找到：

{% if theme.footer.powered.enable %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}
{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} – {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

把这段代码首尾分别加上：<!-- 和-->，或者直接删除。

文章添加阴影

打开 /themes/next/source/css/_custom/custom.styl，添加：

.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

浏览页面显示当前浏览进度

打开 themes/next/_config.yml，搜索关键字 scrollpercent，把 false 改为 true。

效果图：

Local Search本地搜索

安装插件hexo-generator-searchdb,执行以下命令:

npm install hexo-generator-searchdb --save

修改hexo/_config.yml站点配置文件，新增以下内容到任意位置：

search:
path: search.xml
field: post
format: html
limit: 10000

编辑 主题配置文件，启用本地搜索功能：

# Local search
local_search:
enable: true

效果图：

设置网站图标

在 EasyIcon 中找一张（32 * 32）的 ico 图标，或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改主题配置文件：

Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

效果图：

修改文章底部的#号的标签，改为图标

修改模板/themes/next/layout/_macro/post.swig

搜索 rel=“tag”>#，将 # 换成<i class="fa fa-tag"></i>

效果图：

文章分享功能

打开themes/next/_config.yml 搜索关键字needmoreshare2 修改为下面设置

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      #位置
      position: bottomCenter
      #可分享网站
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      #位置
      position: topRight
       #可分享网站
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

效果图：
postbottom为文章末尾分享 float则是在页面侧端分享

文章加密访问

打开themes->next->layout->_partials->head.swig文件,插入这样一段代码：

    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();

然后在文章上写成类似这样：

---
title: Hello World
date: 2016/7/13 20:46:25
categories:
- Diary
tags:
  - Testing
  - Another Tag
password: 123456
---

增加文章字数统计及阅读时常功能

安装插件hexo-wordcount,执行以下命令:

 npm install hexo-wordcount --save

修改themes/next/_config.yml主题配置文件，搜索关键字post_wordcount,修改如下:

post_wordcount:
  item_text: true
  wordcount: true #单篇文章字数
  min2read: true #单篇阅读时长
  totalcount: true #站点总字数
  separated_meta: true

文章置顶功能

移除默认安装的插件：

npm uninstall hexo-generator-index --save
1
安装新插件:

npm install hexo-generator-index-pin-top --save
1
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：

top: true

1
如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

文章 b 便会显示在文章 a 的前面

设置置顶图标
打开/themes/next/layout/_macro/post.swig文件，在<div class="post-meta">下方，插入如下代码：

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

修改[Read More]按钮样式

修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式

// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

效果图：

修改 阅读全文 前显示文字数量即位置

打开 themes/next/_config.yml，搜索关键字 auto_excerpt， 修改length即可修改阅读全文前显示文字数量

auto_excerpt:
  enable: true
  length: 150

或者在文章中任意位置添加<!-- more -->

建议在文章中加入 <!-- more -->
自定义 [Read More] 按钮之前要显示的内容！

修改链接文字样式

打开themes\next\source\css\_common\components\post\post.styl添加以下代码:

.post-body p a{

 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

效果图：

头像设置圆形,停留旋转效果

修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl,新增以下代码:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  //设置圆形
+  border-radius: 50%;
+  transition: 2s all;
}
   //旋转
+ .site-author-image:hover{
+   transform: rotate(360deg);
+ }

效果图：

文章添加阴影效果(文章边框)

打开themes/next/source/css/_custom/custom.styl文件添加:

.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }
 ​​​​​​​​

近期文章

修改themes/next/layout/_macro/sidebar.swig 。找到theme.social板块代码，在该板块最后的endif后隔一行添加如下代码。

{# recent posts #}
{% if theme.recent_posts %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
      <!-- modify icon to fire by szw -->
      <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
      {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
      {% set posts = site.posts.sort('-date') %}
      {% for post in posts.slice('0', '5') %}
        <li class="recent_posts_li">
          <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

编辑themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl

li.recent_posts_li {
    text-align: cengter;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

在 themes/next/_config.yml中添加下方代码

# 近期文章设置
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果图：

文章末尾添加"本文结束"标记

修改在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代码：

• ---------------- The End ----------------
  {% if theme.wechat_subscriber.enabled and not is_index %}
  {% include 'wechat-subscriber.swig' %}
  {% endif %}

为博客加上妹子

Git输入下方代码

npm install -save hexo-helper-live2d
然后在在 hexo 的 _config.yml中添加参数：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜欢的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

可供选择模型：

• live2d-widget-model-chitose

• live2d-widget-model-epsilon2_1

• live2d-widget-model-gf

• live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)

• live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)

• live2d-widget-model-haruto

• live2d-widget-model-hibiki

• live2d-widget-model-hijiki

• live2d-widget-model-izumi

• live2d-widget-model-koharu

• live2d-widget-model-miku

• live2d-widget-model-ni-j

• live2d-widget-model-nico

• live2d-widget-model-nietzsche

• live2d-widget-model-nipsilon

• live2d-widget-model-nito

• live2d-widget-model-shizuku

• live2d-widget-model-tororo

• live2d-widget-model-tsumiki

• live2d-widget-model-unitychan

• live2d-widget-model-wanko

• live2d-widget-model-z16
  建配置文件

在站点目录下建文件夹live2d_models，

再在live2d_models下建文件夹<你喜欢的模型名字>,

再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json

安装模型。在命令行（即Git Bash）运行以下命令即可：

npm install --save live2d-widget-model-<你喜欢的模型名字>

复制你喜欢的模型名字：

Epsilon2.1

Gantzert_Felixander

haru

miku

ni-j

nico

nietzche

nipsilon

nito

shizuku

tsumiki

wanko

z16

hibiki

koharu

haruto

Unitychan

tororo

hijiki

代码块复制选项

Next6 中自带了复制代码按钮，Next5 需要自己手动配置。

搜索 codeblock，找到如下配置：

codeblock:
border_radius: 8   # 按钮圆滑度
copy_button:  # 设置是否开启代码块复制按钮
	enable: true
	show_result: true  # 是否显示复制成功信息

修改加载特效

由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条。Next 已经集成了很多加载特效，可以在下面选项中在线调试测试一下。

搜索pace，找到如下代码：

# 页面顶部加载条
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal  #默认设置，可以修改为上述任何一个

修改文章链接

在做次优化之前，hexo-next文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。
比如：https://zxiaoxuan.github.io/2019/08/12/hello-world/ 这样，如果文章标题是中文的话，URL链接是也会是中文，

那么要生存简洁且唯一的URL，怎么办呢

安装插件

npm install hexo-abbrlink --save

执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…
使用npm命令安装即可，比如npm install [email protected] babel-eslint@8 --save-dev

修改根目录站点配置文件config.yml，改为：

permalink: posts/:abbrlink/
abbrlink:
	alg: crc32   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex

生成的链接将会是这样的(官方样例)：
四种可供选择

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后，原md文件的Front-matter 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

评论 Valine 增强版

云淡风轻在很早之前就开发了一款极简的valine评论系统
但这个评论系统有一个痛点。虽然它虽然支持邮件提醒，但这个功能却很弱，无法提示到具体文章，也无法给评论者进行有效的回复通知，通常别人留完言，怎么还会再来你的博客看你是否回复了呢？。

而这款 Valine 的增强版，满足了这几个条件：

完善的邮件通知，自定义 SMTP 发件频率和内容不再受限
基于 Akismet 的垃圾评论自动标注和过滤
评论管理，避免直接操作数据库

为了适配hexo博客，可以做如下修改：

步骤一：下载Valine.min.js 到文件夹 themes/next/source/js/src 下。
步骤二：
在hexo/themes/next/layout/_third-party/comments/valine.swig中
修改代码如下：

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '{{ theme.valine.guest_info }}';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: {{ theme.valine.verify }},
        notify: {{ theme.valine.notify }},
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        placeholder: '{{ theme.valine.placeholder }}',
        avatar:'{{ theme.valine.avatar }}',
        guest_info:guest,
        pageSize:'{{ theme.valine.pageSize }}' || 10,
    });
  </script>
{% endif %}

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="/js/src/Valine.min.js"></script>
  
  <script type="text/javascript">
    new Valine({
        lang: 'zh-cn',
        admin_email:'[email protected]', //填写博主邮箱 
        el: '#comments' ,
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        emoticon_url: 'https://cloud.panjunwen.com/alu',
        emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],
        placeholder: '{{ theme.valine.placeholder }}',
  });
  </script>
{% endif %}

主题配置文件中的valine可这样配置：

valine:
  enable: true
  appid:  your appid #<app_id>
  appkey: your appkey #<app_key>
  notify: false # mail notifier # 关闭，使用valine-admin发邮件
  verify: false # Verification code
  placeholder: '&#x270d;写评论'  # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

侧栏加入网易云音乐

打开网易云，找到你想要添加的歌曲或者歌单，点生成外链播放器 然后复制代码

将代码放到…/themes/hexo-theme-next/layout/_macro/sidebar.swig文件下：

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

视频

1）直接用 HTML 的标签，写法如下：

复制
Your browser does not support the video tag.
2）用插件，可支持弹幕，首先在站点文件夹根目录安装插件：

复制
npm install hexo-tag-dplayer --save
然后文章中的写法：

复制
{% dplayer “url=https://什么什么什么.mp4” “https://封面图.jpg” “api=https://api.prprpr.me/dplayer/” “id=” “loop=false” %}
要使用弹幕，必须有api和id两项，并且若使用的是官方的 api 地址（即上面的），id 的值不能与这个列表的值一样。id 的值自己随便取，唯一要求就是前面这点。如果唯一要求难倒了你，可以使用这个工具将一段与众不同的文字?生成一段看起来毫无意义的哈希值，这样看起来是不是好多了。

当然，这个插件的功能还有很多，可以去 README 和这插件的「母亲」Dplayer 的官方文档看看。

各版块透明度修改

内容板块透明
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件 .content-wrap 标签下 background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner标签下 background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景
博客根目录themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件.sidebar-inner 标签下 background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

然后修改博客根目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar 标签下 background: $body-bg-color修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

按钮背景
博客根目录themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

修改标题按钮
.brand {
position: relative;
display: inline-block;
padding: 0 40px;
color: #222;
background: ;
border-bottom: none;
}

更改默认Google字体库

访问系统总是会耗费一大部分的时间在加载google字体库上, 而且经常加载不成功.

方法一: 用国内的CDN库来替代主题中的google字体库, 到主题配置文件中设置默认字体库:

host: fonts.useso.com

方法二: 关掉字体库的引用, 默认加载本地字体库, 到主题配置文件设置:

font:
  enable: false

bnt

文章加密访问

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：

  <script src="{{ pace_js_uri }}"></script>
  <link href="{{ pace_css_uri }}" rel="stylesheet">

代码如下：

  <script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://zxiaoxuan.cn"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

然后在文章添加password就可以了

标签修改

打开themes/next/layout/page.swig

修改这里可以修改标签页的标签显示

在这里添加东西会在标签页面上显示

博客背景图片

在themes/next/source/css/_custom/custom.styl中添加CSS样式

// 背景图片
body::before {
    background-image: url(https://背景图.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    content: " ";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}

(2）jquery-backstretch插件

+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
+  <script>
+  $("body").backstretch("https://背景图.jpg");
+  </script>
</body>

加入到文件最后面前面即可。你可以浏览器按 F12 查看我的页面，就可以在前发现。幻灯片等更多用法请自行查看 GitHub 上的 README。

彩色标签云

在/themes/next/layout/目录下，新增tag-color.swig文件，加入下方代码：

<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "?";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在/themes/next/layout/page.swig/中引入tag-color.swig：

在下方加上 {% include 'tag-color.swig' %} 代码

 <div class="tag-cloud">
          <!--    <div class="tag-cloud-title">
                {{ _p('counter.tag_cloud', site.tags.length) }}
            </div>  -->
             <div class="tag-cloud-tags" id="tags">
			  {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#FFF', end_color: '#FFF'}) }}            
		  </div>
		</div>
+     {% include 'tag-color.swig' %}		

或者将上方代码直接添加到下方

将标签云放到首页

在路径：/themes/next/layout/index.swig 中

{% block content %}下面添加下方代码

{% block content %}

	<div class="tag-cloud">
	  <div class="tag-cloud-tags" id="tags">
		{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
	  </div>
	</div>
	<br>
	
	{% include 'tag-color.swig' %}

归档页美化

修改/themes/next/layout/_macro/post-collapse.swig后的代码如下：

{% macro render(post) %}

  <article class="post post-type-{{ post.type | default('normal') }}" itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      <{% if theme.seo %}h3{% else %}h2{% endif %} class="post-title">
        {% if post.link %}{# Link posts #}
          <a class="post-title-link post-title-link-external" target="_blank" href="{{ url_for(post.link) }}" itemprop="url">
            {{ post.title or post.link }}
            <i class="fa fa-external-link"></i>
          </a>
        {% else %}
            <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
              {% if post.type === 'picture' %}
                {{ post.content }}
              {% else %}
                <span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
              {% endif %}
            </a>
        {% endif %}
      </{% if theme.seo %}h3{% else %}h2{% endif %}>

      <div class="post-meta">
        <time class="post-time" itemprop="dateCreated"
              datetime="{{ moment(post.date).format() }}"
              content="{{ date(post.date, config.date_format) }}" >
          {{ date(post.date, 'MM-DD') }}
        </time>
      </div>

    </header>
  </article>

{% endmacro %}