Hexo配置
Hexo的配置主要在Hexo根目录下的_config.yml文件里,称为站点配置文件,使用YAML语法。YAML 是一种简洁的非标记语言,基本规则如下:
- 大小写敏感
- 使用缩进表示层级关系
- 禁止使用tab缩进,只能使用空格键
- 缩进长度没有限制,只要元素对齐就表示这些元素属于一个层级
- 使用#表示注释
- 字符串可以不用引号标注
网站基本设置
打开_config.yml文件,最上面就是网站的基本信息设置:
# Site
title: # The title of your website
subtitle: # The subtitle of your website
description: # The description of your website
author: # Your name
language: # The language of your website
timezone:
- title:网站标题
- subtitle:网站副标题
- description:用于SEO,告诉搜索引擎网站的简单描述
- author:用于主题显示文章的作者
- language:网站使用的语言,中文建议使用zh-CN
- timezone:网站时区。Hexo 默认使用您电脑的时区。比如:Asia/Shanghai, Japan, 和 UTC 。
特别要注意英文冒号后要跟一个空格,否则设置不会生效!!!
网址设置
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/child
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
- url:网址域名
- root:网站根目录
- permalink:文章的永久链接格式,默认::year/:month/:day/:title/
- permalink_defaults:永久链接中各部分的默认值
Hexo中文章永久链接默认为:sitename/year/mounth/day/title,由于url层级过多爬虫不容易爬到文章,所以建议将文章永久链接缩简为:sitename/title,利于SEO。
写作设置
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
- new_post_name:新文章的文件名称,默认:title.md
- default_layout:预设布局,默认post
- auto_spacing:在中文和英文之间加入空格,默认false
- titlecase:把标题转换为 title case,默认false
- external_link:在新标签中打开链接 ,默认true
- filename_case:把文件名称转换为 (1) 小写或 (2) 大写,默认0
- render_drafts:显示草稿,默认false
- post_asset_folder:启动Asset文件夹,默认false
- relative_link:把链接改为与根目录的相对位址,默认false
- future:显示未来的文章,默认true
- highlight:代码块的设置
启动Asset文件夹代表source文件夹中除了文章以外的所有文件,例如图片、CSS、JS文件等。如果文章中只有少量图片,那最简单的方法就是将它们放在source/images文件夹中,然后通过类似于下面的方法访问它们。
![](/images/image.jpg)
扩展设置
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
- theme:当前主题名称。值为false时禁用主题
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
- deploy:部署部分的设置
这部分配置请参考使用Hexo搭建我的博客otuki.topHexo启动中的配置。
NexT配置
接下来就到了NexT主题的配置,在 themes/next/ 目录下也有一个_config.yml文件,里面包含了NexT主题的设置,成为主题配置文件。
NexT的安装
下载主题可以直接使用Git,简单方便。Git Bash下定位到Hexo站点目录下:
git clone https://github.com/iissnan/hexo-theme-next themes/next
直接克隆仓库,之后可以使用git pull命令更新。
然后打开站点配置文件,找到theme字段,将值改为NexT。
选择Schema
Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:
- Muse
- Mist
- Pisces
- Gemini
打开主题配置文件,找到Schemes部分,在要启用的Schemes前面将注释#去掉即可。
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
主菜单设置
打开主题配置文件,找到menu字段,格式是: Key: /link/ || icon。其中key字段不会在页面上直接显示,而是用来匹配相应的图标和翻译。
menu:
home: / || home
archives: /archives/ || archive
categories: /categories/ || th
tags: /tags/ || tags
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
其中除了home和archives之外的页面需要手动创建。
菜单里目标所对应的图标和翻译均可修改,其中图标需访问http://www.fontawesome.com.cn找到图标的名字,修改icon部分,修改翻译则需要打开themes/next/languages下对应语言的配置文件,修改其中的翻译。以简体中文为例:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
修改其中的中文翻译即可更改页面上显示的文字。
侧边栏设置
侧边栏设置在主题配置文件中的sidebar字段。在默认情况下只会在文章有目录列表时显示,并位于右侧,修改position可更改出现的位置,修改display可更改出现的时机。
sidebar:
#position: left
position: right
display: post
#display: always
#display: hide
#display: remove
头像设置
打开主题配置文件找到avatar字段,将url值设置为头像的链接,这里的链接可以是完整的互联网url,也可以是站点内的地址,例如:
#互联网url:
http://example.com/avatar.png
#站内地址:
/images/avatar.png
之后还可以设置头像是否为圆形,头像的透明度(0-1),以及头像是否旋转。
图标设置
打开主题配置文件找到favicon字段,添加图标的地址。这里有小号,中号,apple touch,safari标签,安卓,微软浏览器六个不同的变量,可以存放六个不同的图标文件地址,以适用于不同场景。
favicon:
#small: /images/favicon-16x16-next.ico
#medium: /images/favicon-32x32-next.ico
#apple_touch_icon: /images/apple-touch-icon-next.ico
#safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
页脚设置
在主题配置文件中的footer字段里,包含一些页脚显示的设置。
- since:网站开始年份
- icon:作者图标
- powered:Hexo链接推广及版本
- theme:主题链接推广及版本
- beian:网站icp备案信息
版权声明
NexT主题配置文件中内置了知识共享署名4.0国际许可的设置。找到creative_commons字段,在license中设置共享类型即可,目前有以下几种类型:
#署名
CC BY
#署名-相同方式共享
CC BY-SA
#署名-禁止演绎
CC BY-ND
#署名-非商业性使用
CC BY-NC
#署名-非商业性使用-相同方式共享
CC BY-NC-SA
#署名-非商业性使用-禁止演绎
CC BY-NC-ND
还可以设置是否在侧边栏和文章末尾显示:
sidebar: true
post: true
社交链接
NexT主题还包含了一些常用社交平台的链接设置:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:youremail || 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
#VK Group: https://vk.com/yourname || vk
#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
紧跟着下面有链接图标的设置:
enable: true #是否启用社交链接
icons_only: false #是否只显示图标
transition: false #是否有过渡效果
打赏功能设置
随着越来越多的平台支持打赏功能,NexT也加入了相应的代码:
reward:
enable: false
comment: thank you!
#wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png
默认会让字体闪动,不太喜欢的话可以去除。打开 themes\next\source\css_common\components\post\post-reward.styl,将字体闪动部分的代码注释掉:
//#QR > div:hover p {
// animation: roll 0.1s infinite linear;
// -webkit-animation: roll 0.1s infinite linear;
// -moz-animation: roll 0.1s infinite linear;
//}
动态背景
目前NexT支持两类动态背景:canvas_nest和JavaScript 3D library。
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: '255,255,255' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
这两种动态背景都需要先克隆git仓库:
cd themes/next
#canvas_nest
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
#JavaScript 3D library
git clone https://github.com/theme-next/theme-next-three source/lib/three
然后再进行设置。
文章评论
NexT支持多款文章评论系统,如Disqus,畅言,Valine,LiveRe,Gitment,Gitalk等。这里以Valine为例。
首先,前往https://leancloud.cn注册用户并登录。然后创建应用,然后找到设置-应用Key,复制App ID和App Key。
打开主题配置文件,搜索valine,将App ID和App Key填入对应行,自定义placeholder的内容,这个内容会显示在评论框中。
访问统计
访问统计也有多种选择,不蒜子,百度统计,谷歌分析,leancloud等,其中不蒜子和leancloud是可以显示在页面上的。因为之前我使用leancloud的Valine评论系统,已经注册了leancloud的帐号,访问统计也使用leancloud好了。
首先前往leancloud登录,进入应用,如果没有的话需要先创建一个应用。然后点击“存储”,“创建Class”,名称为Counter。
如果使用了Valine评论系统,可以直接将Valine字段里的visitor设置为true即可。如果没有使用Valine,则需要前往设置-应用Key,复制App ID和App Key,填入leancloud_visitors字段里的app_id和app_key中。
leancloud_visitors:
enable: false
app_id:
app_key:
搜索功能
文章一多,想找出某篇文章就离不开搜索功能了。NexT内置本地站内搜索功能。
安装插件
npm install hexo-generator-searchdb --save
修改站点配置文件
search:
path: search.xml
field: post
format: html
limit: 10000
修改主题配置文件
local_search:
enable: true
浏览进度设置
为了显示浏览的进度,修改主题配置文件
# Scroll percent label in b2t button.
scrollpercent: true
如果想把top按钮放在侧边栏,修改主题配置文件
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true
网站css设置
关于网站css部分,搞了好久才明白运作机制。强烈建议不要修改源代码,所有修改代码写在custom.styl里。变量写在 themes\next\source\css_variables\custom.styl里,其他设置写在 themes\next\source\css_custom\custom.styl里。
变量部分我没有添加什么,这里只展示设置部分。
// Custom styles.
//网站标题栏
.site-meta {
background: $blue;
}
// 页面背景色
//.container {
// background-color: rgba(0, 0, 0, 0.75);
//}
//背景图片
body{
background:url(/images/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
//内容板块
.content-wrap {
background: rgba(255,255,255,0.6);
}
//菜单板块
.header-inner {
background: rgba(255,255,255,0.6);
}
//站点简介板块
.sidebar-inner {
background: rgba(255,255,255,0.6);
}
.sidebar {
background: rgba(255,255,255,0);
}
//footer字体颜色
.footer {
font-size: 16px;
color: $black-light;
}
外观这东西,不但需要css等知识,更需要有审美的眼光,我就不折腾了吧...
关于站点的配置,暂时先写这些,如果今后对站点配置有什么自认为不错的修改,会再来补充~~
评论