NexT的主题设定与配置
本篇文章将介绍NexT
的主题设定与配置
在
Hexo
中有两份主要的配置文件,其名称都是_config.yml
。其中,一份位于站点根目录下,主要包含Hexo
本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
我们约定,将前者称为 站点配置文件,后者称为 主题配置文件
主题设定
选择 Scheme
Scheme
是 NexT
提供的一种特性,借助于Scheme``,NexT
为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme
之间共用。目前 NexT
支持三种 Scheme
,他们是:
-Muse
- 默认 Scheme
,这是NexT
最初的版本,黑白主调,大量留白
- Mist
- Muse
的紧凑版本,整洁有序的单栏外观
- Pisces
- 双栏 Scheme
,小家碧玉似的清新
Scheme
的切换通过更改主题配置文件,搜索scheme
关键字。 你会看到有三行 scheme
的配置,将你需用启用的 scheme
前面注释 # 去除即可。
选择 Pisces Scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces
设置 语言
编辑站点配置文件, 将 language
设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:
language: zh-Hans
设置 菜单
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是Font Awesome
提供的图标,Font Awesome
提供了 600+
的图标,可以满足绝大的多数的场景,同时无须担心在Retina
屏幕下 图标模糊的问题。
编辑主题配置文件
,修改以下内容:
1、 设定菜单内容,对应的字段是menu
。 菜单内容的设置格式是:item name
:link
。其中 item name
是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。
menu:home: /archives: /archives#about: /about#categories: /categoriestags: /tags#commonweal: /404.html
若你的站点运行在子目录中,请将链接前缀的
/
去掉
NexT
默认的菜单项有(标注 的项表示需要手动创建这个页面):
键值 | 设定值 | 显示文本(简体中文) |
---|---|---|
home | home: / | 主页 |
archives | archives: /archives | 归档页 |
categories | categories: /categories | 分类页 |
tags | tags: /tags | 标签页 |
about | about: /about | 关于页面 |
commonweal | commonweal: /404.html | 公益 404 |
2、 设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo
在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在NexT
主题目录下的languages/{language}.yml
({language
} 为你所使用的语言)。
以简体中文为例,若你需要添加一个菜单项,比如 something
。那么就需要修改简体中文对应的翻译文件languages/zh-Hans.yml
,在 menu
字段下添加一项:
menu:home: 首页archives: 归档categories: 分类tags: 标签about: 关于search: 搜索commonweal: 公益404something: 有料
3、 设定菜单项的图标,对应的字段是menu_icons
。 此设定格式是item name: icon name
,其中 item name
与上一步所配置的菜单名字对应,icon name
是 Font Awesome
图标的 名字。而enable
可用于控制是否显示图标,你可以设置成false
来去掉图标。
menu_icons:enable: true# Icon Mapping.home: homeabout: usercategories: thtags: tagsarchives: archivecommonweal: heartbeat
在菜单图标开启的情况下,如果菜单项与菜单未匹配(没有设置或者无效的
Font Awesome
图标名字) 的情况下,NexT 将会使用 作为图标。
设置侧栏
默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改 主题配置文件
中的 sidebar
字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
1、设置侧栏的位置,修改 sidebar.position
的值,支持的选项有:
left
- 靠左放置right
- 靠右放置
sidebar:position: left
2、 设置侧栏显示的时机,修改sidebar.display
的值,支持的选项有:
post
- 默认行为,在文章页面(拥有目录列表)时显示always
- 在所有页面中都显示hide
- 在所有页面中都隐藏(可以手动展开)remove
- 完全移除
sidebar:display: post
设置 头像
编辑 主题配置文件
, 修改字段 avatar
, 值设置成头像的链接地址。其中,头像的链接地址可以是:
地址 | 值 |
---|---|
完整的互联网 |
URI :http://example.com/avatar.png
|
站点内的地址 |
将头像放置主题目录下的source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png 或者 放置在 source/images/ 目录下 , 配置为:avatar: /images/avatar.png
|
avatar: http://example.com/avatar.png
设置 作者昵称
编辑 站点配置文件, 设置author
为你的昵称。
站点描述
编辑 站点配置文件, 设置 description
字段为你的站点描述。站点描述可以是你喜欢的一句签名:)
## 主题配置
设置RSS
NexT
中RSS
有三个设置选项,满足特定的使用场景。 更改主题配置文件
,设定 rss
字段的值:
-false
:禁用 RSS
,不在页面上显示RSS
连接。
- 留空:使用Hexo
生成的Feed
链接。 你可以需要先安装hexo-generator-feed
插件。
- 具体的链接地址:适用于已经烧制过Feed
的情形。
添加「标签」页面
新建「标签」页面,并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签,若你的所有文章都未包含标签,此页面将是空的。 底下代码是一篇包含标签的文章的例子:
title: tags
tags:
- Testing
- Another Tag
---
新建页面
在终端窗口下,定位到Hexo
站点目录下。使用hexo new page 新建一个页面
,命名为 tags
:
$ cd your-hexo-site
$ hexo new page tags
设置页面类型
编辑刚新建的页面,将页面的类型设置为tags
,主题将自动为这个页面显示标签云。页面内容如下:
title: 标签
date: 2018-2-22 23:39:04
type: "tags"
---
修改菜单
在菜单中添加链接。编辑主题配置文件
, 添加 tags
到 menu
中,如下:
menu:home: /archives: /archivestags: /tags
注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段
comments
并将值设置为false
,如:
title: 标签
date: 2018-2-22 23:39:04
type: "tags"
comments: false
---
添加「分类」页面
新建「分类」页面,并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类,若你的所有文章都未包含分类,此页面将是空的。 底下代码是一篇包含分类的文章的例子:
title: categories
categories: Testing
---
新建页面
在终端窗口下,定位到 Hexo
站点目录下。使用 hexo new page 新建一个页面
,命名为categories
:
$ cd your-hexo-site
$ hexo new page categories
设置页面类型
编辑刚新建的页面,将页面的type
设置为 categories
,主题将自动为这个页面显示分类。页面内容如下:
title: categories
date: 2018-2-22 23:39:04
type: "categories"
---
修改菜单
在菜单中添加链接。编辑主题配置文件
, 添加 categories
到 menu
中,如下:
menu:home: /archives: /archivescategories: /categories
注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段
comments
并将值设置为false
,如:
title: categories
date: 2018-2-22 23:39:04
type: "categories"
comments: false
---
设置字体
NexT
开放了 5 个特定范围的字体设定,他们是:
- 全局字体:定义的字体将在全站范围使用
- 标题字体:文章内标题的字体
(h1, h2, h3, h4, h5, h6)
- 文章字体:文章所使用的字体
Logo
字体:Logo
所使用的字体
= 代码字体: 代码块所使用的字体
各项所指定的字体将作为首选字体,当他们不可用时会自动Fallback
到NexT
设定的基础字体组:- 非代码类字体:
Fallback
到PingFang SC
,Microsoft YaHei
,sans-serif
- 代码类字体:
Fallback
到consolas
,Menlo
,PingFang SC
,Microsoft YaHei
,monospace
另外,每一项都有一个额外的external
属性,此属性用来控制是否使用外链字体库。 开放此属性方便你设定那些已经安装在系统中的字体,减少不必要的请求(请求大小)。
font:enable: true# 外链字体库地址,例如 //fonts.googleapis.com (默认值)host:# 全局字体,应用在 body 元素上global:external: truefamily: Monda# 标题字体 (h1, h2, h3, h4, h5, h6)headings:external: truefamily: Roboto Slab# 文章字体posts:external: truefamily:# Logo 字体logo:external: truefamily: Lobster Twosize: 24# 代码字体,应用于 code 以及代码块codes:external: truefamily: PT Mono
设置代码高亮主题
NexT
使用 Tomorrow Theme
作为代码高亮,共有5款主题供你选择。NexT
默认使用的是 白色的 normal
主题,可选的值有normal
,night
,night blue
, night bright
,night eighties
:
更改 highlight_theme
字段,将其值设定成你所喜爱的高亮主题,例如:
高亮主题设置示例
# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
侧边栏社交链接
侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在主题配置文件
中。
1、 链接放置在 social
字段下,一行一个链接。其键值格式是 显示文本: 链接地址
。
# Social links
social:GitHub: https://github.com/your-user-nameTwitter: https://twitter.com/your-user-name微博: http://weibo.com/your-user-name豆瓣: http://douban.com/people/your-user-name知乎: http://www.zhihu.com/people/your-user-name# 等等
2、 设定链接的图标,对应的字段是 social_icons。其键值格式是 匹配键:Font Awesome
图标名称, 匹配键 与上一步所配置的链接的 显示文本 相同(大小写严格匹配),图标名称 是Font Awesome
图标的名字(不必带 fa- 前缀)。 enable
选项用于控制是否显示图标,你可以设置成 false 来去掉图标。
# Social Icons
social_icons:enable: true# Icon MappingsGitHub: githubTwitter: twitter微博: weibo
开启打赏功能
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。 只需要主题配置文件
中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image
友情链接
编辑主题配置文件
添加:
# title
links_title: Links
links:MacTalk: http://macshuo.com/Title: http://example.com/
站点建立时间
这个时间将在站点的底部显示,例如© 2018
。编辑主题配置文件
,新增字段 since。
since: 2018
订阅微信公众号
在每篇文章的末尾显示微信公众号二维码,扫一扫,轻松订阅博客。
在微信公众号平台下载您的二维码,并将它存放于博客source/uploads/
目录下。
然后编辑主题配置文件
,如下:
# Wechat Subscriber
wechat_subscriber:enabled: trueqcode: /uploads/wechat-qcode.jpgdescription: 欢迎您扫一扫上面的微信公众号,订阅我的博客!
设置「动画效果」
NexT
默认开启动画效果,效果使用JavaScript
编写,因此需要等待 JavaScript
脚本完全加载完毕后才会显示内容。 如果您比较在乎速度,可以将设置此字段的值为 false
来关闭动画。
编辑 主题配置文件
, 搜索 use_motion
,根据您的需求设置值为 true
或者 false
即可:
use_motion: true # 开启动画效果
use_motion: false # 关闭动画效果
NexT的主题设定与配置相关推荐
- next主题设定代码高亮格式
next主题设定代码高亮格式 @(Hexo+Github) 新版的Next主题卡得很严,记录如下. 首先需要动的地方有: 主题的_config.yml文件 站点的_config.yml文件 代码块的语 ...
- IntelliJ IDEA 2021 主题 图标 这样配置 ,让你的IDEA好看到爆炸!
这样设置,让你的 IDEA 好看到爆炸! 2021 IntelliJ IDEA 配置 一.主题 二.图标 三.字体 四.背景图 五.其他 六.最后 今天我们来分享几个美化 IDEA 设置技巧,让你的 ...
- hexo博客matery主题的个性化配置
文章目录 一.matery主题的下载与安装 二.基本配置 1.根目录下的 `_config.yml` 1.1. title 1.2. deploy与theme 2.themes目录下的`_config ...
- Hexo中next主题的个性化配置
next主题常用配置 一.主题常用配置 1. 更换主题(Scheme Setting) 2. 菜单设置(Menu Settings) 3. 侧边栏设置(Sidebar Settings) 4. 侧边栏 ...
- Sencha 项目多语言和多主题的 build 配置
Build Profiles 多样化 build 当一个 Sencha 应用需要多样化,比如多个主题的时候,可以利用 Build Profiles 配置不同的构建参数.实现方式是在 app.json ...
- 搭建自己的技术博客系列(六)酷炫主题icarus常用配置整合版,快速搞定博客首页
_config.xml 这里首先要知道在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml,它们均是用于站点配置使用的.其中,一份位于站点根目录下(比如我的:D:\h2pl.git ...
- Sublime Text 3之soda超酷主题安装及配置方法
soda主题是非常漂亮的,下面介绍配制方法: 1. 用package control下载Theme - Soda主题,一定要用VPN,否则可能会失败: 2. 在菜单 Preferences -> ...
- idea紫色主题+背景图配置
文章目录 更换紫色主题: 设置背景图片 修改背景图参数 记录个人常用的idea界面配置 更换紫色主题: 在Marketplace里添加插件:Dracula Theme,如下: 设置背景图片 修改背景图 ...
- oh-my-zsh主题power10k安装配置教程
安装一个好看的 zsh 主题,编辑 ~/.zshrc 文件 : git clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git ${ZS ...
最新文章
- 沈向洋博士:三十年科研路,我踩过的那些坑
- 阿里云ECS使用SSH连接CentOS 6.9经常断线的问题解决:OperationTimedOut
- js插件---webuploader 使用(lavarel中使用)
- 【跃迁之路】【497天】程序员高效学习方法论探索系列(实验阶段254-2018.06.17)...
- C#反序化json字符串,不用区分大小写
- Windows 10 周年更新正式版下载 + win10 快捷键
- 使用GetProcAddress获取ZwUnmapViewOfSection函数指针
- VTK修炼之道78:交互与拾取_点拾取
- 通过反射获取方法返回的类型
- java锁以及双重检查
- WCF分布式开发步步为赢系列
- oracle存储sql片段引入_强大的跨数据库访问组件 UniDAC使用教程:注释和SQL函数...
- web浏览器进化简史
- SQLITE3 使用总结(1)【ZT】
- 有时间依存效应或时间依存风险因素的生存分析
- Delphi2007企业版破解
- php ajax mysql视频教学视频_PHP入门教程之AJAX 与 MySQL
- office 2016 install(office2016组件自定义安装程序) v5.9.3中文绿色版
- Excel 高级筛选实现多条件筛选数据
- MFC中afx_msg是什么