搭建Hexo博客进阶篇--Hexo文档讲解（二）

2017-05-23 本文已影响0人 lifeColder

Hexo 还没有结束，而是刚刚开始！

之前写过一篇Hexo入门篇，但是我发现Hexo并没有我想象的那么简单，我用的Hexo主题是yelee,是MOxFIVE大神从yilia主题改版的，原创度较高，那么这篇文章就是我经过几天研究Hexo后的一些心得和技巧，由于本人技术水平有限，若有错误之处，请指出，非常感谢。
本文涉及的内容有：

Hexo 文档详细说明
Hexo 主题自定义
Hexo 小部件
Hexo 模板解析

生命在于运动，技术在于折腾

Hexo不常用的命令

render

渲染文件： hexo render <file1> [file2] ...
参数 -o(--output) 设置输出路径，看下图就知道咋用了

渲染

刚开始当设置输出路径是，报这个错误

error

后来我想了一下，输出到一个文件，肯定是要写输出之后的文件名的
所以改成

hexo render path1/xxx.md -o path2/xxx.yyy

看现在就好了呢，在Desktop/postData文件夹下面看到了a.html

success

由这两张图，我们就知道了，hexo-render命令其实就是把我们的文章通过模板渲染成html代码，当然渲染完成后是可以输出到另一个文件的

list

列出网站资料：hexo list <type>
不多说，看图就知道啦

hexo list

安全模式

hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

调试模式

hexo --debug

在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并提交调试信息到 GitHub。

简介模式

hexo --silent

隐藏终端信息，简言之就是隐藏了，cmd hexo命令框的输出内容

自定义配置文件的路径

hexo --config custom.yml

自定义配置文件的路径，执行后将不再使用 _config.yml。

显示草稿

hexo --draft

显示 source/_drafts 文件夹中的草稿文章。

自定义CWD

hexo --cwd /path/to/cwd

自定义当前工作目录（Current working directory）的路径。

Global Options

这张图可以看出，以上的全部都是Global Options,也就是全局配置选项

标签插件

Hexo 的标签插件是独立于 Markdown 的渲染引擎的，标签插件采用独有的方式渲染，虽然有的时候可能和 Markdown 渲染效果一样，在这里我就不说 Markdown 的渲染方式了，如果想要了解 Markdown 的请参考这篇文章 MarkDown学习笔记

引用块

在文章中插入引言，可包含作者、来源和标题。
别号：quote
格式如下：

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

例子1:没有提供参数，则只输出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

例子2：引用书上的句子

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

例子3：引用Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

例子4：引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

代码块

别名：code
格式如下：

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

例子1：普通的代码块

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

例子2：指定语言

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

例子3：附加说明

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

例子4：附加说明和网址

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

其他

Pull Code

这个插件可以帮助您在文章中插入重要引述。

{% pullquote [class] %}
content
{% endpullquote %}

这个效果，我也不懂是几个意思，感觉和前面的差不多

jsFiddle

在文中嵌入jsFiddle，jsFiddle是一款HTML,CSS,JAVASCRIPT在线调试工具

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

参数全在URL里面找

URL

经过不断地尝试匹配URL，最终成功搞定
设置如下：

{% jsfiddle AntBody/138zf8kk  js,html,css,result  dark %}

可以查看渲染后的URL来推测插件运行原理,将上面的路径一个加一个匹配，没有写，则采用默认路径，会得到404

{% jsfiddle AntBody/138zf8kk js,html,css,result dark %}

Gist

gist是什么呢？请看这篇文章如何看待Github Gist这个服务，怎么样更好的利用
在文章中嵌入 Gist。

{% gist gist_id [filename] %}

例子：

{% gist 199bc1a29687f7ae6da0180836b5354b find %}

gist_id在URL中找寻

{% gist 199bc1a29687f7ae6da0180836b5354b find %}

下面的是我原文引用，防止链接失效

作者：知乎用户
链接：https://www.zhihu.com/question/21343711/answer/32023379
来源：知乎
      Github作为代码分享平台在开发者中非常流行。此平台托管了包括游戏、书籍以至于字体在内的一千
两百多万个项目（现在更多），这使其成为互联网上最大的代码库。  Github还提供另一个非常有用的功能，
这就是Gist。  开发人员常常使用Gist记录他们的代码片段，但是Gist不仅仅是为极客和码农开发的，每个
人都可以用到它。如果您听说过类似Pastebin或者Pastie这样的web应用的话，那您就可以看到它们和Gist
很像，但是Gist比它们要更优雅。因为这些免费应用一般含有广告，而且带有很多其他杂七杂八的功能。  

A、Gist - 任何人都能用得着

如果您不是极客您可以按照如下方式使用Gist：  
1. 匿名张贴您不需要拥有Github账号就可以使用Gist。用浏览器打开http://gist.github.com，在窗口
中写下你想说的就可以创建一个Gist。您可以发布一个私密的Gist，也就是说这个Gist将不能被他人搜索到
而只对直接在浏览器中输入其URL的人可见。    
2. 能像wiki一样记录历史如果您修改了已经发布了的Gist的话，之前的所有版本都将被保存。您可以点击
Revisions按钮按时间浏览，而且您可以通过内置的diff引擎查看任意两个版本间的差异。 这也可以用于比
较文本文件。 
3. 发布富文本内容虽然Gist只能用纯文本来写，但是您可以用markdown来发布html格式的Gist。您可以添
加列表、图片（已有图床上的）和表格。当您用markdown的时候不要忘了文件名要以.md为后缀。  
4. 把Gist当作一个写作平台虽然现在有很多写作引擎，比如Blogger、Medium、Tumblr，但您还可以用
Gist来快速发布您的作品。您可以用纯文本或者markdown等文档标记语言些一个Gist然后用
http://roughdraft.io来把它作为一个独立的网页发布。
5. 托管gist上的单个页面Bl.ocks 是一个非常有趣的专为Gist开发的应用。  您可以用纯文本把HTML、
CSS、JavaScript代码写下来以index.html为文件名保存为Gist，然后用http://bl.ocks.org把渲染好的
结果在浏览器中展示出来。比如，这个gist展示出来就是这样。  显然宽带限制是一个问题，但是
http://bl.ock.org作为一个通过Gist托管HTML的工具仍然是相当不错的。 当然您也可以用
Google Drive。    
6. 制作任务列表您可以用Gist跟踪待处理任务（举个栗子）。这是用纯文本的特殊语法写的但是你可以任意
勾选。
- [x] Pick the flowers
- [ ] Call John 9303032332
- [x] Cancel cable subscription
- [ ] Book the flight tickets  

您可以勾选或者勾去任意选项，源文本将会自动变更。如果您的Gist是公有的的话，任何人都可以看到您的
列表，但是只有您（拥有者）可以改变其勾选状态。 备注：其实任务列表也可以在issue中建立，所有拥有
写权限的人都可以uncheck/check。
7. 把Gist作为一个网页收藏夹在Chrome浏览器您可以找到一个叫GistBox的插件，通过这个插件您可以在浏
览网页时选择保存网页内容为Gist。您甚至可以添加标注或者话题标签以易于以后更容易找到它们。  
8. 把Gist嵌入网页中您用一行js代码就可以把任何一条Gist嵌入到网页中。嵌入的Gist格式不发生任何变
化，而且访问者可以非常方便的把它们fork到他们的Github中。要嵌入wordpress的话有这个插件和这个短
代码可以使用。
9. 测量访问量您可以使用Google Analytics查看您的Gist的访问量。因为Gist纯文本中不允许运行js代码，
所以我们可以用GA Beacon来记录实时访问Gist的情况。把如下代码添加到Gist中，用markdown格式保存，
这样就在这个Gist中添加了一个透明追踪图像了。
![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)   
10. 在桌面端管理GistGisto是一个能让您在浏览器之外管理Gist的桌面应用。您可以对Gist进行搜索、编
辑、查看历史和分享。 此应用可运行于苹果、微软和linux系统。 当然您也可以用GistBox这个web应用替
代它。 您是不是对Gist有了一个全新的认识呢？

iframe

在文章中插入 iframe,利用这个可以嵌入音乐和视频

{% iframe url [width] [height] %}

{% iframe http://v.youku.com/v_show/id_XOTIxNDYzODU2.html 930 542 %}

Image

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

{% img [class names] /yn.jpeg [300] [height] [云南风景 [风景图片]] %}

Link

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

{% link 百度一下 http://www.baidu.com [external] [超链接] %}

{% link 百度一下 http://www.baidu.com [这是什么] [超链接] %}

这个external是做什么用的，我也不清楚呐!

include Code

插入 source 文件夹内的代码文件。

{% include_code [title] [lang:language] path/to/file %}

例子：

include_code app.js lang:javascript /app.js

效果：

{% include_code appjs lang:javascript /app.js %}

Youtube

在文章中插入 Youtube 视频。

{% youtube video_id %}

{% youtube ICkxRE_GdgI %}

id在Url中

Vimeo

在文章中插入 Vimeo 视频。

{% vimeo video_id %}

{% vimeo 180916725 %}

id在Url中

Raw

如果您想在文章中插入 Swig 标签，可以尝试使用 Raw 标签，以免发生解析异常。

{% raw %}
content
{% endraw %}

{% raw %}
content
{% endraw %}

相对路径引用的标签插件

比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法,

![](/example.jpg)

它将不会出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

{% asset_img example.jpg This is an example image %}

引用文章

引用其他文章的链接。

{% post_path slug %}
{% post_link slug [title] %}

引用资源

引用文章的资源

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

上面两个具体怎么用，还不是很明白，以后明白了再更新

资源

资源文件夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

数据文件

有时您可能需要在主题中使用某些资料，而这些资料并不在文章内，并且是需要重复使用的，那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

举例来说，在 source/_data 文件夹中新建 menu.yml 文件：

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料

{% for link in site.data.menu %}
  <a href="{{ link }}">{{ loop.key }}</a>
{% endfor %}

到此Hexo的文档讲解结束，请看下一篇搭建Hexo博客进阶篇---主题自定义

参考资料

Hexo官方网站 : https://hexo.io/</b></span>