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

时间  2019-12-05
标签 搭建 hexo 博客 进阶 文档 讲解 繁體版
原文   原文链接

Hexo 尚未结束，而是刚刚开始！

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

  • Hexo 文档详细说明css

  • Hexo 主题自定义html

  • Hexo 小部件java

  • Hexo 模板解析linux

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

Hexo不经常使用的命令

render

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

clipboard.png

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

clipboard.png

后来我想了一下，输出到一个文件，确定是要写输出以后的文件名的
因此改为vim

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

看如今就行了呢，在Desktop/postData文件夹下面看到了a.html浏览器

clipboard.png

由这两张图，咱们就知道了，hexo-render命令其实就是把咱们的文章经过模板渲染成html代码，固然渲染完成后是能够输出到另外一个文件的

list

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

clipboard.png

安全模式

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）的路径。

clipboard.png

这张图能够看出，以上的所有都是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里面找

clipboard.png

通过不断地尝试匹配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/questio...
来源：知乎
Github做为代码分享平台在开发者中很是流行。此平台托管了包括游戏、书籍以致于字体在内的一千两百多万个项目（如今更多），这使其成为互联网上最大的代码库。 Github还提供另外一个很是有用的功能，这就是Gist。 开发人员经常使用Gist记录他们的代码片断，可是Gist不只仅是为极客和码农开发的，每一个人均可以用到它。若是您据说过相似Pastebin或者Pastie这样的web应用的话，那您就能够看到它们和Gist很像，可是Gist比它们要更优雅。由于这些免费应用通常含有广告，并且带有不少其余杂
七杂八的功能。
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。

  1. 把Gist做为一个网页收藏夹在Chrome浏览器您能够找到一个叫GistBox的插件，经过这个插件您能够在浏览网页时选择保存网页内容为Gist。您甚至能够添加标注或者话题标签以易于之后更容易找到它们。

  2. 把Gist嵌入网页中您用一行js代码就能够把任何一条Gist嵌入到网页中。嵌入的Gist格式不发生任何变化，并且访问者能够很是方便的把它们fork到他们的Github中。要嵌入wordpress的话有这个插件和这个短代码可使用。

  3. 测量访问量您可使用Google Analytics查看您的Gist的访问量。由于Gist纯文本中不容许运行js代码，因此咱们能够用GA Beacon来记录实时访问Gist的状况。把以下代码添加到Gist中，用markdown格式保存，这样就在这个Gist中添加了一个透明追踪图像了。

![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)

Analytics

  1. 在桌面端管理GistGisto是一个能让您在浏览器以外管理Gist的桌面应用。您能够对Gist进行搜索、编辑、查看历史和分享。 此应用可运行于苹果、微软和linux系统。 固然您也能够用GistBox这个web应用替代它。 您是否是对Gist有了一个全新的认识呢？

iframe

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

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

{% iframe http://v.youku.com/v_show/id_... 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博客进阶篇---主题自定义

参考资料

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程