Next主题美化

一、主题配置

Next主题风格

Next提供了四中主题风格scheme，可以在主题配置文件blog/themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini

博客自定义图标

默认图标 N ，Next支持修改图标

博客网站的图标可以在iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在blog/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：

添加动态背景

Next主题集成了该功能，只需要在主题配置中设置如下即可
设置菜单栏（Menu) 以添加“life” 菜单为例

在路径 hexo/source 中创建 photo文件夹，进入文件夹创建index.md，编辑一下内容，保存
photo
1
2
date: 2017-04-04 22:14:07
type: "photo"
- 添加翻译字段，打开next/language/zh-CN ，找到menu并编辑 “life: 生活”，保存退出
- 编辑图标，接着打开next/config.yml中添加 “life: /life/ || fa fa-heart”
自定义头像

将头像保存在 next/source/image中，打开主题配置文件 next/config.yml，找到 avatar

添加网易云播放器

1
2
3

<div id="music163player">
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=6584660041&auto=0&height=90"></iframe>
      </div>

新建文章时，在相同目录下创建同名文件夹（便于图片管理）
- 打开站点配置文件_config.yml，搜索post_asset_folder字段，设置其值为true
- 安装hexo-asset-image：npm install hexo-asset-image --save
- 此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹
- 只需在 md 文件里使用 ![title](图片名.jpg) ，无需路径名就可以插入图片。
文章末尾添加版权声明

查找主题配置文件themes/next/_config.yml中的`creative_commons
本地搜索 npm install hexo-generator-search

查找主题配置文件themes/next/_config.yml
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
修改文章底部的#号的标签，改为图标

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

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

文章置顶功能

移除默认安装的插件：

1	npm uninstall hexo-generator-index --save

安装新插件:

1	npm install hexo-generator-index-pin-top --save

设置置顶图标
打开/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 %}

近期文章

修改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

hexo-symbols-count-time

1	npm install hexo-symbols-count-time

You can set options of hexo-symbols-count-time in the Hexo’s _config.yml (which locates in the root dir of your blog):

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

阅读全文

在博客目录下执行

1	npm install hexo-excerpt --save

在站点配置文件_config.yml添加

excerpt:
depth: 10
excerpt_excludes: []
more_excludes: []
hideWholePostExcerpts: true

给自己的博客加上图片
1. 首先把blog（hexo）目录下的_config.yml里的psot_asset_folder:设置为true
2. 在blog（hexo）目录下执行:
  1
  npm install hexo-asset-image --save
3. 在blog（hexo）目录下Git Bash Here，运行hexo n “博客名”来生成md博客时，会在_post目录下看到一个与博客同名的文件夹。
4. 将想要上传的图片先扔到文件夹下，然后在博客中使用markdown的格式引入图片：
  1
  ![你想要输入的替代文字](xxxx/图片名.jpg)

大灰羊

Hexo博客优化

Next主题美化

一、主题配置