_config.yml
_config.yml 采用YAML语法格式,具体语法自行学习 。
_config.yml 文件中的内容,并对主要参数做简单的介绍: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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo #网站标题
subtitle: #网站副标题
description: #网站描述
author: John Doe #作者
language: #语言
timezone: #网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, 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 #你的站点Url
root: / #站点的根目录
permalink: :year/:month/:day/:title/ #文章的 永久链接 格式
permalink_defaults: #永久链接中各部分的默认值
# Directory
source_dir: source #资源文件夹,这个文件夹用来存放内容
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags # 标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post #预设布局
titlecase: false # 把标题转换为 title case
external_link: true # 在新标签中打开链接
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #是否显示草稿
post_asset_folder: false #是否启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章
highlight: #内容中代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized
category_map: #分类别名
tag_map: #标签别名
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD #日期格式
time_format: HH:mm:ss #时间格式
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 #分页数量
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #主题名称
# Deployment
## Docs: https://hexo.io/docs/deployment.html
# 部署部分的设置
deploy:
type: #类型,常用的git
修改Banner图
替换themes/landscape/source/css/images/banner.jpg下的图片即可。
注意命名一定要是banner.jpg
修改标题、副标题、博客描述、语言
修改根目录下_config.yml文件1
2
3
4
5
6
7
8# Site
title: Michelle's Home
subtitle: 纳纳的小窝
description: 学习笔记、工作心得
keywords:
author: 江纳纳
language: zh-CN //必须和主题中languages包中文件名相同
timezone:
修改之后:
对source文件夹下文章md文件分类
我的是按月归档的。操作步骤如下:
1.修改_config.yml文件1
new_post_name: :year/:month/:title.md
2.修改文章模版,增加 permalink一项就好了。文章的模版在scaffolds/post.md,内容修改如下:1
2
3
4
5
6
7
8---
title: {{ title }}
permalink: {{ title }}
date: {{ date }}
tags:
categories:
toc: false
---
而我们使用hexo new post [title]
创建文章的时候,应注意把标题里的空格换为-
。
参考链接
给文章设置目录
1.修改article.ejs
路径:themes/landscape/layout/_partial/article.ejs
修改前:
1 | <div class="article-entry" itemprop="articleBody"> |
修改后:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<!-- 文章目录 -->
<% if(!index && post.toc){ %> //!index:表示主页不显示 post.toc表示Font-Formatter中设置了toc
<div id="toc" class="toc-article">
<strong class="toc-title">目录</strong>
<%- toc(post.content,{list_number:false}) %>
</div>
<% } %>
<!-- Table of Contents -->
<%- post.content %>
<% } %>
</div>
2.设置目录的样式
文件路径:themes/landscape/source/css/_partial/article.styl,在末尾添加:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22/*toc*/
.toc-article
background #eee
border 1px solid #bbb
border-radius 3px
margin 1.5em 0 0.3em 0
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120%
#toc
line-height 1em
font-size 0.9em
/*float right*/ //该属性的作用是使目录悬浮到右侧,注释掉之后,目录默认显示在标题和内容之间
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em
插入图片
远程图片
将图片上传到某个远程服务器上,然后通过引用图片地址的方式加载图片,引用方式如下:1
![](https://b-ssl.duitang.com/uploads/item/201411/07/20141107164412_v284V.thumb.1900_0.jpeg)
注:这是markdown默认的引用方式
优点:引用方便,且兼容性好
缺点:依赖于网络,加载速度可能受影响
本地图片
加载本地图片有两种方式:
在source下面创建一个images 把图片都放到里面,通过如下方式引用
1 | ![](/images/hexo-image.jpeg) |
在source/_posts/下生成和文件名相同的文件夹
step1:
将根目录下_config.yml中有post_asset_folder: true 如果是flase 改成true
step2:新建文件insert-image1
hexo new "insert-image"
此时会在source/_posts/目录下生成和insert-image
同名的文件夹。1
2
3
4|--source
|--_posts
|--insert-image
|--insert-image.md
将图片放入该文件夹即可。1
2
3
4
5|--source
|--_posts
|--insert-image
|--hexo-image.jpeg
|--insert-image.md
引用方式一:1
![](hexo-image.jpeg)
注:括号内只需要填入文件名即可。
引用方式二:1
{% asset_img hexo-image.jpeg image %}
注:引用方式二是hexo引擎所支持的方式,并不是markdown语法。
修改menu,添加关于
1.修改配置文件_config.yml
,在菜单中添加关于
路径:themes/landscape/_config.yml1
2
3
4
5
6
7
8# Header
menu:
首页: /
归档: /archives
#分类: /categories
#标签: /tags/
#随笔: /essay
关于: /about
注意:menu下的菜单项默认是英文,因为我们已经设置了语言为中文,但是显示上并没有变化,这是因为,在landscape主题的语言包中,并没有适配菜单项,所以直接改成中文就可以了,不过这样对以后想适配多语言就比较麻烦了,只能算是当前的一个临时方案。
2.创建页面1
hexo new page "about"
此时source目录下会生成about的文件夹1
2
3
4
5|--source
|--_posts
|--about
|--index
|--index.md
在index.md
文件中添加关于的信息即可。
添加分类
1.修改模板scaffolds/post.md
1
2
3
4
5
6---
title: {{ title }}
permalink: {{ title }}
date: {{ date }}
categories:
---
2.创建文件1
hexo new test-category
3.在font-formatter中添加分类:1
2
3
4
5title: test-category
permalink: test-category
date: 2019-01-14 15:55:55
categories:
- hexo config
注意:一篇文章只能属于一个分类,如果写成如下形式:1
2
3
4
5
6title: test-category
permalink: test-category
date: 2019-01-14 15:55:55
categories:
- hexo config
- category config
则该文章分类属于`/hexo config/category config/
添加标签
1.修改模板scaffolds/post.md
1
2
3
4
5
6
7---
title: {{ title }}
permalink: {{ title }}
date: {{ date }}
categories:
tags:
---
2.创建文件1
hexo new test-category
3.在font-formatter中添加分类:1
2
3
4
5
6
7title: test-category
permalink: test-category
date: 2019-01-14 15:55:55
categories:
tags:
- aa
- bb
注意:虽然一篇文章只能属于一个分类,但是却可以有多个标签
分类、标签显示文章数
将themes/landscape/_config.yml
中show_count
参数设成true1
2
3# widget behavior
archive_type: 'monthly'
show_count: true
修改前:
修改后:
给首页文件增加阅读全文
方式一:使用<!--more-->
标记
这个只要在文章中加上<!--more-->
标记,该标记以后部分就不在显示了,只有展开全部才显示,这是hexo定义的。
这样每次添加这个标记有点麻烦,也可以自定义添加
方式二:自定义添加
缺点:可能导致排版比较混乱
1.修改文件themes/landscape/layout/_partial/article.ejs1
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<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<!-- 文章目录 -->
<% if(!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">目录</strong>
<%- toc(post.content,{list_number:true}) %>
</div>
<% } %>
<!--摘要-->
<% var br = post.content.indexOf('\n') %>
<% if(br < 0 || !index) { %>
<%- post.content %>
<% } else { %>
<%- post.content.substring(0, br) %>
<% if (theme.excerpt_link) { %>
<p class="article-more-link">
<a href="<%- config.root %><%- post.path %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } %>
<!-- Table of Contents -->
<!--<%- post.content %>-->
<% } %>
</div>
在class article-entry的else部分,增加摘要判断。
去掉首页文章日期后的分类信息
修改文件themes/landscape/layout/_partial/article.ejs1
2
3
4<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<!--<%- partial('post/category') %>首页文章日期后面不显示分类-->
</div>
默认:
修改后:
关于,去掉文章中的日期
Landscape主题,通过hexo new page pagename
创建的页面,默认是显示日期的,但是像关于
这种页面,我们并不希望它显示日期,那么就需要修改article.ejs
,控制日期的显示
1.修改scaffolds/page.md
,自定义变量show_date
,将其值设为false
1
2
3
4
5---
title: {{ title }}
date: {{ date }}
show_date: false
---
2.修改themes/landscape/layout/_partial/article.ejs
,具体如下:
修改前:1
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
修改后:1
2
3
4
5
6<% if(typeof(post.show_date)!= "undefined" && !post.show_date){ %> //前一个条件是判断变量是否存在,因为之前写的文章里并没有这个变量,但是却是要显示日期的。
<% }else{ %>
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<!--<%- partial('post/category') %>首页文章日期后面不显示分类-->
<% } %>
侧边栏显示分类
安装分类插件:1
npm install hexo-generator-category --save
卸载可执行1
npm uninstall hexo-generator-category --save
那样点击侧边栏的分类,将会提示找不到网页
侧边栏显示标签
安装标签插件:1
npm install hexo-generator-tag --save
标签、分类别名
为了避免在分类或标签的url中产生中文,可以设置标签、分类的别名1
2
3
4
5
6
7category_map: #冒号前面是分类名称,后面是访问路径
Android: Android
Java: Java
Hexo: Hexo
Web前端: Web
Linux: linux
Mac: mac
1 | tag_map: |
使用:1
2
3
4
5
6
7
8
9
10---
title: hexo配置-打造自己的博客(基于landscape主题)
permalink: hexo+config
toc: true
date: 2019-01-14 16:15:43
tags:
- Hexo 配置
categories:
- Hexo
---
这样在博客中显示的是Hexo 配置
,在url中显示的是hexo-config
站内搜索
https://segmentfault.com/a/1190000011917419
这个应该是和主题相关的,好像需要自己写
待续。。。
多语言支持
分享
config文件参数说明
其他:
主题修改相关:
https://www.jianshu.com/p/b96fd206571a
在菜单中怎讲category和tags,网上查到的这几篇文章并不起作用,还需要再查查看
https://mrcxt.github.io/hexo/%E8%A7%A3%E5%86%B3hexo%E4%B8%8B%E5%88%86%E7%B1%BB%E5%92%8C%E6%A0%87%E7%AD%BE%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BA%E7%9A%84%E9%97%AE%E9%A2%98/
https://blog.csdn.net/qq_32337109/article/details/78755662
https://www.jianshu.com/p/a6a72ed6aa2a