49

私はブログを維持するために標準のjekyllインストールを使用していますが、すべてうまくいっています。自分の投稿にタグを付けたい場合を除きます。

YAMLフロントマターを使用して投稿にタグを付けることはできますが、タグのすべての投稿を一覧表示できるタグごとにページを生成するにはどうすればよいですか？

4

7 に答える 7

79

これは、1つのページにアルファベット順にソートされたタグを使用したソリューションです。
Liquidのみを使用します。つまり、GitHubPagesで機能します。

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}

{% for tag in sortedtags %}
  <h3 id="{{ tag }}">{{ tag }}</h3>
  <ul>
  {% for post in site.tags[tag] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
  </ul>
{% endfor %}

ここで実際の動作を確認できます。

編集：

プラグインなしでタグごとに個別のページを生成する方法もあります（これはGitHub Pagesで機能します）。

私のブログでより詳細な説明があります：
Jekyllを使用したタグ/カテゴリごとに個別のページ（プラグインなし）

まず、新しいレイアウトファイルが必要です。

/_layouts/tagpage.html：

---
layout: default
---

<h1>{{ page.tag }}</h1>

<ul>
{% for post in site.tags[page.tag] %}
  <li>
    {{ post.date | date: "%B %d, %Y" }}: <a href="{{ post.url }}">{{ post.title }}</a>
  </li>
{% endfor %}
</ul>

このレイアウトファイルを使用すると、2行のYAMLフロントマターを含む新しいファイルを追加することで、新しいタグページを追加できます。

jekyllタグの例を次に示します。

/tags/jekyll/index.html：

---
layout: tagpage
tag: jekyll
---

このアプローチの唯一の欠点は、新しいタグを初めて使用するたびに、そのタグ用に新しい2行のファイルを作成することを忘れないでください。

ルートインデックスファイル（つまり、リンクするタグのリスト/tags/jekyll/index.htmlなど）を生成するには、この回答の上部にあるような同様のソリューションを使用して、アルファベット順に並べ替えられたタグを含む単一のページを生成できます。

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
    <a href="/tags/{{ tag }}/">{{ tag }}</a><br>
{% endfor %}

これにより、次のようなリンクのリストが生成されます。

<ul>
    <li><a href="/tags/.net/">.net</a></li>
    <li><a href="/tags/authentication/">authentication</a></li>
    <li><a href="/tags/backup/">backup</a></li>
</ul>

このソリューションは空白を使用してタグを分割するため、タグに空白が含まれている場合は機能せず、YevgeniyBrikmanのコメントがここにも当てはまることに注意してください。

于 2014-01-08T17:29:32.100 に答える
14

この要点は、カテゴリごとにページを生成します：https ://gist.github.com/524748

JekyllGeneratorプラグインとPageサブクラスを使用します。

于 2010-12-14T19:51:31.260 に答える
8

jekyllを使用しているサイトを見てください。タグ付け機能を実装したカスタムフォークがいくつかありますが、うまくいけば、希望する方法でも可能です:-)

于 2009-09-15T14:18:05.857 に答える
5

私は同じ質問をしました、そしてこれに出くわしました：http: //gist.github.com/143571。

これは、タグリストを生成するレーキタスクです。少し変更しました。バージョンは http://github.com/mattfoster/mattfoster.github.com/blob/master/Rakefileにあります。

これではタグごとのページは表示されませんが、途中にあるアンカーを使用できます。

于 2010-02-25T18:53:36.830 に答える
1

タグクラウドとタグページを自動的に生成する素晴らしいJekyllタグ付けプラグインを使用しています。インストールと使用が簡単です。

これが私のブログの「写真」タグのページ（フランス語）で、下部にタグクラウドが表示されています。

于 2015-04-30T10:12:46.140 に答える
1

上記のクリスチャンの答えに基づいて、私は彼が説明したことを実行するbashスクリプトを作成しました。

https://github.com/ObjectiveTruth/objectivetruth.github.io/blob/master/rebuild_tags.sh

ディレクトリに付随する14行のvimスクリプトがあることを確認してください/non_website_resources/

と

/_layouts/tagpage.html上記のクリスチャンの答えに示されているようにしますが、名前を次のように変更します/_layouts/tag_pages.html

ファイル構造は次のようになります。

.jekyll_website_root
├── _posts
├── _layout
│   ├── tag_pages.html
├── rebuild_tags.sh

ルートディレクトリから実行./rebuild_tags.sh

許可拒否エラーが発生した場合は、必ず実行してくださいchmod 777 rebuild_tags.sh

スクリプトのコメントを見ると、かなり単純です。

  • ディレクトリ内のすべてのファイルでsedすべてのタグを検索するために使用します.md_post

  • sedデータを適切な形式にマッサージするために使用します

  • すべての一意のタグを取得し、index.htmlそれぞれのディレクトリとを作成します

このように、新しいタグがある場合は、スクリプトを実行してページを再構築してから、githubにプッシュしてください

タグを実行するための素晴らしくシンプルな非プラグインの方法

編集

他のファイルへの依存関係を削除しました。1つのスクリプトが必要です！

于 2015-07-08T06:38:49.540 に答える
0

私はCSSでこれらを行います。最初に要素をリストし、そのIDとしてタグ名を使用します。

<span id="{{ site.posts | map: 'tags' | uniq | join: '"></span><span id="' }}"></span>

次に、すべての投稿を一覧表示し、そのタグを「tags」カスタム属性の値として使用します。

{% for post in site.posts %}
    <article class="post" tags="{% for tag in post.tags %}{{tag}}{% if forloop.last == false %}{{" "}}{% endif %}{% endfor %}">
        <h3><a href="{{post.url}}">{{post.title}}</a></h3>
    </article>
{% endfor %}

次に、CSSで、デフォルトですべての投稿を非表示にし、URLID/ハッシュと一致するタグを持つ投稿のみを表示します

.post {
    display: none;
}
{% for tag in site.tags %}#{{tag[0]}}:target ~ [tags~={{tag[0]}}]{% if forloop.last == false %}, {% endif %}{% endfor %} {
    display: block;
}
/*
The compiled version will look like this
#tagname:target ~ [tags~="tagname"], #tagname2:target ~ [tags~="tagname2"] {
   display: block;
}
*/

これについての記事をここに作成しました。

于 2020-11-13T16:52:58.960 に答える