Hexo主题优化

导读

本文主要基于 Hexo 的主题 NexT 优化，路径：./themes/next，其他主题类似。

优化

多个标签

使用[标签1, 标签2…标签n]

主页文章使用预览

找到 ./themes/next/_config.yml

c
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150


调节 length，调节文章预览长度。

修改博客字体：找到 ./themes/next/source/css/_variables/custom.styl

$font-family-headings          = Georgia, sans                             //标题，修改成你期望的字体族
$font-family-base              = "Microsoft YaHei", Verdana, sans-serif    //修改成你期望的字体族
$font-size-base                = 18px                                      //正文字体的大小
$posts-expand-title-font-weight = $font-weight-bolder                     //扩展标题

相当于覆盖了 ./themes/next/source/css/_variables/base.styl 定义！

首页增加关于

打开文件 ./themes/next/_config.yml

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

命令行操作

hexo new page "about"

打开 ./source/about/index.md

---
title: 
date: 2017-07-16 15:05:49
---

> 作    者：孙宇 | SY
> 别    名：大水猫
> 创建时间：2017-7-16

首页增加分类

打开文件 ./themes/next/_config.yml

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

命令行操作

hexo new page "categories"

打开`./source/categories/index.md`

  ```c
  ---
  title: 
  date: 2017-07-16 12:45:09
  type: "categories"
  ---

首页增加标签

打开文件 ./themes/next/_config.yml

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

命令行操作

hexo new page "tags"

打开 ./source/tags/index.md

  ---
  title: 
  date: 2017-07-16 12:43:53
  type: "tags"
  ---

增加统计访问量功能

参考：Hexo的NexT主题个性化：添加文章阅读量

增加Google、Baidu统计功能

进入目录：./themes/next/_config.yml

# Google Analytics
google_analytics: UA-102634678-1

访问 Google Analytic ，申请账户。获取ID

博客链接持久化

npm install hexo-abbrlink --save

然后修改 _config.yml

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://muasy.com
root: /
permalink: :abbrlink/
permalink_defaults:

修改头像为原形

找到文件： .\themes\next\source\css_common\components\sidebar\sidebar-author.styl

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 128px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;
  border-radius: 50%;
}

鼠标悬停在头像上旋转

找到文件：.\themes\next\source\css_common\components\sidebar\sidebar-author.styl

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
}

.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}

修改 code 代码颜色

找到 .\Hexo\themes\next\source\css_common\components\highlight\highlight.styl

code {
  padding: 2px 6px;
  word-wrap: break-word;
  color: $highlight-blue;
  background: #f9f2f4;
  border-rdius: $code-border-radius;
  font-size $code-font-size+1;
}

修改 color 属性

设置 language: zh-Hans 还是乱码

将源文件保存为 UTF-8 格式。

添加二维码

找到文件 .\Hexo\themes\next_config.yml

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/QRCode.jpg
  description: 扫一扫，用手机访问本站

开启百度自动推送

找到文件： .\Hexo\themes\next_config.yml

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

设置鼠标选中后内容前景色、背景色

找到文件：.\Hexo\themes\next\source\css_custom\custom.styl

// Custom styles.

::selection
    background #4682B4
    color #fff
::-moz-selection
    background #33a183
    color #fff
::-webkit-selection
    background #33a183
    color #fff

参考

Hexo Next主题设置和优化