# Hexo基础
了解hexo,有利于让我们更好地使用好它。
# hexo建站项目结构
|--_config.yml 网站配置
|--package.json
|--scaffolds 存放模板。这些模板是在新建文章等文件时默认填充的内容
|--source 存放资源。除_post文件夹外,开头命名为_的文件(夹)和隐藏的文件会忽略。打包时md和html文件会被解析到public文件夹,而其他文件会被拷贝过去。
|--_drafts 草稿
|--_posts 文章
|-- ... 自定义页面类型
|--themes 主题文件夹,详见"hexo主题项目结构"部分
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# hexo指令
hexo init [folder] 新建网站
hexo new [layout] <title> 新建一篇文章或页面,layout可取值post或page,比如新建一个tag页面,hexo new page tag
hexo generate/g [-w] 生成打包的网站文件,选项w表示监视文件变动
hexo publish [layout] <filename> 发表草稿
hexo server/s [-p] [-l ] 启动服务器,选项p表示重设端口,选项l表示启动日记记录
hexo deploy/d 部署网站
hexo render <file1> [file2] ... [-o ] 渲染文件,选项o表示设置输出路径
hexo migrate <type> 从其他博客系统迁移内容
hexo clean 清除缓存文件和已打包的网站文件
hexo list 列出网站资料
hexo version 显示hexo版本
hexo --config custom.yml 自定义配置文件的路径
hexo --draft 显示source/_drafts文件夹中的草稿文章
hexo --cwd /path/to/cwd 自定义当前工作目录的路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# hexo主题项目结构及其应用
|-_config.yml 主题配置文件,更改内容不必重启服务器
|-languages 存放各国语言对应资源,用于国际化,文件格式可以是json或yml
|-layout 存放布局,比如主题模板文件,决定网站内容呈现方式
|-partial 存放模板,如header\footer等,引用如<%- partial('partial/header',{partialVariable:value,...}) %>
若主题过于复杂,可对局部使用缓存,优化后的引用如<%- fragment_cache('header',fucntion(){return "<header></header>"}) %>,同时,<%- partial('header', {partialVariable:value,...}, {cache: true});
|-layout 默认布局,如<!DOCTYPE html><html><body><%- body %></body></html>
|-index
|-post [回调index]
|-page [回调index]
|-archive [回调index]
|-category[回调archive]
|-tag [回调archive]
|-scripts 存放脚本,启动时会载入文件夹中的js文件
|-source 存放资源,除模板以外的asset,如css、js文件等,其中文件或文件夹以_开头、隐藏的文件会被忽略,其余则拷贝到public文件夹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
如何应用主题呢?
1.下载你喜欢的主题代码,复制到themes文件夹下
2.更改_config.yml网站配置
theme: 你的主题名称
1
当然,如果你不屑于别人的风格,可以自定义一套,具体操作见自定义主题 (opens new window)
# hexo提供的全局变量
# 网站变量
site 网站
site.posts 所有文章
site.pages 所有分页
site.categories 所有分类
site.tags 所有标签
1
2
3
4
5
2
3
4
5
# 页面变量
page 当前页面,设定内容、front-matter
page.title 页面标题
page.date 页面建立日期(Moment.js对象)
page.updated 页面跟新日期(Moment.js对象)
page.comments 留言是否开启
page.layout 布局名称
page.content 页面的完整内容
page.excerpt 页面摘要
page.more 除页面摘要的其余内容
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 文章的外部链接(用于链接文章)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
post 文章,和page布局类似,但新增以下变量,
page.published 文章是否发布
page.categories 文章的分类
page.tags 文章的标签
1
2
3
4
2
3
4
index 首页
page.per_page 每页显示的文章数量
page.total 总文章数
page.current 目前页数
page.current_url 目前分页的网址
page.posts 本页文章
page.prev 上一页的页数,若为第一页则为0
page.prev_link 上一页的网址,若为第一页则为""
page.next 下一页的页数,若为最后一页则为0
page.next_link 下一页的网址,若为最后一页则为""
page.path 当前页面的路径(不含根目录),通常在主题中使用url_for(page.path)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
archive 与首页布局相同,但新增以下变量,
page.archive true
page.year 年份归档(4位)
page.month 月份归档(2位)
1
2
3
4
2
3
4
category 与首页布局相同,但新增以下变量,
page.category 分类名称
1
2
2
tag 与首页布局相同,但新增以下变量,
page.tag 标签名称
1
2
2
# 其他变量
config 网站配置
theme 主题配置
_ Lodash函数库
path 当前页面路径
url 当前页面网址
env 环境变量
1
2
3
4
5
6
2
3
4
5
6
# hexo提供的辅助函数
# 网址类
url_for(path) 为路径加上根路径
relative_url(from,to) 获取与from相对的to路径
gravatar(email[,options]) 插入Gravatar图片.options可以是一个数字,表示大小,是一个对象,则转换为查询字符串
1
2
3
2
3
# HTML标签类
css(path,...) 载入css。path可以是数组、字符串
js(path,...) 载入js。path可以是数组、字符串
link_to(path[,text][,options]) 插入链接。options ={external:,class:,id:,}
mail_to(path[,text][,options]) 插入邮箱链接。options ={class:,id:,subject:,cc:,bcc:,body:,}
image_tag(path[,options]) 插入图片。options={alt:,class:,id:,width:,height:,}
favicon_tag(path) 插入favicon
feed_tag(path[,options]) 插入feed链接。options ={title:,type:,}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 条件函数
is_current(path[,strict]) 检查path是否符合目前页面的网址
is_home() 是否为首页
is_post() 是否为文章
is_archive() 是否为存档页面
is_year() 是否为年度归档页面
is_month() 是否为月度归档页面
is_category([category]) 是否为分类归档页面,若有参数是否为指定分类
is_tag([tag]) 是否为标签归档页面,若有参数是否为指定标签
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 字符串处理
trim(str) 清除字符串开头和结尾的空格
strip_html(str) 清除字符串中的html标签
titlecase(str) 将字符串转换为正确的Title case
markdown(str) 使用md解析字符串
render(str,engine[,options]) 解析字符串
word_wrap(str[,len]) 使每行字符串长度不超len,预设为80
truncate(text,len) 删除超过len的字符串
1
2
3
4
5
6
7
2
3
4
5
6
7
# 模板
partial(layout[,locals][,options]) 载入其他模板文件
fragment_cache(id,fn) 局部缓存。存储局部内容,下次使用时直接使用缓存
1
2
2
# 日期与时间
date(date[,format]) 插入格式化的日期
date_xml(date) 插入xml格式的日期
time(date[,format]) 插入格式化的时间
full_date(date[,format]) 插入格式化的日期和时间
moment Moment.js函数库
1
2
3
4
5
2
3
4
5
# 列表
list_categories([options]) 插入分类列表。options={orderby:,order:,show_count:,style:,separator:,depth:,class:,transform:,}
list_tags([options]) 插入标签列表。options = {orderby:,order:,show_count:,style:,separator:,class:,transform:,amount:,}
list_archives([options]) 插入归档列表。options ={type:,order:,show_count:,format:,style:,separator:,class:,transform:,}
list_posts([options]) 插入文章列表。options = {orderby:,oredr:,style:,separator:,class:,amount:,transform:,}
tagcloud([tags][,options]) 插入标签云。options ={min_font:,max_font:,unit:,amount:,orderby:,order:,color:,start_color:,end_color:,}
1
2
3
4
5
2
3
4
5
# 其他
paginator(options) 插入分页链接。options ={base:,format:,total:,current:,prev_text:,next_text:,sapce:,prev_next:,end_size,mid_size:,show_all:,}
search_form(options) 插入google搜索框。options ={class【表单的class name】:,text【搜索提示文字】:,button【是否显示搜索按钮】:,}
number_format(num[,options]) 格式化数字。options = {precision[数字精度]:,delimiter[千位数分隔符号]:,separator[整数和小数分隔符号]:,}
open_graph([options]) 插入open graph资源。options ={title:,tpye:,url:,image:,site_name:,description:,twitter_card:,twitter_id:,twitter_site:,google_plus:,fb_admins:,fb_app_id:,}
toc(str[,options]) 解析内容中标题标签并插入目录。options = {class[Class名称]:toc,list_number[显示编号]:true}
1
2
3
4
5
2
3
4
5
# hexo插件
脚本插件形式
将写好的脚本放到scripts文件夹下,启动时自动载入
包插件形式
在node_modules新建文件夹,文件夹名称以hexo-开头,保证hexo启动时载入。文件夹至少需包含index.js和package.json两个文件,一个是主程序,一个是描述插件的用途和依赖的插件,需包含name\version\main属性
# 写在最后
技术总是在迭代,直接上官网 (opens new window)学习才是最好的,上面的笔记可以作为关注的主要方向进行参考啦!!!