0%

Hexo-Next主题配置

Hexo-Next主题配置

记录本博客Next主题的修改配置。大部分内容仅适用于Next主题

一、为添加侧边栏分类

在博客根目录输入

1
hexo new page categories

编辑/source/categories/index.md

1
2
3
4
5
---
title: categories
date: 2020-03-02 12:33:16
type: "categories"
---

编辑/themes/next/_config.yml

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

完成。

二、编辑页脚信息

去除页脚的Hexo驱动信息与Next主题信息
编辑/themes/next/_config.yml

1
2
3
4
5
powered:
# 删除hexo驱动信息
enable: false
# 删除Hexo版本信息
version: false
1
2
3
4
5
theme:
# 删除主题信息
enable: false
# 删除主题版本信息
version: false

完成。

三、添加侧栏社交

编辑/themes/next/_Config.yml

1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:your@gmail.com || envelope
Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
steam: 个人资料链接 || steam

去除需要添加的社交平台的#,然后编辑链接
完成。

四、添加头像

编辑/themes/next/_config.yml

1
2
3
4
5
6
7
avatar:
#设置url连接
url:
#头像转动
rounded: false
#光标移动到头像后转动
rotated: false

完成

五、添加favicon

编辑/themes/next/_config.yml

1
2
3
4
5
6
7
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
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

修改相关url
完成

六、修改高亮样式

编辑/themes/next/_config.yml
next提供了八种样式

  • normal
  • night
  • night blue
  • night bright
  • night eighties
  • solarized
  • solarized dark
  • galactic

我选择使用night

1
highlight_theme: night

完成

七、主题中添加百度推送

编辑/themes/next/_config.yml

1
2
3
baidu_push: true
...
seo: true

完成

八、添加Pjax

出现Bug暂时停用
来到/themes/next

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

编辑/themes/next/_config.yml

1
pjax: true

完成。

九、添加全局aplayer播放器

本改动建立在 八、添加Pjax 的基础上,如果你使用了Pjax,就可实现不间断播放。并参考了Macyrate的相关文章
复制以下代码到\theme\next\layout_layout.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 引用依赖 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>

<!-- APlayer本体 -->
<div class="aplayer"
data-id="2465890057" #你的网易云歌单ID
data-server="netease" #设置网易云
data-type="playlist" #设置歌单
data-fixed="true" #吸底模式
data-autoplay="true" #设置自动播放
data-order="random" #设置播放顺序
data-volume="0.55"
data-theme="#cc543a"
date-preload="auto" >
</div>
<!--如果将本体放在body里面导致页面加载出现问题,请尝试放到body体后面-->

aplayer的属性具体设置参考请aplayer中文文档

使用时请在前面加上data-

感谢Macyrate
完成。

十、修改主题配色

参考文章
感谢周阳光
编辑/themes/next/source/css/_variables/base.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$whitesmoke   = #f5f5f5
$gainsboro = #eee //这个是边栏头像外框的颜色,
$gray-lighter = #ddd //文章中插入图片边框颜色
$grey-light = #ccc //文章之间分割线、下划线颜色
$grey = #bbb //页面选中圆点颜色
$grey-dark = #999
$grey-dim = #666 //侧边栏目录字体颜色
$black-light = #555 //修改文章字体颜色
$black-dim = #333
$black-deep = #495a80 //修改主题的颜色,这里我已经改成老蓝色了。
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #F39D01 //浏览文章时,目录选中的颜色

未完待续

欢迎关注我的其它发布渠道