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主题设置和优化