HEXO:基于
Node.js
的一个简单快速的开源博客框架。
一、环境部署
1. Node.js下载安装
- 安装包下载安装
Node下载官网
安装完成,可打开CMD窗口,执行命令node -v
检查node版本,确认node是否安装成功 - node环境部署
Node环境配置教程
2. Git下载安装
Hexo的项目源代码以及相关插件是放在Github上托管的。
安装参考步骤:https://mp.csdn.net/mdeditor/103214060#
3. Hexo安装
先安装好Node和Git,安装hexo很简单。命令行运行npm install hexo-cli -g
即可
检查:hexo version
二、启动
1. 目录文件
- 初始化Hexo:
hexo init <folder> #初始化目录
cd <folder>
npm install #安装依赖
初始化完成后,
├── _config.yml #站点配置文件
├── package.json #应用数据
├── scaffolds #模板文件
├── source #文章资源
| ├── _drafts
| └── _posts
└── themes #站点主题配置文件
- 启动命令
hexo clean #清空静态文件(public目录)
hexo g #生成静态页面
hexo s #启动hexo服务,本地访问
hexo d #部署
2. 部署
- Github新建仓库,仓库名称格式:
<Github账号名称>.github.io
- 将本地Hexo博客推送到Github上
- 安装
hexo-deployer-git
插件:$ npm install hexo-deployer-git --save
- 如果没有配置ssh,则添加SSH key(具体参考:https://mp.csdn.net/mdeditor/103214060#)
- 修改站点配置文件(_config.yml):
仓库地址写ssh地址,不写http地址
- 安装
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git
branch: master
- 推送:
hexo -g
hexo -d
后,浏览器访问网址: https://<Github账号名称>.github.io
三、hexo配置说明
1. _config.yml
根目录的_config.yml的配置会覆盖其它部分的相同配置
//site 站点参数配置
title
站点标题
subtitle 站点副标题 description
网站描述
keywords
关键字
author
文章的作者
language
网站使用的语言,默认英语
timezone
网站时区,默认使用电脑的时区
//url
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
Include code 文件夹,默认downloads/code
i18n_dir
国际化(i18n)文件夹,默认lang
skip_render
跳过指定文件的渲染
//write 写作配置
new_post_name
新文章的文件名称格式 :title.md或者:year-:month-:day-: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
启动资源文件夹,默认是 false,表示source文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等(如果Hexo项目中只有少量图片,那最简单的方法就是将它们放在source/images 文件夹中)。
relative_link
把链接改为与根目录的相对位址,默认是false,默认情况下,Hexo生成的超链接都是绝对地址。例如,如果你的网站域名为example.com,您有一篇文章名为hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,一般建议用绝对路径
future
显示未来的文章,默认是true
highlight
代码块的设置
enable: true 启动高亮
line_number: true 显示行号
auto_detect: false 自动检查
tab_replace: 缩进大小
//home page setting
path
博客默认页面的路径,默认为空
per_page
主页中每页显示的贴子,0表示禁止分页
order_by
按时间倒序排列
//category& tag 分类和标签设置
default_category
默认分类,默认为没有分类uncategorized
category_map
分类别名,默认为空
tag_map
标签别名,默认为空
//date/time format (hexo使用moment.js来处理时间)
date_format
日期格式,默认为MMM D YYYY,可配置 YYYY-MM-DD
time_format
时间格式 H:mm:ss
//pagination
per_page
每页显示的文章量(0表示关闭分页),默认是10
pagination_dir
分页目录,默认是page
//extensions
plugins
插件,插件列表
theme
当前主题名称,为false时禁用主题,主题列表
theme_config
自定义主题配置,这和全局的_config.yml文件是分离的,你可以写themes/my-theme/_config.yml,如果全局的_config.yml文件是
theme_config
:
bio
: “hello_world”
//deploy
deploy
: 部署配置,即把public目录文件部署到服务器上
type
: git
repository
: https://github.com/xxx/xxx.github.io.git
branch
: master
//include/exclude files or folders
设置键值使hexo显式或忽略某些文件
include
-Impo
包含Impo这个文件,include参数一般不使用,需要包含的文件hexo都做好了
exclude
-.Igno
忽略.Igno这个文件
//using am alternate config
自定义配置文件,使用hexo server
启动时是默认加载_config.yml
里面的配置,如果我们自定义文件custom.yml
,那么启动时使用hexo server --config custom.yml
,甚至是多个自定义文件custom1.yml,custom2.json,启动时使用hexo server --config custom1.yml,custom2.json
,注意默认后面文件的优先级高,也就是先加载.json,多个自定义文件可以写入_multiconfig.yml
中,同样最后一个文件优先加载
2. scaffolds(文章脚手架)
模板文件夹。新建文章时,hexo会根据该文件夹下的相对应的模板文件来建立文件,默认是post.md
(default_layout
配置)。
模板中的 参数有
layout
布局title
标题date
文章建立日期
在/scaffolds下可配置对应的layout的front-matter
,使用命令新建或者发布文章时:
hexo new [layout] <title>
hexo publish <title>
3. Data(数据文件)
使用一些不在post中的模版数据,或者想复用这些数据,可以使用一下Hexo3中的『Data files』
功能。这个特性加载source/_data
目录中的YAML
或者JSON
文件,从而用到你的网站中。
友情链接页面举例
- 添加数据文件
在source
目录下新建_data
目录,该目录下新建links.yml文件()
a Blog: http://a.com
b Blog: http://b.com
c: http://www.c.com
- 添加主题布局文件
<% if (site.data.links){ %>
<div class="widget tag">
<h3 class="title">友情链接</h3>
<ul class="entry">
<!--site.data.links:创建的links.yml数据文件所对应的对象-->
<% for (var i in site.data.links){ %>
<li class='link'><a href='<%- site.data.links[i] %>'><%= i %></a></li>
<% } %>
</ul>
</div>
<% } %>
4. source(资源文件)
文件内以_开头的文件都会被忽略,.md和.html文件会被解析并放到public中,其它文件也会被直接拷贝或渲染过去
5. Asset(资源目录)
source 文件夹中除了文章以外的所有文件
当资源文件管理功能打开后(post_asset_folder: true
),Hexo将会在你每一次通过 hexo new [layout] <title>
命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown
文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。
当打开文章资源文件夹功能后,正确的图片引用方式:
{% asset_img example.jpg This is an example image %}
。这样的引用才会使图片同时出现在文章和主页以及归档中
例如,在资源文件夹(就是那个与 title 同名的文件夹)中添加图片 example.PNG,则可以在对应的文章中使用语句
![示例图片](title/example.PNG "示例图片")
添加图片
6. Themes(主题文件)
.主题目录结构
├── _config.yml #主题配置未见
├── languages #语言
├── layout #模板(index/post/page/archive/category/tag)
├── scripts
└── source
- 每个模板都默认使用layout布局,您可在文章的前置申明中指定其他布局,比如“post”或者“page”或是设为false来关闭布局功能(如果不填默认是post,这个在_config.yml中可以设置默认值),您甚至可在布局中再使用其他布局来建立嵌套布局。
- Partials(局部模板,将各个模板功能将各个组件分割成独立的文件,便于维护)
- 本地变量
<!--partial/header.ejs-->
<h1 id="logo"><%= title></h1>
<!--index.ejs-->
<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home page</div>
- 最优化:通过Fragment Caching(局部缓存)的功能来处理(即缓存局部的内容,减少文件查询)。常用在那些很少变动的模块中,比如Header、Footer等等,例如:
<%- fragment_cache('header', function(){
return '<header></header>';
});
如果使用局部模板的话,
<%- partial('header', {}, {cache: true});
注意:如果开启了relative_link参数的话,就不要使用局部缓存的功能
7. Permalinks永久链接
在 _config.yml 配置中调整网站的永久链接或者在每篇文章的 Front-matter 中指定。
除了下列变量外,您还可使用 Front-matter 中的所有属性。
变量 描述
:year 文章的发表年份(4 位数)
:month 文章的发表月份(2 位数)
:i_month 文章的发表月份(去掉开头的零)
:day 文章的发表日期 (2 位数)
:i_day 文章的发表日期(去掉开头的零)
:title 文件名称
:post_title 文章标题
:id 文章 ID
:category 分类。如果文章没有分类,则是 default_category 配置信息。permalink_defaults 参数调整永久链接中各变量的默认值
文章的永久网址链接默认::year/:month/:day/:title
。举例说明:
20191124写了一篇test的文章,对应的永久链接应该是:http://url/2019/11/24/test/;
如果网址是次级目录,比如http://url/blog
,那么就要设置url为:http://url/nlog
,并且设置root为/blog
8. 标签插件
(1) raw
—— 一些内容不想被主题渲染,可以使用插件呈现原始状态
{% raw %}
content
{% endraw %}
(2) Include Code—— 从资源目录插入代码片段
{% include_code [title] [lang:language] path/to/file %}
(3)Link—— 插入带有target="_blank"属性值的链接
{% link text url [external] [title] %}
(4)Image—— 插入图片,可自定义大小
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
等等
9. hexo常用命令
hexo init [folder]
,使用该命令初始化一个站点,不加目录参数,就初始化当前目录
hexo new [layout] <title>
,创建一篇文章,如果不指定layout,那么就使用_config.yml中default_layout的值,标题中如果有空格,将整个title放到引号中。比如,hexo new "hello world"创建一篇叫hello world的文章。
hexo generate
,简单的说,这个命令就是将md格式的文章,生成静态网页。这个命令可以简写为hexo g,它有两个参数选项:
-d
,–deploy 生成完后直接部署
-w
,–watch 查看文件的改变
hexo publish [layout] <filename>
,发布一个草稿
hexo server
,启动一个本地服务,可以在本地查看网站,默认启动http://localhost:4000,貌似这个不是默认,运行命令的时候可以查看提示消息。它也有一些参数:
-p
,–port 指定端口
-s
,–static 仅服务静态文件
-l
,–log 开启日志
hexo deploy
部署站点,可以缩写hexo d
,有一个参数,hexo d -g表示在部署前先重新生成一下站点
hexo render <file1> [file2]
… 渲染文件,具体我也不太明白这是干嘛的
hexo migrate <type>
迁移其他博客系统的命令,具体怎么使用DOCS后面有介绍。
hexo clean
删除缓存文件db.json以及生成的public目录,当你修改了某些样式或者配置时,如果发现hexo g后也没有反应,就可以执行一下这个命令。
hexo list
没用过
hexo version
显示版本信息
hexo --safe
安全模式,使所有插件和脚本不生效
hexo --dehug
调试模式
hexo --silent
静默模式,不在终端上显示任何信息
hexo --config custom.yml
使用一个自定义配置文件替换默认_config.yml
hexo --draft
显示草稿文章(位于source/_drafts目录下)
hexo --cwd /path/to/cwd
自定义当前工作目录路径,假如你没在工作目录下,可以使用这个命令指定一下工作目录路径。
四、文章编辑
1. 添加
(1)新增
hexo new [layout] <title>
创建.md文件
(2)基本配置
- layout布局:
post
、page
、draft
,如果文章前置声明中,将layout设置为false,那么文章将不会有任何布局 - 文件名:默认文章标题,可配置
new_post_name
修改默认
例如:使用
hexo new hello
命令创建一篇为hello文章,Hexo会默认在_posts
目录下创建一个名为hello.md
的文件。假如将new_post_name改为:year-:month-:day-:title.md
,那么hexo就自动帮你创建名为2019-11-16-hello.md
(当前日期为2019年11月16)
- draft草稿:在
_drafts
目录下的文章不会发表到网站上,可通过hexo publish [layout] <title>
发布草稿,该命令会将文章移到_posts
目录下。也可设置render_drafts
,使草稿默认发布到网站上 - scaffolds模板:使用
new
命令创建一篇文章的时候,Hexo会根据scaffolds
目录中的模版帮你生成文章。能够在模版中写入你某一类文章都要添加的共同内容 - 在文章中插入
<!-- more -->
,代表首页只显示插入它之前的文章内容,表示为摘要。 - 切换主题:
git clone https://github.com/iissnan/hexo-theme-next themes/next
(3)前置声明( Front-matter)themes
front-matter就是md文件最上方以---
(yml)或者;;;
(json )分割的区域,用作文章局部变量。
- 预定义参数如下:
参数 | 描述 | 默认值 |
---|---|---|
layout | 布局 | |
title | 标题 | |
date | 时间 | 文件建立日期 |
updated | 时间 | 文件修改日期 |
comments | 开启文章的评论 | true |
tags | 标签(不适用于分页) | |
categories | 分类(不适用于分页) | |
permalink | 文章永久链接, 覆盖文章网址 | |
toc | 是否显示目录 | |
photos | farbox图片展示 |
categories:
- Sports
- Baseball
tags:
- Injury
- Fight
- Shocking
- 书写规范
- 每行一种类型声明
- 每个声明后都要加上
:
(:
+空格) - 文章标签可指定多个,中括号包含,,分隔,书写方法如下:tags: [hexo,博客系统]
- 多级分类
categories:
- 生活
- 随笔
2. 变量
(1)全局变量
- site 网站变量
site.post
所有文章site.pages
所有分页site.categories
所有分页site.tags
所有标签
- page 该页面的内容以及前置声明中所设定的变量
- config 配置文件中的变量
- theme 主题配置文件中的变量
- _ lodash函数库
- path 当前页面的路径(不包含根路径)
- url 页面的完整地址
- env 环境变量
(2)页面变量
-
page 文章
page.title
标题page.date
日期page.updated
更新日期page.comments
是否开启留言page.layout
布局page.content
内容page.excerpt
摘要page.mre
除了摘要外的内容page.source
原始路径page.full_source
完整原始路径page.path
文章网址(不含根路径),使用url_for(page.path)
page.permalink
永久网址page.prev
上一篇(没有则为null)page.next
下一篇(没有则为null)page.raw
文章原始内容page.photos
文章的照片(用于相册)page.link
文章的外链(用于链接文章)
-
post 文章页面,与page布局相同,添加以下
page.pulished
文章为草稿时为falsepage.categories
文章分类page.tags
文章标签
-
index 首页
page.per_page
每一页显示的文章数page.total
总文章数量page.current
/page.current_url
当前页的页码/urlpage.posts
当前页文章page.prev
/page.prev_link
前一页页码/urlpage.next
/page.next_link
下一页页码/urlpage.path
当前页网址(不含根路径,主题中使用url_for(page.path)
)
-
archive 归档页,与index布局相同,添加如下:
archive
为trueyear
归档年份(4位)month
归档月份(不含0)
-
category 与index布局相同,新增如下:
category
分类名称
-
tag 标签页,与index布局相同,新增如下:
tag
标签名称
3. 帮助函数(用于在模板中快速插入内容)
(1)url
<%- url_for(path) %>
返回一个带root路径的url<%- relative_url(from, to) %>
返回form相对的to路径<%- gravatar(email, [size])%>
插入Gravatar图片
(2)html
- 载入css:
<%- css(path, ...)%>
(path开头没有/或者任何协议,将自动加上根路径;没有扩展名将会自动加上.css) - 载入js文件:
<%- js(path, ...) %>
- 插入链接:
<%- link_to(path, [title], [options]) %>
,其中,options的参数有:external
:是否在新窗口中打开链接class
:a标签的class名称id
:a的id名称
<%- link_to('http://www.google.com') %>
// <a href="http://www.google.com" title="http://www.google.com">http://www.google.com</a>
<%- link_to('http://www.google.com', 'Google') %>
// <a href="http://www.google.com" title="Google">Google</a>
<%- link_to('http://www.google.com', 'Google', {external: true, class: "link"}) %>
// <a href="http://www.google.com" title="Google" target="_blank" rel="external" class="link">Google</a>
-
插入电子邮件链接:
<%- mail_to(path, [text], [options])%>
,其中,options的参数有:class
a的class名id
ID名subject
邮件主题cc
抄送(CC)bcc
密送(BCC)body
邮件内容
-
插入图片:
<%- image_tag(path, [options]) %>
,options参数(基本就是img标签的属性值)有:class
a的class名id
a的id名alt
替代文字width
宽度height
高度
-
插入favicon:
<%- favicon_tag(path) %>
-
插入feed链接:
<%- feed_tag(path, [options]) %>
,其中option值有:title和type(默认值为atom)
(3)条件函数
<%- is_current(path, [strict]) %>
判断path是否符合目前页面的网址is_home
判断目前是否为首页<%- is_post() %>
检查目前是否为文章<%- is_archive() %>
检查目前是否为存档页面<%- is_year() %>
检查目前是否为以年度归档的页面<%- is_month() %>
检查目前是否为以月归档的页面<%- is_category() %>
检查目前是否为以分类归档的页面<%- is_tag() %>
检查目前是否为以标签归档的页面
(4)字符串处理
<%- trim(string) %>
清楚首尾空格<%- strip_html(string) %>
清楚字符串中的HTML标签
<%- strip_html('It's not <b>important</b> anymore!') %>
// It's not important anymore!
<%- titlecase(string) %>
把字符串转为正确的Title case
<%- titlecase('this is an apple') %>
# This is an Apple
<%- markdown(str) %>
用markdown解析字符串
<%- markdown('make me **strong**') %>
// make me <strong>strong</strong>
<%- render(str, engine, [options]) %>
解析字符串<%- word_wrap(str, [length]) %>
使每行的字符串长度不超过指定length(预设80)<%- truncate(text, length) %>
移除超过指定长度的字符串
(5)模板
<%- partial(layout, [locals], [options]) %>
载入其它模板文件,可以在locals中设定区域变量。options的参数有:cache
:使用Fragment cache。默认falseonly
:限制使用局部变量,在模板中智能使用locals中设定的变量。默认false
<%- fragment_cache(id, fn);
:局部缓存。
<%- fragment_cache('header', function(){
return '<header></header>';
}) %>
(6)日期与时间
date 可以是 UNIX 时间、ISO 字符串、Date 对象或 [Moment.js] 对象。format 默认为 date_format 配置信息;
<%- date(date, [format]) %>
:插入格式化日期。<%- date_xml(date) %>
:插入xml格式的日期(// 2013-01-01T00:00:00.000Z)<%- time(date, [format]) %>
:插入格式化时间<%- full_date(date, [format]) %>
:插入格式化的日期和时间
(7)列表
<%- list_categories([categories], [options]) %>
:插入分类列表
参数 | 描述 | 默认值 |
---|---|---|
orderby | 分类排列方式 | name |
order | 分类排列顺序.1(asc 升序),-1(desc 降序) | 1 |
show_count | 显示每个分类的文章总数 | true |
style | 分类列表的显示方式。使用 list 以无序列表(unordered list)方式显示 | list |
separator | 分类间的分隔符号。只有在 style 不是 list 时有用 | , |
depth | 要显示的分类层级。0 显示所有层级的分类;-1 和 0 很类似,但是显示不分层 级;1 只显示第一层的分类 | 0 |
class | 分类列表的 class 名称。 |
<%- list_tags([tags], [options]) %>
:插入标签列表
参数 | 描述 | 默认值 |
---|---|---|
orderby | 标签排列方式 | name |
order | 分类排列顺序.1(asc 升序),-1(desc 降序) | 1 |
show_count | 显示每个标签的文章总数 | true |
style | 分类列表的显示方式。使用 list 以无序列表(unordered list)方式显示 | list |
separator | 分类间的分隔符号。只有在 style 不是 list 时有用 | , |
amount | 要显示的标签数量(0=无限制) | 0 |
class | 分类列表的 class 名称 | tag |
transform | 改变标签名称显示方法的函数 |
<%- list_archives([options]) %>
:插入归档列表
参数 | 描述 | 默认值 |
---|---|---|
type | 类型。此设定可为 yearly 或 monthly。 | monthly |
order | 分类排列顺序.1(asc 升序),-1(desc 降序) | 1 |
show_count | 显示每个归档的文章总数 | true |
format | 日期格式 | MMMM YYYY |
style | 归档列表的显示方式。使用 list 以无序列表(unordered list)方式显示 | list |
separator | 归档间的分隔符号。只有在 style 不是 list 时有用 | , |
class | 归档列表的 class 名称 | archive |
transform | 改变归档名称显示方法的函数 |
<%- list_posts([options]) %>
:插入文章列表
参数 | 描述 | 默认值 |
---|---|---|
orderby | 文章排列方式 | name |
order | 文章排列顺序.1(asc 升序),-1(desc 降序) | -1 |
style | 文章列表的显示方式。使用 list 以无序列表(unordered list)方式显示 | list |
separator | 文章间的分隔符号。只有在 style 不是 list 时有用 | , |
amount | 要显示的文章数量(0 = 无限制) | 0 |
class | 文章列表的 class 名称 | post |
transform | 改变文章名称显示方法的函数 |
<%- tagcloud([tags], [options]) %>
:插入标签云
参数 | 描述 | 默认值 |
---|---|---|
min_font | 最小字体尺寸 | 10 |
max_font | 最大字体尺寸 | 20 |
unit | 字体尺寸大小单位 | px |
amount | 标签总量 | 40 |
orderby | 排列方式 | name |
order | 标签排列顺序。1, sac 升序;-1, desc 降序 | 1 |
color | 使用颜色 | false |
start_color | 开始的颜色。您可使用十六进位值(#b700ff),rgba(rgba(183, 0, 255, 1)),hsla(hsla(283, 100%, 50%, 1))或 [颜色关键字]。此变量仅在 color 参数开启时才有用。 | |
end_color | 结束的颜色。您可使用十六进位值(#b700ff),rgba(rgba(183, 0, 255, 1)),hsla(hsla(283, 100%, 50%, 1))或 [颜色关键字]。此变量仅在 color 参数开启时才有用。 |
(8)其它
<%- paginator(options) %>
:插入分页链接
参数 | 描述 | 默认值 |
---|---|---|
base | 基础网址 | / |
format | 网址格式 | page/%d/ |
total | 分页总数 | 1 |
current | 目前页数 | 0 |
prev_text | 上一页链接的文字。仅在 prev_next 设定开启时才有用。 | Prev |
next_text | 下一页链接的文字。仅在 prev_next 设定开启时才有用。 | Next |
space | 空白文字 | &hellp; |
prev_next | 显示上一页和下一页的链接 | true |
end_size | 显示于两侧的页数 | 1 |
mid_size | 显示于中间的页数 | 2 |
show_all | 显示所有页数。如果开启此参数的话,end_size 和 mid_size 就没用了。 | false |
<%- search_form(options) %>
:插入Google搜索框
参数 | 描述 | 默认值 |
---|---|---|
class | 表单的 class name | search-form |
text | 搜索提示文字 | Search |
button | 显示搜索按钮。此参数可为布尔值(boolean)或字符串,当设定是字符串的时候,即为搜索按钮的文字。 | false |
<%- number_format(number, [options]) %>
:格式化数字
参数 | 描述 | 默认值 |
---|---|---|
precision | 数字精度。此选项可为 false 或非负整数。 | false |
delimiter | 千位数分隔符号 | , |
separator | 整数和小数之间的分隔符号 | . |
<%- number_format(12345.67, {precision: 1}) %>
// 12,345.68
<%- number_format(12345.67, {precision: 4}) %>
// 12,345.6700
<%- number_format(12345.67, {precision: 0}) %>
// 12,345
<%- number_format(12345.67, {delimiter: ''}) %>
// 12345.67
<%- number_format(12345.67, {separator: '/'}) %>
// 12,345/67
<%- open_graph([options]) %>
:插入open graph资源
参数 | 描述 | 默认值 |
---|---|---|
title | 页面标题 (og:title) | page.title |
type | 页面类型 (og:type) | blog |
url | 页面网址 (og:url) | url |
image | 页面图片 (og:image) | 内容中的图片 |
site_name | 网站名称 (og:site_name) | config.title |
description | 页面描述 (og:desription) | 内容摘要或前 200 字 |
twitter_card | Twitter 卡片类型 (twitter:card) | summary |
twitter_id | Twitter ID (twitter:creator) | |
twitter_site | Twitter 网站 (twitter:site) | |
google_plus | Google+ 个人资料链接 | |
fb_admins | Facebook 管理者 ID | |
fb_app_id | Facebook 应用程序 ID |
<%- toc(str, [options]) %>
:解析内容中的标题标签(h1~h6)并插入目录
//解析文章内容,并生成目录列表
<%- toc(page.content) %>
参数 | 描述 | 默认值 |
---|---|---|
class | Class 名称 | toc |
list_number | 显示编号 | true |
4. 本地化
在主题中设置不同的语言模版,在文件夹languages,然后通过设置改变网页中的预设文本。在模版中是通过__
或_p
来引用的。
例如在_config.yml
中设置language: zh-CN
,而网页模版中有这么一段引用:<h1 class="title"><%= __('comment') %></h1>
,那么网站会在languages文件夹中找zh-CH.yml
文件,并找到对应的comment
值,将值显示在网站中。
5. 插件
- Generator
- Renderer
- Helper
- Deployer
- Processor
- Tag
- Console
- Migrator
- Filter
五、主题扩展开发
1、 hexo站点布局
站点下的每个模板都默认使用layout布局,layout.ejs
大致内容如下:
<%- partial('_partial/head') %>
<body class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit">
<div class="scrollbar" id="bar">
</div>
<a href="#" class="cd-top faa-float animated"></a>
<section id="main-container">
<%- partial('_partial/headertop', null, {cache: !config.relative_link}) %>
<div id="page" class="site wrapper">
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<%- body %>
</div>
<%- partial('_widget/search/insight') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
</section>
</body>
</html>
根据代码可以看出这基本就是一个完整的页面,header+body+footer等,页面所有的部分都是通过局部模板嵌入进来的。其中的<%- body %>
就是用来给站点各个页面布局替换得到一个完整布局页面的代码。基本分为:index(首页)
、post(文章详情页)
、page(导航标签页)
、archive(归档页)
、category(类别页)
以及tag(标签页)
2、 新增布局
新增布局则首先在layout文件夹下新加一个newLayout.ejs
布局文件,指向另外一个局部模块或者自定义内容样式。
内容样式就是自己想要的页面布局了。结构和样式确认好以后,就可以新增page了。hexo new page newLayout
新建一页,hexo则会在根目录下的source文件夹中新增一个newLayout
文件夹,并在该文件夹下新增index.md
文件,编辑该文件则编辑页面主要内容了。
index.md文件的前置声明一定要加上 layout: newLayout 哦!!!否则还是会使用默认布局
3、 新增日历云功能
文章的归档功能可分年月归档,以显示对应时间内的文章数量。但随着时间的增长,这样的归档作为小模块就难以小区域显示,故可以使用日历云的小模块来替换主页的归档小模块。
(1)安装hexo-generator-calendar
,生成文章日期信息的calendar.json文件
npm install --save git://github.com/howiefh/hexo-generator-calendar.git
(2)添加相关文件
- js文件:
calendar.js
和languages.js
(下载链接) - ejs:
<div class="widget tag">
<h3 class="title"><%= __('calendar') %></h3>
<div id="calendar"></div>
</div>
- style样式文件:
calendar.styl
。其中用到两个样式变量确保在source/css/_base/variable.styl
文件中已经定义好。一个是color-link
,一个是color-calendar-post-bg
。下载链接
(3)修改配置
- 引入js代码
<!-- add calendar widget -->
<% if (theme.widgets.indexOf('calendar') != -1){ %>
<script src="<%- config.root %>js/calendar.js"></script>
<script src="<%- config.root %>js/languages.js"></script>
<script type="text/javascript">
$(function() {
<% if (theme.calendar.options){ %>
$('#calendar').aCalendar('<%= theme.calendar.language || config.language %>', $.extend(<%- JSON.stringify(theme.calendar.options ) %>, {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'});
<% }else{ %>
$('#calendar').aCalendar('<%= theme.calendar.language || config.language %>',{single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'});
<% } %>
});
</script>
<% } %>
- 添加calendar插件配置
calendar:
language: zh-CN
只定义了语言language为中文,这样的配置就足够了。如果想自定义的话,可以修改calendar.js
文件最后一段代码的相关参数,或者将参数填写在主题_config.yml
里。例如:
calendar:
language: zh-CN
options:
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],