前言
配置完yilia后,发现缺少一些东西,百度之下,找到了特别喜欢的主题——next。跟大家分享配置经验。
- 首先,本文是根据我自己的博客配置而写的,并不全面,其他美化配置在文末提供了相应的参考链接。欢迎浏览我的博客:destiny'Note
- 其次,本文中有部分自己的改进方案,并非全部摘自他文
我的博客原文链接:hexo + next主题高级配置
一、主题下载
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
在根目录_config.yml
文件中:
theme: next
注意:所有配置文件内,每一项配置的冒号后面都要加上空格
二、综合设置
1. 语言设置
在根目录_config.yml
文件中:
language: zh-Hans
编辑主题目录下language/zh-Hans.yml
中英文的对应关系
2. 修改字体大小、样式
在主题目录配置文件下,查找font
:
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host:
# body元素的字体设置
global:
external: true
family: Lato
size: 18
# 标题的基础字体设置
headings:
external: true
family:
size: 30
# 文章字体设置
posts:
external: true
family: 18
# logo字体设置
logo:
external: true
family:
size: 30
# 代码块字体设置
codes:
external: true
family:
size: 13
把false改为true,并修改了size的数值,单位是像素。如有需要可自行改变字体。
另外提供一种方法,供会前端的小伙伴参考:
打开\themes\next\source\css\ _variables\base.styl
文件,修改里面的字体大小
3. 主题选择
在主题配置文件中,查找scheme
:
# 主题中的主题
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini
选择你喜欢的,去掉前面的#
号,其他加上#
号。即注释掉的意思。
4. 背景的设置
在主题配置文件中,查找canvas
:
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: true
开启相应的背景,只要把对应的false
设置为true
,记得把其他都改为false
5. 修改内容区域宽度
Next 对内容的宽度的设定如下:
- 700px,当屏幕宽度 < 1600px
- 900px,当屏幕宽度 >= 1600px
- 移动设备下,宽度自适应
在主题目录下的 source\css_variables\custom.styl
文件,新增变量:
// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px
此方法不适用于 Pisces Scheme
, Pisces Scheme
编辑themes\next\source\css\_schemes\Picses\_layout.styl
文件,更改以下 css 选项定义值:
.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}
三、文章模块的美化
1. 文章中添加居中模块
文章的Markdown文件中写上:
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
&