Hexo+Next主题定制

发表于 | 更新于: | 分类于
字数统计: 2.3k | 阅读时长 ≈ 10分钟

设置主题风格

打开 themes/next/_config.yml件，搜索 scheme 关键字，将你需用启用的 scheme 前面注释 # 去除即可。

#Scheme Settings

1
2
3
4
#scheme: Muse #默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白 
#scheme: Mist #Muse 的紧凑版本，整洁有序的单栏外观 
scheme: Pisces #双栏 Scheme，小家碧玉似的清新 
#scheme: Gemini #类似 Pisces

菜单栏 menu

原生菜单栏有主页、关于、分类、标签等数个选项，但是在配置文件中是注释掉的状态，这里我们自行修改注释就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
enable: true

注意点：

  • 如果事先没有通过hexo new page <pageName>来创建页面的话，即使在配置文件中取消注释，页面也没法显示
  • 我们也可以添加自己想要添加的页面，不用局限在配置文件里提供的选择里面
  • ||后面是Font Awesome里的文件对应的名称
  • menu_icons记得选enable: true（默认应该是true）

修改移动端菜单按钮颜色

打开themes\next\source\css\_custom\custom.styl文件, 添加如下代码:

1
2
3
.btn-bar {
background-color: $black-deep;//#222
}

去除顶部黑条

打开themes\next\source\css\_custom\custom.styl文件, 添加如下代码:

1
.headband { display: none; }

个人社交信息 social

在social里我们可以自定义自己想要在个人信息部分展现的账号，同时给他们加上图标。

1
2
3
4
5
6
social:
GitHub: https://github.com/White8818 || github
E-Mail: mailto:akun8818@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook

注意点：

  • ||后面对应的名称是Font Awesome里图标的名称，如果我们选择的账号没有对应的图标（如豆瓣、知乎），我们可以在Font Awesome库里去选择自己喜欢的图标
  • 建议不要找太新的Font Awesome图标，主题关联的库版本没有那么新，很可能显示不了或者显示一个地球

头像设置

添加头像

打开themes/next/_config.yml文件，搜索Sidebar Avatar关键字，去掉avatar前面的#：

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png

或者使用本地图片,把图片放入themes/next/source/images下,修改 avatar：

1
avatar: /images/avatar.png

设置头像边框为圆形框

打开位于themes/next/source/css/_common/components/sidebar/sidebar-author.syl文件,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
.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%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}

浏览页面的时候显示当前浏览进度

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

1
2
# Scroll percent label in b2t button
scrollpercent: true

如果想把top按钮放在侧边栏,打开themes/next/_config.yml,搜索关键字 b2t,把false改为true。

1
2
3
4
# Back to top in sidebar
b2t: true
# Scroll percent label in b2t button
scrollpercent: true

添加RSS订阅

打开终端, 在你Hexo站点目录下执行如下命令：//注意不要复制$符号

1
$ npm install hexo-generator-feed --save

打开Hexo站点下的_config.yml, 添加如下配置：

1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:

主页文章添加边框阴影效果

打开themes/next/source/css/_custom/custom.styl, 向里面加代码:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 0px;
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);
}

开启版权声明

主题配置文件下, 搜索关键字post_copyright, enable改为true：

1
2
3
4
5
6
// 主页文章添加阴影效果
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

设置新建文章自动开启copyright, 即新建文章自动显示自定义的版权声明,设置 your site/scaffolds/post.md文件

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
tags:
type: "categories"
categories:
copyright: true #新增,开启
---

修改文章底部的那个带#号的标签

打开themes/next/layout/_macro/post.swig文件,搜索rel="tag">#,将 #换成<i class="fa fa-tag"></i>

1
2
3
4
5
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>

添加顶部加载条

打开themes/next/_config.yml，搜索关键字pace,设置为true,可以更换加载样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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-flash #替换更换样式

本地搜索

在你Hexo站点的根目录下执行:

1
$ npm install hexo-generator-searchdb --save

打开Hexo站点的_config.yml, 添加配置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

打开themes/next/_config.yml, 搜索关键字local_search,设置为true：

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

修改网页底部

修改图标

在图标库中找到你自己喜欢的图标 ,打开themes/next_config.yml,搜索关键字authoricon, 替换图标名


隐藏网页底部 Hexo 强力驱动

打开主题配置文件, 搜索关键字copyright, 如下:

1
2
# Footer `powered-by` and `theme-info` copyright
copyright: false

增加统计

  • 统计功能
  • 显示文章字数统计
  • 阅读时长
  • 总字数

在站点的根目录下执行：

1
$ npm i --save hexo-wordcount

打开themes/next/_config.yml，搜索关键字post_wordcount：

1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
#字数统计
wordcount: true
#预览时间
min2read: true
#总字数,显示在页面底部
totalcount: true
separated_meta: true

文章顶部显示更新时间

打开主题配置文件_config.yml ,搜索关键字updated_at设置为true：

1
2
3
4
5
6
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at: true
categories: true

修改访问URL路径

默认情况下访问URL路径为：domain/2017/08/18/关于本站,修改为 domain/About/关于本站。
编辑Hexo站点下的_config.yml文件，修改其中的permalink字段：

1
permalink: :category/:title/

新建404界面

打开终端, 在站点根目录下, 输入hexo new page 404, 默认在Hexo站点下/source/404/index.md打开新建的404界面，在顶部插入一行，写上 permalink: /404，这表示指定该页固定链接为http://"主页"/404.html。

1
2
3
4
5
6
---
title: #404 Not Found：该页无法显示
date: 2017-09-06 15:37:18
comments: false
permalink: /404
---

如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

网站标题栏背景颜色

当使用Pisces主题时，网站标题栏背景颜色是黑色的，感觉不好看，可以在source/css/_schemes/Pisces/_brand.styl中修改：

1
2
3
4
5
6
7
8
9
10
11
12
.site-meta {
padding: 20px 0;
color: white;
background: $blue-dodger; //修改为自己喜欢的颜色

+tablet() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
+mobile() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
}

但是，我们一般不主张这样修改源码的，在next/source/css/_custom目录下面专门提供了custom.styl供我们自定义样式的，因此也可以在custom.styl里面添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Custom styles.
.site-meta {//标题栏背景色
color: white;
background: rgba(255,255,255,0.5);
}

.brand {//标题颜色和鼠标选中颜色
color: $black-deep;
&:hover { color: $black-deep; }
}

.site-subtitle {//副标题颜色
color: $black-deep;
}

修改内容区域的宽度

Pisces风格时可以用下面的方法：source/css/_schemes/Pisces/_layout.styl

1
2
3
header{ width: 93%; }
.container .main-inner { width: 93%; }
.content-wrap { width: calc(100% - 260px); }

去除移动端两侧的空白区域

打开主题路径下的_config.yml文件, 找到mobile_layout_economy字段,将false改为true

添加背景图

在themes/next/source/css/_custom/custom.styl中添加如下代码：

1
2
3
4
5
6
7
body{
background:url(/images/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

各版块透明度修改

内容板块透明

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

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

菜单栏背景

还是当前文件下: .header-inner标签下background: white修改为：

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

博客根目录themes\next\source\css\_schemes\Pisces\_sidebar.styl文件.sidebar-inner标签
修改文章目录和站点概览透明度

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

参考文章:
Hexo+Next主题优化
绝配：hexo+next主题及我走过的坑

0%