Hexo
Hexo
HexoはNode.js製の高速でシンプルかつ強力なブログフレームワークです。
Butterfly
A Simple and Card UI Design theme for Hexo
構築
n(nodejs, npm)
https://github.com/tj/ncurl -L https://bit.ly/n-install | bash
~/.bashrc の末尾に一行追加されます
hexo
npm install hexo-cli -g
hexo init blog
cd blog
npm installhexo-theme-butterfly (+ hexo-renderer-pug hexo-renderer-stylus)
npm install hexo-theme-butterfly hexo-renderer-pug hexo-renderer-stylus
cp ./node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml./_config.yml theme: butterfly
hexoサーバを起動
hexo s
ブラウザで表示
http://localhost:4000カスタマイズ
https://ktkr3d.github.io/2023/12/09/Hexo-Theme-Butterfly/
タグプラグイン
Plugins
Hexo is a fast, simple & powerful blog framework powered by Node.js.
Hexo tag plugin
- hexo
blockquote(quote) code(codeblock) iframe img(image) include_code(include-code) link(a, anchor) post_path post_link asset_path asset_link asset_img(asset_image) pullquote url_for full_url_for - hexo-tag-embed
gist jsfiddle vimeo youtube
Theme tag plugin
- hexo-theme-butterfly
button chartjs flink gallery hide inlineImg label mermaid note score series tabs timeline
Custom tag plugin
- hexo-butterfly-tag-plugins-plus
btns bubble carousel checkbox folding ghcard image inline-labels link media notation poem progress reference site-card span tip - hexo-pdf
pdf - hexo-tag-bootstrap
alert badge btn card carddeck cardgroup carousel col container input jumbo label modalbtn modal pill row textcolor - hexo-tag-github-code
ghcode - hexo-tag-google-charts
google-charts - hexo-tag-ogp-link-preview
link-preview - hexo-tag-table-bootstrap
table - hexo-tag-twitter
twitterURLの
x.comをtwitter.comに置換すれば利用可能
Custom filter
- hexo-filter-mermaid-diagrams
バックティックコードブロックで言語にmermaidを指定する
コードブロック
https://hexo.io/ja/docs/tag-plugins#コードブロック
構文
```[language] [title] [url] [link text]
code snippet
```Markdownの囲みコードブロック(バックティックコードブロック)構文の場合は追加オプションがない
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}{% code [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcode %}highlight.js でサポートされている言語
https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md主な言語 エイリアス Bash bash, sh, zsh DOS dos, bat, cmd Fish 無いのでshで代替 HTML, XML xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg Ini, TOML ini, toml JavaScript javascript, js, jsx Lua lua, pluto Markdown markdown, md, mkdown, mkd OpenGL Shading Language glsl Plaintext plaintext, txt, text PowerShell powershell, ps, ps1 Stylus stylus, styl TypeScript typescript, ts, tsx, mts, cts YAML yml, yaml 追加オプション
オプション 説明 デフォルト line_number 行番号を表示 true line_threshold コードブロックの行数がこの閾値を超える場合にのみ行番号を表示 0 highlight コードのハイライトを有効にする true first_line 最初の行番号を指定 1 mark コンマ区切りで指定された行をハイライト。 範囲指定にはハイフンを使用
例:mark:1,4-7,10は行1、4から7、10をマークします。wrap コードブロックを <table>でラップtrue
ヘッダなし表
HTMLでタグのオミットを駆使する
- 構文
<table>
<tr><td style="background: #f5f6f8"><b>URL<td>https://www.shadertoy.com/view/XtlSD7
<tr><td style="background: #f5f6f8"><b>FILE<td>$HOME/.config/ghostty/shaders/mario.glsl
</table> - 表示例
URL https://www.shadertoy.com/view/XtlSD7 FILE $HOME/.config/ghostty/shaders/mario.glsl
引用
構文
> 引用
> 引用
>> 引用表示例
引用
引用
引用
注記
構文
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}表示例 (class)
注記メッセージ (default)
注記メッセージ (primary)
注記メッセージ (info)
注記メッセージ (success)
注記メッセージ (warning)
注記メッセージ (danger)
表示例 (color、no-icon)
表示例 (icon: no-icon)
{% note no-icon %}
#### 見出し
注記メッセージ (指定なし)
{% endnote %}表示例 (color: blue, icon: ‘fas fa-bullhorn’, style: simple)
2021 is coming soon….
キーボード
- 構文
<kbd>F12</kbd>
- 表示例
F12
Google Charts
https://ktkr3d.github.io/2019/06/26/Hexo-Tag-Google-Charts/
ソート可能な表
- 構文
{% googlecharts Table 100% 100% %}
テーブル名
{"showRowNumber": true}
'Name', 'Salary', 'Full Time Employee'
'Mike', {v: 10000, f: '$10,000'}, true
'Jim', {v:8000, f: '$8,000'}, false
'Alice', {v: 12500, f: '$12,500'}, true
'Bob', {v: 7000, f: '$7,000'}, true
{% endgooglecharts %}テーブル名は表示されない。
- 表示例
バーチャート
- 構文
{% googlecharts BarChart 100% 100% %}
チャート名
{ "isStacked": true, "legend": {"position": "top" }}
'Name', 'EFI', 'Reserve', 'Win', 'Ubuntu', 'Recovery'
'出荷時', 10, 10, 447, 0, 10
'再構成', 10, 10, 365, 82, 10
{% endgooglecharts %}チャート名を設定しないと
No titleと表示される。不要な場合は半角空白を設定する。 - 表示例
Youtube動画の引用
- 構文
{% youtube nGdBKGPp-OE %}
- 表示例
Gistの引用
- 構文
{% gist 9add6d3f7a0ef4e4c488 timesync.sh %}
- 表示例
レンダリング抑止
- 構文
{% raw %}
content
{% endraw %}https://hexo.io/ja/docs/tag-plugins#Raw
記事の一部のコンテンツが処理中に問題を起こす場合、rawタグでラップしてレンダリングエラーを回避します。
emoji
https://www.webfx.com/tools/emoji-cheat-sheet/
- 使いそうなemoji 🙂⭐☂❤️🔥⚡⚽🎲🔔🔖✉✏️📝📋🔒💣🧰🔧💡🔍✅✔❌🚧❓
- 使うかもしれないemoji 😲💦👏🎉⚠⚙🏁🚩🍄🐟🍎🍓🍞🥚🍙🍦🎂🌏🏠🚂🚗🚚🚲✈⏰☀🌙☁🌈💧🏆🎵🎤🎧📞☎🛠❗🔴⚫⚪🔓🔎
サイトリンクカード
- Open Graph プロトコル対応の場合
{% link_perview ★URL★ %}
★URL★
{% endlink_perview %}https://toolsaday.com/seo/open-graph
URLがOpen Grapfプロトコルに対応しているかチェックできます - Open Graph プロトコル非対応の場合
<a href="★URL★" target="_blank" rel="external nofollow noopener noreferrer" class="link-preview">
<div class="og-image">
<img src="★IMAGE URL★" alt="★TITLE★" class="not-gallery-item" loading="lazy"></div>
<div class="descriptions">
<div class="og-title">★TITLE★</div>
<div class="og-description">★DESCRIPTION★</div></div></a>