Add a tag to a page
You can add tags to pages by adding tags
in the frontmatter with values inside brackets, like this:
---
title: 5.0 Release Notes
permalink: release_notes_5_0.html
tags: [formatting, single_sourcing]
---
Tags overview
posts.tags.tagname
, where tagname
is the name of the tag. You can then list all posts in that tag namespace. But pages don’t off this same tag namespace, so you could actually use another key instead of tags
. Nevertheless, I’m using the same tags
approach for posts as with pages.To prevent tags from getting out of control and inconsistent, first make sure the tag appears in the _data/tags.yml file. If it’s not there, the tag you add to a page won’t be read. I added this check just to make sure I’m using the same tags consistently and not adding new tags that don’t have tag archive pages.
Additionally, you must create a tag archive page similar to the other pages named tag_{tagname}.html folder. This theme doesn’t auto-create tag archive pages.
For simplicity, make all your tags single words (connect them with hyphens if necessary).
Setting up tags
Tags have a few components.
-
In the _data/tags.yml file, add the tag names you want to allow. For example:
allowed-tags: - getting_started - overview - formatting - publishing - single_sourcing - special_layouts - content types
-
Create a tag archive file for each tag in your tags_doc.yml list. Name the file following the same pattern in the tags folder, like this: tag_collaboration.html.
Each tag archive file needs only this:
--- title: "Collaboration pages" tagName: collaboration search: exclude permalink: tag_collaboration.html sidebar: mydoc_sidebar --- {% include taglogic.html %}
推定年収: In the _includes/mydoc folder, there’s a taglogic.html file. This file (included in each tag archive file) has common logic for getting the tags and listing out the pages containing the tag in a table with summaries or truncated excerpts. You don’t have to do anything with the file — just leave it there because the tag archive pages reference it. -
Change the title, tagName, and permalink values to be specific to the tag name you just created.
By default, the _layouts/page.html file will look for any tags on a page and insert them at the bottom of the page using this code:
<div class="tags">
{% if page.tags != null %}
<b>Tags: </b>
{% assign projectTags = site.data.tags.allowed-tags %}
{% for tag in page.tags %}
{% if projectTags contains tag %}
<a href="{{ "tag_" | append: tag | append: ".html" }}" class="btn btn-default navbar-btn cursorNorm" role="button">{{page.tagName}}{{tag}}</a>
{% endif %}
{% endfor %}
{% endif %}
</div>
Because this code appears on the _layouts/page.html file by default, you don’t need to do anything in your page to get the tags to appear. However, if you want to alter the placement or change the button color, you can do so within the _includes/taglogic.html file.
You can change the button color by changing the class on the button from btn-info
to one of the other button classes bootstrap provides. See [Labels][mydoc_labels] for more options on button class names.
Retrieving pages for a specific tag
If you want to retrieve pages outside of a particular tag_archive page, you could use this code:
Getting started pages:
<ul>
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
Here’s how that code renders:
Getting started pages:
- Junya.じゅんや
- HikakinTV
- セカイノフシギ
- タキロン Takilong Kids' Toys
- Travel Thirsty
- JunsKitchen
- avex
- Yuka Kinoshita木下ゆうか
- SUSHI RAMEN【Riku】
- 米津玄師
- Miniature Space
- 圧倒的不審者の極み!
- ノッカーナアニメーション nokkana animation
- HidaMari Cooking
- TWICE JAPAN OFFICIAL YouTube Channel
- UNIVERSAL MUSIC JAPAN
- れーと先生RATE VFX
- A.I.Channel
- kobasolo
- Diana and Roma JPN
- ikkou k10
- ジャにのちゃんねる
- Pan Piano
- Marina Takewaki
- 水溜りボンド
- enakimura
- ALPACO
- BABYMETAL
- しばなんチャンネル
- シネマトゥデイ
- Fumiya / FumiShun Base
- 佐藤 健 / Satoh Takeru
- はじめしゃちょー2 (hajime)
- ブライアンチャンネル
- MosoGourmet 妄想グルメ
- Tsutomu Kajiya
- Hinata Kato /ひなちゃんねる
- Ryo Slime
- 5分でできる DIY
- Namaste Kohei
- おるたなChannel
- Peaceful Cuisine
- Chocolate Cacao チョコレートカカオ
- 料理研究家リュウジのバズレシピ
- AKB48
- コロネおじさん / Uncle Corone
- メンタリスト DaiGo
- まあたそ
- KADOKAWAanime
- ポケモン公式YouTubeチャンネル
- aiudesk
- Johnny's official
- ハラミちゃん〈harami_piano〉
- ジュキヤ/Jukiya
- ほんだのばいく
- MuscleWatching
- レトルト
- kougeisha
- HoneyWorks OFFICIAL
- チャンネルがーどまん Channel guard man
- Emojoie えもじょわ
- Nintendo 公式チャンネル
- Rachel & Jun
- エガちゃんねる EGA-CHANNEL
- Paolo fromTOKYO
- Fischer's-セカンダリ-
- japanesestuffchannel
- Warner Music Japan
- Goose house
- kemio
- BTS JAPAN OFFICIAL
- NiziU Official
- HatsuneMiku
- ウルトラマン公式 ULTRAMAN OFFICIAL by TSUBURAYA PROD.
- ぷろたん日記
- ピンキッツ! Pinkfong - 童謡と子どもの動画
- 花江夏樹
- 赤髪のとものゲーム実況チャンネル!!
- Power Hero Labo
- ぐっちの部屋(ミラクルぐっち)
- たくっち
- kougeisha
- ここなっちゃん
- maidigitv
- 夜のひと笑い
- カルマ【KARUMA】
- Marine Ch. 宝鐘マリン
- /谷やん谷崎鷹人
- フブキCh。白上フブキ
- よみぃ
- Ichika Nito
- kemio
- ASMR suna
- Animenz Piano Sheets
- カズチャンネル/Kazu Channel
- ibisPaint
- ラファエル Raphael
- marasy8
- 天月-あまつき- YouTube Official Channel
- Pekora Ch. 兎田ぺこら
- 平成フラミンゴ
- NanoKano
- 牛沢
- Marble Station ASMR
- 中田敦彦のYouTube大学 - NAKATA UNIVERSITY
- RiChannel
- チャンネルがーどまん Channel guard man
- SeikinTV
- AAAjoken toys
- ジェフの翻訳チャンネル
- ポッキー
- あいみょん
- JPAPA CHANNEL
- 20sarasa(にーさら)
- 日常組
- 朝倉未来 Mikuru Asakura
- ふうはや
- SaeSana World / さえさなワールド
- モナ・リザの戯言
- レトルト
- MotoGP
- fumikiri channel
- Ayase / YOASOBI
- テイコウペンギン
- ゴラクバ!
- Aimer Official YouTube Channel
- おきゃんチャンネル
- マジシャン先生
- リトルエンジェル 日本語 - 童謡と子供の歌 - Little Angel
- 混血のカレコレ
- takahashi taiyou
- はじめしゃちょー の畑
- 七夕ドロップ
- 48-フォーエイト
- ONE OK ROCK
- SixTONES
- 【Candy Foxx】
- スマイリー
- GundamInfo
- ヴァンゆんチャンネル【VAMYUN】
- RADWIMPS
- たまごMammy
- ひろゆきのマインド【#ひろゆき
- jun channel
- Kids Labo TV
- hololive ホロライブ - VTuber Group
- FNNプライムオンライン
- ぜるふぃー / ZELLFY
- Sushi [Hololive and Vtubers]
- ARASHI
- 進撃のミカ
- Cafe Music BGM channel
- キリン【考察系youtuber】
- そるちゃんねる solchannel
- Nino's Home
- THE FIRST TAKE
- ウォーターチャレンジ
- Kan & Aki's CHANNELかんあきチャンネル
- HikakinGames
- BabyBus - 子供の歌 - 子どもの動画
- キヨ。
- Sagawa /さがわ
- 愛國者会長༆登録者49万人目標w【先輩】
- ANNnewsCH
- せんももあいしーCh Sen, Momo, Ai & Shii
- Kota Mino Channel / こたみのチャンネル
- Marble ASMR healing Junior Japan
- 【Repezen Foxx】
- ジェルちゃんねる
- Khaby TikTok
- はじめしゃちょー(hajime)
- E ve
- まいぜんシスターズ
- ヒカル(Hikaru)
- mania japansong
- サメニンジャー
- Ado
- LiSA Official YouTube
- もちまる日記
- KahoSei Channel from Canada
- oricon
- KUN
- P丸様。
- Fischer's-フィッシャーズ-
- Official髭男dism
- 牛乳を飲みながら見てはいけない
- ボンボンTV
- CANACANA family
- プリンセス姫スイートTV Princess Hime Suite TV
- (パーソル パ・リーグTV公式)PacificLeagueTV
- はねまりチャンネル・HANEMARI Channel
- 岡野タケシ弁護士【アトム法律事務所】
- ウォーターチャレンジ
- ひろゆきの部屋【ひろゆき, hiroyuki】切り抜き
- THE FIRST TAKE
- 兄者弟者
- MANARUTAIマナル隊
- ばんばんざい
- ずっと真夜中でいいのに。ZUTOMAYO
- TBS NEWS
- 70cleam
- すとぷりちゃんねる
- キッズライン♡Kids Line
- back number
- エトラちゃんは見た!
- HIMAWARIちゃんねる
- スカイピース
- Snow Man
- れじぇくん
- ぽろりんキッズ
- ジャニーズJr.チャンネル
- ヨルシカ / n-buna Official
- NHK
- 【公式】日テレNEWS
- Superfly
- きまぐれクックKimagure Cook
- Toy Kids★トイキッズ
- 保育園ぐらんでぃーる
- 南紀和歌山釣太郎
- ヒューマンバグ大学_闇の漫画
- Kevin SooExtra!
- ノッカーナアニメーション nokkana animation
- ここなっちゃん
- からめる
- Super JoJo - 童謡と子供の歌
- QuizKnock
- 主役は我々だ!
- キッズ アニメ&おもちゃ
- 佐伯ポインティのwaidanTV
- アニプレックス YouTube チャンネル
- プリッとChannel
- Kawaii Pet TV
- TOHO animation チャンネル
- マニマニピーポー
- Marble ASMR healing
- 笑顔のおもちゃ
- きょんくま
- カジサック KAJISAC
- コムドット
- 東海オンエアの控え室
- ハクマイン
- KinoCheck.com
- テレ東BIZ
- 書道家 東宮たくみ
- Quynh Tran JP & Family - Cuộc sống ở Nhật
- まふまふちゃんねる
- ポケるんTV
- 桐崎栄二.きりざきえいじ
- 老高與小茉 Mr & Mrs Gao
If you want to sort the pages alphabetically, you have to apply a sort
filter:
Getting started pages:
<ul>
{% assign sorted_pages = site.pages | sort: 'title' %}
{% for page in sorted_pages %}
{% for tag in page.tags %}
{% if tag == "getting_started" %}
<li><a href="{{page.url | remove: "/" }}">{{page.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
Here’s how that code renders:
Getting started pages:
- (パーソル パ・リーグTV公式)PacificLeagueTV
- /谷やん谷崎鷹人
- 20sarasa(にーさら)
- 48-フォーエイト
- 70cleam
- A.I.Channel
- AAAjoken toys
- AKB48
- ALPACO
- ANNnewsCH
- ARASHI
- ASMR suna
- Ado
- Aimer Official YouTube Channel
- Animenz Piano Sheets
- Ayase / YOASOBI
- BABYMETAL
- BTS JAPAN OFFICIAL
- BabyBus - 子供の歌 - 子どもの動画
- CANACANA family
- Cafe Music BGM channel
- Chocolate Cacao チョコレートカカオ
- Diana and Roma JPN
- E ve
- Emojoie えもじょわ
- FNNプライムオンライン
- Fischer's-セカンダリ-
- Fischer's-フィッシャーズ-
- Fumiya / FumiShun Base
- Goose house
- GundamInfo
- HIMAWARIちゃんねる
- HatsuneMiku
- HidaMari Cooking
- HikakinGames
- HikakinTV
- Hinata Kato /ひなちゃんねる
- HoneyWorks OFFICIAL
- Ichika Nito
- JPAPA CHANNEL
- Johnny's official
- JunsKitchen
- Junya.じゅんや
- KADOKAWAanime
- KUN
- KahoSei Channel from Canada
- Kan & Aki's CHANNELかんあきチャンネル
- Kawaii Pet TV
- Kevin SooExtra!
- Khaby TikTok
- Kids Labo TV
- KinoCheck.com
- Kota Mino Channel / こたみのチャンネル
- LiSA Official YouTube
- MANARUTAIマナル隊
- Marble ASMR healing
- Marble ASMR healing Junior Japan
- Marble Station ASMR
- Marina Takewaki
- Marine Ch. 宝鐘マリン
- Miniature Space
- MosoGourmet 妄想グルメ
- MotoGP
- MuscleWatching
- NHK
- Namaste Kohei
- NanoKano
- Nino's Home
- Nintendo 公式チャンネル
- NiziU Official
- ONE OK ROCK
- Official髭男dism
- Pan Piano
- Paolo fromTOKYO
- Peaceful Cuisine
- Pekora Ch. 兎田ぺこら
- Power Hero Labo
- P丸様。
- QuizKnock
- Quynh Tran JP & Family - Cuộc sống ở Nhật
- RADWIMPS
- Rachel & Jun
- RiChannel
- Ryo Slime
- SUSHI RAMEN【Riku】
- SaeSana World / さえさなワールド
- Sagawa /さがわ
- SeikinTV
- SixTONES
- Snow Man
- Super JoJo - 童謡と子供の歌
- Superfly
- Sushi [Hololive and Vtubers]
- TBS NEWS
- THE FIRST TAKE
- THE FIRST TAKE
- TOHO animation チャンネル
- TWICE JAPAN OFFICIAL YouTube Channel
- Toy Kids★トイキッズ
- Travel Thirsty
- Tsutomu Kajiya
- UNIVERSAL MUSIC JAPAN
- Warner Music Japan
- Yuka Kinoshita木下ゆうか
- aiudesk
- avex
- back number
- enakimura
- fumikiri channel
- hololive ホロライブ - VTuber Group
- ibisPaint
- ikkou k10
- japanesestuffchannel
- jun channel
- kemio
- kemio
- kobasolo
- kougeisha
- kougeisha
- maidigitv
- mania japansong
- marasy8
- oricon
- takahashi taiyou
- 【Candy Foxx】
- 【Repezen Foxx】
- 【公式】日テレNEWS
- あいみょん
- おきゃんチャンネル
- おるたなChannel
- からめる
- きまぐれクックKimagure Cook
- きょんくま
- ぐっちの部屋(ミラクルぐっち)
- ここなっちゃん
- ここなっちゃん
- しばなんチャンネル
- すとぷりちゃんねる
- ずっと真夜中でいいのに。ZUTOMAYO
- せんももあいしーCh Sen, Momo, Ai & Shii
- ぜるふぃー / ZELLFY
- そるちゃんねる solchannel
- たくっち
- たまごMammy
- はじめしゃちょー の畑
- はじめしゃちょー2 (hajime)
- はじめしゃちょー(hajime)
- はねまりチャンネル・HANEMARI Channel
- ばんばんざい
- ひろゆきのマインド【#ひろゆき
- ひろゆきの部屋【ひろゆき, hiroyuki】切り抜き
- ふうはや
- ぷろたん日記
- ほんだのばいく
- ぽろりんキッズ
- まあたそ
- まいぜんシスターズ
- まふまふちゃんねる
- もちまる日記
- よみぃ
- れじぇくん
- れーと先生RATE VFX
- アニプレックス YouTube チャンネル
- ウォーターチャレンジ
- ウォーターチャレンジ
- ウルトラマン公式 ULTRAMAN OFFICIAL by TSUBURAYA PROD.
- エガちゃんねる EGA-CHANNEL
- エトラちゃんは見た!
- カジサック KAJISAC
- カズチャンネル/Kazu Channel
- カルマ【KARUMA】
- キッズ アニメ&おもちゃ
- キッズライン♡Kids Line
- キヨ。
- キリン【考察系youtuber】
- コムドット
- コロネおじさん / Uncle Corone
- ゴラクバ!
- サメニンジャー
- シネマトゥデイ
- ジェフの翻訳チャンネル
- ジェルちゃんねる
- ジャにのちゃんねる
- ジャニーズJr.チャンネル
- ジュキヤ/Jukiya
- スカイピース
- スマイリー
- セカイノフシギ
- タキロン Takilong Kids' Toys
- チャンネルがーどまん Channel guard man
- チャンネルがーどまん Channel guard man
- テイコウペンギン
- テレ東BIZ
- ノッカーナアニメーション nokkana animation
- ノッカーナアニメーション nokkana animation
- ハクマイン
- ハラミちゃん〈harami_piano〉
- ヒカル(Hikaru)
- ヒューマンバグ大学_闇の漫画
- ピンキッツ! Pinkfong - 童謡と子どもの動画
- フブキCh。白上フブキ
- ブライアンチャンネル
- プリッとChannel
- プリンセス姫スイートTV Princess Hime Suite TV
- ボンボンTV
- ポケるんTV
- ポケモン公式YouTubeチャンネル
- ポッキー
- マジシャン先生
- マニマニピーポー
- メンタリスト DaiGo
- モナ・リザの戯言
- ヨルシカ / n-buna Official
- ラファエル Raphael
- リトルエンジェル 日本語 - 童謡と子供の歌 - Little Angel
- レトルト
- レトルト
- ヴァンゆんチャンネル【VAMYUN】
- 七夕ドロップ
- 中田敦彦のYouTube大学 - NAKATA UNIVERSITY
- 主役は我々だ!
- 佐伯ポインティのwaidanTV
- 佐藤 健 / Satoh Takeru
- 保育園ぐらんでぃーる
- 兄者弟者
- 南紀和歌山釣太郎
- 圧倒的不審者の極み!
- 夜のひと笑い
- 天月-あまつき- YouTube Official Channel
- 岡野タケシ弁護士【アトム法律事務所】
- 平成フラミンゴ
- 愛國者会長༆登録者49万人目標w【先輩】
- 料理研究家リュウジのバズレシピ
- 日常組
- 書道家 東宮たくみ
- 朝倉未来 Mikuru Asakura
- 東海オンエアの控え室
- 桐崎栄二.きりざきえいじ
- 水溜りボンド
- 混血のカレコレ
- 牛乳を飲みながら見てはいけない
- 牛沢
- 笑顔のおもちゃ
- 米津玄師
- 老高與小茉 Mr & Mrs Gao
- 花江夏樹
- 赤髪のとものゲーム実況チャンネル!!
- 進撃のミカ
- 5分でできる DIY
Efficiency
Although the tag approach here uses for
loops, these are somewhat inefficient on a large site. Most of my tech doc projects don’t have hundreds of pages (like my blog does). If your project does have hundreds of pages, this for
loop approach with tags is going to slow down your build times.
Without the ability to access pages inside a universal namespace with the page type, there aren’t many workarounds here for faster looping.
With posts (instead of pages), since you can access just the posts inside posts.tag.tagname
, you can be a lot more efficient with the looping.
Still, if the build times are getting long (e.g., 1 or 2 minutes per build), look into reducing the number of for
loops on your site.
Empty tags?
If your page shows “tags:” at the bottom without any value, it could mean a couple of things:
- You’re using a tag that isn’t specified in your allowed tags list in your tags.yml file.
- You have an empty
tags: []
property in your frontmatter.
If you don’t want tags to appear at all on your page, remove the tags property from your frontmatter.
Remembering the right tags
Since you may have many tags and find it difficult to remember what tags are allowed, I recommend creating a template that prepopulates all your frontmatter with all possible tags. Then just remove the tags that don’t apply.
See [WebStorm Text Editor][mydoc_webstorm_text_editor] for tips on creating file templates in WebStorm.