Hexo 搭建博客笔记

HEXO:基于Node.js的一个简单快速的开源博客框架。

一、环境部署

1. Node.js下载安装

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.mddefault_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布局:postpagedraft,如果文章前置声明中,将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是否显示目录
photosfarbox图片展示
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 文章为草稿时为false
    • page.categories 文章分类
    • page.tags 文章标签
  • index 首页

    • page.per_page 每一页显示的文章数
    • page.total 总文章数量
    • page.current/page.current_url 当前页的页码/url
    • page.posts 当前页文章
    • page.prev/page.prev_link 前一页页码/url
    • page.next/page.next_link 下一页页码/url
    • page.path 当前页网址(不含根路径,主题中使用url_for(page.path)
  • archive 归档页,与index布局相同,添加如下:

    • archive 为true
    • year 归档年份(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。默认false
    • only:限制使用局部变量,在模板中智能使用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 namesearch-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_cardTwitter 卡片类型 (twitter:card)summary
twitter_idTwitter ID (twitter:creator)
twitter_siteTwitter 网站 (twitter:site)
google_plusGoogle+ 个人资料链接
fb_adminsFacebook 管理者 ID
fb_app_idFacebook 应用程序 ID
  • <%- toc(str, [options]) %>:解析内容中的标题标签(h1~h6)并插入目录
	//解析文章内容,并生成目录列表
  <%- toc(page.content) %>
参数描述默认值
classClass 名称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.jslanguages.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'],
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值