タグプラグイン

タグプラグインは、投稿タグとは異なります。これらは Octopress から移植されており、投稿に特定のコンテンツをすばやく追加するための便利な方法を提供します。

投稿を任意の形式で書くことができますが、タグプラグインは常に利用可能であり、構文は同じです。

タグプラグインは Markdown 構文内にラップしないでください。たとえば、[]({% post_path lorem-ipsum %}) はサポートされていません。

ブロック引用

オプションの著者、ソース、タイトル情報を使用して、投稿に引用を追加するのに最適です。

エイリアス: quote

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

例

引数なし。プレーンブロック引用。

{% 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 %}

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.

本からの引用

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

自分の幸せだけを求めるな。みんなの幸せを求めよ。思いやりを通して。慈悲を通して。

デイビッド・レビザンWide Awake

Twitter からの引用

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

新着: DevDocs に構文のハイライトが追加されました。 http://devdocs.io

@DevDocstwitter.com/devdocs/status/356095192085962752

Web 上の記事からの引用

{% 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 %}

すべてのインタラクションは貴重であり、喜びを与える機会です。

セス・ゴーディンIsland Marketing へようこそ

コードブロック

投稿にコードスニペットを追加するための便利な機能です。

エイリアス: code

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

option:value 形式で追加のオプションを指定します。たとえば、line_number:false first_line:5。

追加オプション	説明	デフォルト
`line_number`	行番号を表示する	`true`
`line_threshold`	コードブロックの行数を超える場合にのみ行番号を表示する。	`0`
`highlight`	コードハイライトを有効にする	`true`
`first_line`	最初の行番号を指定する	`1`
`mark`	特定の行をハイライトする。各値はカンマで区切る。ダッシュを使用して数値範囲を指定する例: `mark:1,4-7,10` では、1、4 から 7、10 の行がマークされます。
`wrap`	`<table>` でコードブロックをラップする	`true`

例

プレーンコードブロック

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

alert('Hello World!');

言語の指定

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

[rectangle setX: 10 y: 10 width: 20 height: 20];

コードブロックにキャプションを追加する

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

Array.map

array.map(callback[, thisArg])

キャプションと URL を追加する

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

_.compactUnderscore.js

\_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

バックティックコードブロック

コードブロックを使用する場合と同じですが、ブロックを区切るために 3 つのバックティックを使用します。

`` [言語] [タイトル] [URL] [リンクテキスト] コードスニペット ``

引用を挿入する

投稿に引用を入れるには

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

jsFiddle (`v7.0.0`で削除)

Hexo 7.0.0でタグが削除されました。既存の投稿との後方互換性については、プラグインhexo-tag-embedが提供されています。

jsFiddleスニペットを埋め込むには

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

Gist (`v7.0.0`で削除)

v7.0.0+をお使いの場合は、代わりにhexo-tag-embedをお使いください。

Gistスニペットを埋め込むには

{% gist gist_id [filename] %}

iframe

iframeを埋め込むには

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

画像

指定されたサイズの画像を挿入します。

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

リンク

target="_blank"属性付きのリンクを挿入します。

{% link text url [external] [title] %}

コードを挿入する

source/downloads/codeフォルダ内のコードスニペットを挿入します。フォルダの場所は、`config`の`code_dir`オプションで指定できます。

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

例

test.jsのコンテンツ全体を埋め込みます

{% include_code lang:javascript test.js %}

3行目のみを埋め込みます

{% include_code lang:javascript from:3 to:3 test.js %}

5行目から8行目を埋め込みます

{% include_code lang:javascript from:5 to:8 test.js %}

5行目からファイルの終わりまで埋め込みます

{% include_code lang:javascript from:5 test.js %}

1行目から8行目を埋め込みます

{% include_code lang:javascript to:8 test.js %}

YouTube (`v7.0.0`で削除)

v7.0.0+をお使いの場合は、代わりにhexo-tag-embedをお使いください。

YouTube動画を挿入します。

{% youtube video_id [type] [cookie] %}

例

動画を埋め込みます

{% youtube lJIrF4YjHfQ %}

プレイリストを埋め込みます

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

プライバシー強化モードを有効にします

このモードでは、YouTubeのクッキーは使用されません。

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

Vimeo (`v7.0.0`で削除)

v7.0.0+をお使いの場合は、代わりにhexo-tag-embedをお使いください。

応答性の高い、または指定されたサイズのVimeo動画を挿入します。

{% vimeo video_id [width] [height] %}

投稿を挿入

他の投稿へのリンクを含めます。

{% post_path filename %}
{% post_link filename [title] [escape] %}

このタグを使用する場合、パーマリンクや、言語や日付などのフォルダー情報は無視できます。

たとえば、{% post_link how-to-bake-a-cake %}などです。

投稿のファイル名がhow-to-bake-a-cake.mdの場合、投稿がsource/posts/2015-02-my-family-holidayにあり、パーマリンクが2018/en/how-to-bake-a-cakeであっても、これは機能します。

投稿のタイトルを表示するのではなく、表示するテキストをカスタマイズできます。

投稿のタイトルとカスタムテキストは、デフォルトでエスケープされています。エスケープを無効にするには、escapeオプションを使用できます。

たとえば

投稿のタイトルを表示します。

{% post_link hexo-3-8-released %}

Hexo 3.8.0がリリースされました

カスタムテキストを表示します。

{% post_link hexo-3-8-released '投稿へのリンク' %}

投稿へのリンク

タイトルをエスケープします。

{% post_link hexo-4-released 'How to use <b> tag in title' %}

タイトルでタグを使用する方法

タイトルをエスケープしません。

{% post_link hexo-4-released '<b>bold</b> custom title' false %}

太字のカスタムタイトル

アセットを含める

投稿のアセットを含め、post_asset_folderと併用します。

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

画像を埋め込む

hexo-renderer-marked 3.1.0+では、（オプションで）画像の投稿のパスを自動的に解決できます。有効にする方法についてはこのセクションを参照してください。

「foo.jpg」はhttp://example.com/2020/01/02/hello/foo.jpgにあります。

既定（オプションなし）

{% asset_img foo.jpg %}

<img src="/2020/01/02/hello/foo.jpg" />

カスタムクラス

{% asset_img post-image foo.jpg %}

<img src="/2020/01/02/hello/foo.jpg" class="post-image" />

表示サイズ

{% asset_img foo.jpg 500 400 %}

<img src="/2020/01/02/hello/foo.jpg" width="500" height="400" />

タイトルとAlt

{% asset_img foo.jpg "lorem ipsum'dolor'" %}

<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor" />

URL

url_for (7.0.0+)

ルートパスをプレフィックスとして追加したURLを返します。出力は自動的にエンコードされます。

{% url_for text path [relative] %}

例

_config.yml
root: /blog/ # example

{% url_for blog index.html %}

<a href="/blog/index.html">blog</a>

相対リンクは、既定でrelative_linkオプションに従います
例: 投稿/ページのパスは'/foo/bar/index.html'です。

_config.yml
relative_link: true

{% url_for blog index.html %}

<a href="../../index.html">blog</a>

relative_linkが有効でも無効にしても、相対リンクではないリンクを出力することもできます。

{% url_for blog index.html false %}

<a href="/index.html">blog</a>

full_url_for (7.0.0+)

config.urlをプレフィックスとして追加したURLを返します。出力は自動的にエンコードされます。

{% full_url_for text path %}

例

_config.yml
url: https://example.com/blog # example

{% full_url_for index /a/path %}

<a href="https://example.com/blog/a/path">index</a>

Raw

特定のコンテンツが投稿で処理の問題を引き起こす場合は、rawタグで囲んでレンダリングエラーを回避します。

{% raw %}
content
{% endraw %}

投稿抜粋

投稿の抜粋としてタグの前に置かれたテキストを使用します。指定されている場合、フロントマターのexcerpt:の値が優先されます。

例

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ブロック引用

例

コードブロック

例

バックティックコードブロック

引用を挿入する

jsFiddle (v7.0.0で削除)

Gist (v7.0.0で削除)

iframe

画像

リンク

コードを挿入する

例

YouTube (v7.0.0で削除)

例

Vimeo (v7.0.0で削除)

投稿を挿入

アセットを含める

画像を埋め込む

URL

url_for (7.0.0+)

full_url_for (7.0.0+)

Raw

投稿抜粋

jsFiddle (`v7.0.0`で削除)

Gist (`v7.0.0`で削除)

YouTube (`v7.0.0`で削除)

Vimeo (`v7.0.0`で削除)