hexo-Next主题美化<一>

配置博客基本信息


在站点根目录下_config.yml中进行基础配置

我使用Notepad++打开编辑,也可以直接使用记事本,推荐Sublime Text,但是下载和安装汉化插件需要链外网

说明:

  • hexo 下的config.yml 称为站点配置文件
  • _themes/主题名 中的_config.yml 称为主题配置文件
  • 常用language
LanguageExampleCode
🇨🇳 Chinese (Simplified)简体中文zh-CN
🇹🇼 Chinese (Traditional)繁體中文zh-TW
🇭🇰 Chinese (Hong Kong)繁體中文-香港zh-HK
🇺🇸 EnglishEnglishen
🇯🇵 Japanese日本語ja
🇰🇷 Korean한국어ko

常用语言需要在主题下的language目录里检查是否含有该语言配置文件

  • 例如在NexT主题下,中文不能使用zh-Hans
    • ①可以写zh-CN
    • ②可以将主题文件下的zh-CN改名为zh-Hans

超链接颜色修改


要修改的body超链接的样式在themes\next\source\css\_common\components\post\post.styl里,在这里添加条目:

1
2
3
4
.post-body a {
color: #428BCA;//字体为蓝色
font-weight: bold;//字体为粗体,不想使用可以删除
}

也可以添加如下文本链接为蓝色,鼠标放上去为橙色

1
2
3
4
5
6
7
8
9
10
.post-body p a {
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

新连接图示

菜单设置


在主题配置文件下找到以下代码:

1
2
3
4
5
6
7
8
9
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 //公益404

需要哪个就把取消注释关掉(就是删除前面的#

NexT分主题设置


同样在主题配置文件中,找到Scheme Settings

1
2
3
4
5
# Schemes
scheme: 选择你喜欢的主题
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

侧栏设置


侧栏设置包括:侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等

打开 主题配置文件 找到sidebar字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sidebar:
# Sidebar Position - 侧栏位置(只对Pisces | Gemini两种风格有效)
position: left //靠左放置
#position: right //靠右放置

# Sidebar Display - 侧栏显示时机(只对Muse | Mist两种风格有效)
#display: post //默认行为,在文章页面(拥有目录列表)时显示
display: always //在所有页面中都显示
#display: hide //在所有页面中都隐藏(可以手动展开)
#display: remove //完全移除

offset: 12 //文章间距(只对Pisces | Gemini两种风格有效)

b2t: false //返回顶部按钮(只对Pisces | Gemini两种风格有效)

scrollpercent: true //返回顶部按钮的百分比

头像设置


打开 主题配置文件 找到Sidebar Avatar字段

1
2
3
4
5
6
7
url: /images/avatar.gif
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true

这是头像的路径,只需把你的头像命名为header.jpg(随便命名)放入themes/next/source/images中,将avatar的路径名改成你的头像名就OK啦!

也可以直接使用图片链接例如:http://example.com/avatar.png

在Next7.X版本下可以:

rounded:决定是否使用圆形图像(true/false)

rotated:决定是否使用头像选择(true/false)

opacity:头像透明度(0~1)

如果是椭圆的是因为原图片不是方形的,找一个宽高像素一样的图片即可,之前版本不知道支持不支持

代码高亮设置


  1. 站点配置文件_config.yml中搜索highlight修改如下
1
2
3
4
5
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:
  1. 站点配置文件_config.yml中搜索highlight修改highlight_theme: normalnormal改为你喜欢的 :
  • normal
  • night
  • night eighties
  • night blue
  • night bright

添加阅读全文按钮,和其按键样式修改。


是文章不再全部展示,添加阅读文章选项,选择阅读。

方法一:

1
在你的文章中添加<!--more-->,你想再哪儿截止就在哪儿添加

方法二:

在主题配置文件_config.yml 下搜索auto_excerpt

1
2
3
auto_excerpt:
enable: true //改为true即启用
length: 50 //多少字开始文章折叠,自行设置

同时使用方法1和方法2时会以一为准

修改样式:

找到themes\next\source\css\_custom\custom.styl文件,添加下面代码块:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// [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/*/source/css/_custom/custom.styl ,在里面写下如下代码:

1
2
3
.site-meta {
background: #FF8C00; //修改为自己喜欢的颜色
}

点击侧栏头像返回主页


打开/themes/next/layout/_macro/sidebar.swig 找到下面代码

1
2
3
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />

在其前后加上<a href="/"></a>即可,如下:

1
2
3
4
5
<a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />
</a>

添加分类模块


1、新建一个分类页面

1
$ hexo new page categories

2、你会发现你的source文件夹下有了categorcies/index.md,打开index.md文件进行编辑

1
2
3
4
title: 分类
date: 你的时间,会自动创建.
type: "categories"
comments: false

3、打开 主题配置文件 找到menu,将categorcies取消注释
4、把文章归入分类只需在文章的顶部标题下方添加categories字段,即可自动创建分类名并加入对应的分类中
例:

1
2
title: 分类测试文章标题
categories: 分类名

添加标签模块


1、新建一个标签页面

1
$ hexo new page tags

2、你会发现你的source文件夹下有了tags/index.md,打开index.md文件进行编辑

1
2
3
4
title: 标签
date: 你的时间,会自动创建.
type: "tags"
comments: false

3、打开 主题配置文件 找到menu,将tags取消注释
4、把文章添加标签只需在文章的顶部标题下方添加tags字段,即可自动创建标签名并归入对应的标签中
举个栗子:

1
2
3
4
5
title: 标签测试文章标题
tags:
- 标签1
- 标签2
...

添加多个标签注意不要在第一行写

添加关于模块


1、新建一个关于页面

1
$ hexo new page about

2、你会发现你的source文件夹下有了about/index.md,打开index.md文件即可编辑关于你的信息,可以随便编辑。
3、打开 主题配置文件 找到menu,将about取消注释

4、进行内容编辑

添加搜索功能


1、安装 hexo-generator-searchdb 插件

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

2、打开 站点配置文件 找到Extensions在下面添加

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

3、打开 主题配置文件 找到Local search,将enable设置为true

个人社交连接


修改theme/_config.yaml文件下的social属性,按照格式设置即可:

例:

1
2
3
social: 
GitHub: https://github.com/yourname || github
Bilibili: https://space.bilibili.com/yournum || bilibili

||右边为FontAwesome图标名称可自行更改

图标取自https://fontawesome.com/icons?from=io

友情链接添加


主题配置文件_config.yml下搜索links

注意设置:

1
2
links_layout: block         # 一行显示一个链接
links_layout: inline #紧凑显示链接

然后在下面自行添加好友的链接,或者随意:

1
2
3
4
5
6
links:
#Title: http://example.com
百度: https://www.baidu.com/
谷歌: https://www.google.com/?hl=zh_CN
知乎: https://www.zhihu.com/
掘金: https://juejin.im/

新建文章模板更改


在根目录下scaffolds文件夹打开post.md

1
2
3
4
5
6
title: {{ title }}//题目
date: {{ date }}//日期
tags: //标签
categories: //分类
copyright: true //版权信息说明
photos: //主页文章显示图片

修改文章底部标签的符合“#”


修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将 # 换成<i class="fa fa-tag"></i>


去别的网站下载或者制作ioc图标32*32,并将图标名称改为favicon.ico,然后把图标放在/themes/next/source/images里,并且修改主题配置文件:

找到字段favicon:

1
2
3
4
5
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

可以看到有四种效果,一般我们只需将medium换成我们自己图标路径就行了。

使用动态背景


在主题配置文件_config.yml 下搜索canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use ',' to separate 颜色
opacity: 0.5 # the opacity of line: 0~1 透明度我改成1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines 修改线的数量 我改成240

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

需要启用哪个,哪个就改成true

网上都是这么说的,但是我使用后没反应。后来发现得下载下来才可以。

1.进入theme/next目录

2.git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

3.从新开启网页即可。

其他三种也需要下载才能使用

使用加载进度条


同样类似动态背景,我们直接启用config是不行的,需要先下载。

1.进入theme/next目录

2.git clone https://github.com/theme-next/theme-next-pace source/lib/pace

3.在主题配置文件_config.yml 下搜索pace

1
2
3
4
5
6
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
pace_theme: pace-theme-center-atom

pace: 改为true

pace_theme: 从上面选择其中一个

修改博客底部显示


隐藏网页底部powered By Hexo

打开themes/next/layout/_partials/footer.swig,直接隐藏以下代码即可,建议不要删除,即添加<!---->
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--{% 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') }} &mdash; {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://github.com/theme-next/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}-->

修改网页底部桃心

还是打开themes/next/layout/_partials/footer.swig,找到字段with-love;

1
2
3
<span class="with-love" id="animate">
<i class="fa fa-{{ theme.footer.icon.name }}"></i>
</span>

然后在图标库中找到你想要的图标,修改如下:

1
2
3
<span class="with-love" id="animate">
<i class="fa fa-heart"></i>
</span>

其中heart为图标名字,只要icon-后面的就行了;

实现网站底部访问量显示和全站字数显示

打开主题配置文件_config.yml,修改如下代码:

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

使用该方法是以icon图标显示。我们也可以直接修改\layout\_partials\footer.swig文件。

  1. 在文件第一行添加
1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  1. 在最后添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 不蒜字统计 -->
<div>
<i class="fa fa-user-md"></i>
<span id="busuanzi_container_site_uv">
访问人数:<span id="busuanzi_value_site_uv"></span>
</span>&nbsp;|&nbsp;

<i class="fa fa-eye"></i>
<span id="busuanzi_container_site_pv">
总访问量:<span id="busuanzi_value_site_pv"></span>
</span>&nbsp;|&nbsp;

<!-- 添加博客全站总字数统计-->
<i class="fa fa-pencil"></i>
<span class="post-count">博客全站共 {{ totalcount(site) }} 字</span>
</div>

{% if theme.footer.custom_text %}
<div class="footer-custom">{#
#}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}

文字统计功能需要安装npm install hexo-wordcount --save

让心变红并且跳起来

首先修改主题配置文件:

1
2
文件位置:~/hexo/themes/next/_config.yml
copyfooter: icon: user修改成heart

然后修改footer.swig

1
2
文件位置:~/hexo/themes/next/layout/_partials/footer.swig
copy<span class="with-love">修改成<span class="with-love" id="heart">

接着编辑custom.styl

1
文件位置:~/hexo/themes/next/source/css/_custom/custom.styl

在其中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 自定义页脚跳动的心样式
@keyframes heartAnimate
{
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart
{
animation: heartAnimate 1.33s ease-in-out infinite;
}

.with-love
{
color: rgb(255, 0, 0);
}

其中color的值可以改成你自己喜欢的,RGB颜色这里:https://tool.oschina.net/commons?type=3

显示网站运行时间

themes/layout/_parrials/footer.swing 中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<span>本站已运行<span id="showDays"></span></span>
<script>
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var birthDay = Date.UTC(2019,08,01,14,00,00); // 这里设置建站时间
setInterval(function() {
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = now - birthDay;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById('showDays').innerHTML=""+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
}, 1000);
</script>

文末添加版权声明


主题配置文件_config.yml下搜索creative_commons:

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false
post: false
language:

将post后面改为true

之后在站点配置文件_config.yml下修改url,改成你的域名,否则版权本文链接显示不是你的站点名:

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://lyxf.live
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

文末添加结束语


  1. 在路径\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下内容:
1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #555;font-size:14px;">-------------------本文结束 <i class="fa fa-heart"></i> 感谢阅读-------------------</div>
{% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件,在end post body后加代码:

1
2
3
4
5
6
7
8
9
10
{#####################}
{### END POST BODY ###}
{#####################}
//添加
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
//结束

需要重新hexo s 才会生效

效果如下:

文章浏览进度显示和回到顶部功能


在主题配置文件_config.yml下找back2top:

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false

全部改为true即可。

图片放大查看功能


打开主题配置文件_config.yml,搜索fancybox字段,设置其值为true进入到theme/next/文件夹下,打开git bash,

1
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

给页面添加背景图片


themes\next\source\css\_custom目录下custom文件添加

1
2
3
4
5
6
7
8
9
10
11
body {
background: url(填写背景图链接) no-repeat;
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: rgba(0, 0, 0, 0.5);
}

页面透明度修改


themes\next\source\css\_custom目录下custom文件添加

1
2
3
4
5
6
7
8
9
.header-inner{
opacity: 0.8;
}
.main-inner {
// margin-top: 60px;
// padding: 60px 60px 60px 60px;

opacity: 0.8;
}

.header-inner下为侧边栏透明度

.main-inner下为主页面透明度

添加页面阴影


themes\next\source\css\_custom目录下custom文件添加

1
2
3
4
5
6
7
8
9

// 主页文章添加阴影
.post {
margin-top: 20px; //大小自行调整
margin-bottom: 20px; //大小自行调整
padding: 10px; //大小自行调整
-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\post.swig文件中categories代码区域后面添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">字数统计:</span>
<span class="post-count">{{ wordcount(post.content) }}(字)</span>
</span>

<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">阅读时长≈</span>
<span class="post-count">{{ min2read(post.content) }}(分)</span>
</span>

小型代码块颜色修改


打开\themes\next\source\css\ _variables\base.styl文件,找到下列代码段

1
2
3
4
5
6
7
8
// Code & Code Blocks
// --------------------------------------------------
$code-font-family = $font-family-monospace
$code-font-size = 14px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 3px
$code-foreground = #fc6423
$code-background = #FFFACD

$code-foreground = #fc6423指代码颜色

$code-background = #FFFACD指背景颜色

上面是我修改后的颜色,可以自行根据颜色代码修改。

添加点击爆炸效果


  1. 复制代码点击这里

  2. 新建记事本,粘贴代码,改名为firework.js

  3. 放入themes\next\source\js文件夹中

  4. 打开\themes\next\layout\_layout.swig 文件。在最后,但是在</body>前面添加

    1
    2
     <!-- 页面点击礼花效果 -->
    <script type="text/javascript" src="/js/firework.js"></script>
  5. 重新hexo s即可

需要不同效果只需要获取代码更改firework.js即可

爆炸特效:点击这里

爱心特效:点击这里

文字特效:点击这里(PS:文字可自己更改)

Pisces/Gemini主题修改主题内容宽度


source/css/_schemes/Picses/_layout.styl文件末尾添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 以下为新增代码!!
header{ width: 90% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}

几个百分比可以自行更改。

后来我感觉原版就挺好就改回去了

在页面右上角或者左上角实现fork me on github


  1. 选择样式GitHub Ribbons,

  2. 修改图片跳转链接,将<a href="https://github.com/you">中的链接换为自己Github链接:

  3. 打开 themes/next/layout/_layout.swig 文件,把代码复制到<div class="headband"></div>下面。

文内跳转功能”锚点”的设置


语法:

1
2
3
<p id="XXX">应该跳转到的地方的文字</p>

<a href="#XXX">你的跳转按钮的文字</a>

两个XXX为相同的,可以理解为做一个对接。相同的才会跳转,这样一篇文章可以使用多个锚点,只需要更改XXX即可

测试跳转到上个问题添加爆炸效果

1
2
3
<p id="test">添加点击爆炸效果</p>

<a href="#test">点我查看</a>

样例如下:点我查看

部署在github上开启HTTPS


在你的博客仓库下打开setting选项,找到Enforce HTTPS,

打钩即可。

因为感觉会影响加载速度,对百度爬取不友好,暂时不考虑开启HTTPs,等换个部署,配置优化加载后再考虑

hexo链接优化


之前的permalink是这样的permalink: :year/:month/:day/:title/四级url太过繁琐

我们来使用hexo-abbrlink插件来优化。

  1. 在根目录下npm install hexo-abbrlink --save

  2. 在站点配置文件_config.yml中修改permalink为如下:

    1
    2
    3
    4
    5
    permalink: :abbrlink/
    abbrlink:
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex
    permalink_defaults:

    之后我们的链接就会是例如这样:http://lyxf.live/posts/2063/简单许多

感谢


最后特别感谢这些文章的帮助:

1.关于Hexo6.0搭建个人博客(主题优化进阶篇)

2.Hexo主题 —— NexT优化

3.Hexo的Next主题详细配置

4.【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析

5.Hexo博客Next主题优化总结

6.hexo的next主题个性化配置教程

7.Hexo Next 博客自定义配置

8.关于Hexo6.0搭建个人博客(主题优化高级篇)

9.Hexo框架下用NexT(v7.0+)主题美化博客

10.hexo-next主题下的美化

11.NexT主题的配置和优化指南

12.Hexo+NexT 打造一个炫酷博客

14.Hexo 添加Aplayer播放器

15.Hexo NexT主题中添加网页音乐播放器功能

16.Hexo搭建个人博客系列

17.打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~
  • 本文作者: 峻源
  • 本文链接: http://lyxf.live/posts/2063/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!