hexo 内置标签

标签(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。 在标准 Markdown 中,我们无法指定图片的大小,在这种情景下,我们即可使用标签来解决。 Hexo 内置来许多标签来帮助写作者可以更快的书写, 完整的标签列表 可以参考 Hexo 官网。 另外,Hexo 也开放来接口给主题,使主题有可能提供给写作者更简便的写作方法。

文字引用

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

以下为文字引用

1
2
3
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscin……(中间为文本内容)
{% endblockquote %}

以下为书籍引用:

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness hrough mercy.
{% endblockquote %}

以下为网页文字引用:

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

文本居中引用

此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。

使用方式
HTML方式:使用这种方式时,给 img 添加属性 class=”blockquote-center” 即可。
标签方式:使用 centerquote 或者 简写 cq。

1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式,要求NexT版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

效果示例:

图片容器宽度限制的图片

当使用此标签引用图片时,图片将自动扩大 26%,并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式(详细参看底下示例):

使用方式
HTML方式:使用这种方式时,为 img 添加属性 class=”full-image”即可。
标签方式:使用 fullimage 或者 简写 fi, 并传递图片地址、 alt 和 title 属性即可。 属性之间以逗号分隔。

1
2
3
4
5
6
7
8
9
> <!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
> <!-- 其中 class="full-image" 是必须的 -->
> <img src="/image-url" class="full-image" />

> <!-- 标签 方式,要求版本在0.4.5或以上 -->
> {% fullimage /image-url, alt, title %}

> <!-- 别名 -->
> {% fi /image-url, alt, title %}

效果示例:

如何设置阅读全文

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示阅读全文按钮,可以通过以下方法:

  1. 在文章中使用’’more’’手动进行截断,Hexo 提供的方式 推荐
    1
    2
    3
    > 以上是文章摘要
    > <!--more-->
    > 以下是余下全文

more以上內容即是文章摘要,在主页显示,more以下內容点击”Read More”链接打开全文才显示。

  1. 在文章的 front-matter 中添加 description,并提供文章摘录
  2. 自动形成摘要,在 主题配置文件 中添加:
    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150

默认截取的长度为 150 字符,可以根据需要自行设定

建议使用第一种方式,除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。

插入视频

如插人YouTube视频

1
{% youtube video_id %}

如需插入其他视频网站视频,直接插入其分享代码即可。
如插入一个优酷视频的分享代码:

1
<embed src="http://player.youku.com/player.php/sid/XMTMyMzc4OTIxNg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

效果如下:

坚持原创技术分享,您的支持将鼓励我继续创作!