Tag Routing : Loop display of tag fields

pandaulait commented 1 year ago

Is your feature request related to a problem? Please describe.

{%= article_tags %}
=> tag1, tag2, tag3

Unable to apply styles like badges
Unable to create link for tag search

Describe the solution you'd like

I want to set a style and a link for each tag item

      tag_loop
      <span>{%= content_tag %}</span><span>{%= content_tag %}</span><span>{%= content_tag %}</span>

      link
      <a href="/blogs?filter_by_tag={%= content_tag %}">link filter by tag1</a>
      <a href="/blogs?filter_by_tag={%= content_tag %}">link filter by tag2</a>

Describe alternatives you've considered How about looping over tags as well as looping over reference fields?

<ul>
  <!-- content_loop -->
  <li cms-loop cms-content-type="content">

    <!-- tag_loop like ref_loop -->
    <div cms-loop cms-field="TAG_FIELD_ID">

      <span>{%= content_TAG_FIELD_ID_item %}</span>
      <a href="/blogs?filter_by_tag={%= content_TAG_FIELD_ID_item %}">ling filter by tag</a>

    </div>
  </li>
</ul>

Additional context Add any other context or screenshots about the feature request here.

mantaroh commented 1 year ago

@pandaulait @yoannes

How about looping over tags as well as looping over reference fields?

Something like this would be nice.

It's nice. In this case, I concern about generated HTML.

For example, we have a content which has category tag.

Contents: |- content A (technology tag) |- content B (keyboard tag) |- content C (technology tag)

If we allow sub loop for tags, generated List page might have all of pages grouping by tags.
I guess this feature is not attractive for SSG Tool.

Spear is SSG, so I guess we had better to provide tags routing feature.

Tag Routing

Tag routing feature will generate each content grouping by tags.

If [tags]/[alias].html has a element which has cms-item attribute only:

Spear will generate html into [tags]/ directory. Example:

<div cms-item content-type="blog">
  <p>{%= blog_title %}</p>
</div>

Generate File Result: /[tags]/content-a.html /[tags]/content-b.html /[tags]/content-c.html

Rendered Result:

<div>
  <p>Content A Title</p>
</div>

If [tags]/[alias].html has a cms-item's attribute element and cms-tag-loop's attribute element:

Spear will generate html into each tag directory. Example:

<div cms-tag-loop content-type="blog" cms-field="tags">
  <div cms-item content-type="blog">
    <p>{%= blog_title %}</p>
  </div>
</div>

Generate File Result: /technology/content-a.html /keyboard/content-b.html /technology/content-c.html

Rendered Result:

<div>
  <p>Content A Title</p>
</div>

If [tags]/index.html (mean simple list page) has a element which has cms-tag-loop attribute:

Spear generate List page into each tag directory. Example:

<div cms-tag-loop content-type="blog" cms-field="tags">
  <div cms-loop content-type="blog">
    <p>{%= blog_title %}</p>
    <a href="{%= blog_#alias %}">[Link]</a>
  </div>
</div>

Generate File Result: /technology/index.html /keyboard/index.html

Rendered Result(technology tag):

<div>
  <p>Content A Title</p>
  <a href="content-a">[Link]</a>
  <p>Content C Title</p>
  <a href="content-c">[Link]</a>
</div>

If index.html(mean simple list page) has a element which has cms-tag-loop attribute:

Spear generate List page into same directory. Example:

<div cms-tag-loop content-type="blog" cms-field="tags">
    <p>{%= blog_#tag%}</p>
    <a href="{%= blog_#tag %}/index.html">[Link]</a>
  </div>
</div>

Generate File Result: /index.html

Rendered Result(technology tag):

<div>
  <p>technology</p>
  <a href="technology/index.html">[Link]</a>
  <p>Content C Title</p>
  <a href="keyboard/index.html">[Link]</a>
</div>

(Japanese)

@pandaulait @yoannes

How about looping over tags as well as looping over reference fields?

Something like this would be nice.

とても良い提案です！1点出力されるHTMLが気になります。

例えば、以下のようなコンテンツとカテゴリを持ってるとします。

Contents: |- content A (technology tag) |- content B (keyboard tag) |- content C (technology tag)

もしネストされたループが行われた場合、タグでグループ化されたリストページが生成されることになります。これだけだと静的サイトジェネレーターの持つ意味が感じられないと考えます。

Spear は SSG ツールなので、タグのようなネストされたルーティングもサポートしたほうが良いと考えます。

タグルーティング

タグルーティング機能はタグごとにグループされたコンテンツをそれぞれ生成します。

もし[tags]/[alias].htmlという cms-item 属性だけを持つ要素を持ったページがある場合

Spear は [tags]/ ディレクトリに HTML を生成します。

例：

<div cms-item content-type="blog">
  <p>{%= blog_title %}</p>
</div>

生成されたページ： /[tags]/content-a.html /[tags]/content-b.html /[tags]/content-c.html

レンダリング結果：

<div>
  <p>Content A Title</p>
</div>

もしcms-item 属性を持つ要素と、cms-tag-loop 属性を持つ要素の両方を持つ [tags]/[alias].htmlがある場合

Spearは各タグのディレクトリに HTML を生成します。

例：

<div cms-tag-loop content-type="blog" cms-field="tags">
  <div cms-item content-type="blog">
    <p>{%= blog_title %}</p>
  </div>
</div>

生成されたページ： /technology/content-a.html /keyboard/content-b.html /technology/content-c.html

レンダリング結果：

<div>
  <p>Content A Title</p>
</div>

cms-tag-loop 属性を持つ要素だけを持つ [tags]/index.html ページ(つまり単純なリストページ)がある場合

Spaer は各タグのディレクトリにリストページを生成します。例：

<div cms-tag-loop content-type="blog" cms-field="tags">
  <div cms-loop content-type="blog">
    <p>{%= blog_title %}</p>
    <a href="{%= blog_#alias %}">[Link]</a>
  </div>
</div>

生成されたページ： /technology/index.html /keyboard/index.html

レンダリング結果( technology タグ)：

<div>
  <p>Content A Title</p>
  <a href="content-a">[Link]</a>
  <p>Content C Title</p>
  <a href="content-c">[Link]</a>
</div>

cms-tag-loop 属性を持つ要素だけが index.html ページ(つまり単純なリストページ)にある場合

Spear はソースファイルと同じディレクトリにリストページを生成します。例：

<div cms-tag-loop content-type="blog" cms-field="tags">
    <p>{%= blog_#tag%}</p>
    <a href="{%= blog_#tag %}/index.html">[Link]</a>
  </div>
</div>

生成されたページ： /index.html

レンダリング結果：

<div>
  <p>technology</p>
  <a href="technology/index.html">[Link]</a>
  <p>Content C Title</p>
  <a href="keyboard/index.html">[Link]</a>
</div>

mantaroh commented 1 year ago

I filed the new issue which focusing on tag sub-loop feature. #160

unimal-jp / spear

Tag Routing : Loop display of tag fields #123

Tag Routing

タグルーティング