Open mantaroh opened 1 year ago
cms-loop
やcms-tag-subloop
はoptionの書かれたDOM自体が繰り返されますが、cms-loop-tag-only
はその一つ階層の下のDOM が繰り返されています。これは意図的ですか?loopの挙動で混乱を招きそうな問題と、以下のような場合どのように表示するかの問題がありそうです
<div cms-loop-tag-only cms-content-type="news">
<p>{%= news_tag %}</p>
<div>{%= news_tag %}の兄弟要素の適当な何か</div>
</div>
by @mantaroh たしかに。正しくはこんな感じでしょうか?
<div> <p cms-loop-tag-only cms-content-type="news"> </div>
はい!そちらの方が、指定しやすそうと思いました! ただそれだけだと、コンテンツタイプに複数のタグフィールドタイプが設定されているときの挙動を考える必要がありそうです。
タグフィールドidをそれぞれtag1, tag2とすると仮定して下記(i)(ii)の場合だと、どう表示するのかな私も悩んでいます……
(i)
<div>
<p cms-loop-tag-only cms-content-type="news">{%= news-tag1 %}{%= news-tag2 %}</p>
</div>
(ii)
<div>
<p cms-loop-tag-only cms-content-type="news">{%= news-tag1 %}
<span>{%= news-tag2 %}</span>
</p>
</div>
※ 何点下記になるところがあるため、コメントに言及しやすいよう(160-A)のようにナンバリングしていきます
loop
とsubloop
の使い分けの意図について教えてください。参照のループでは*-subloop
というoption名ではなく、cms-loop
, cms-field="[参照フィールドのID]"
の組み合わせで指定しています。
また、タグごとの詳細ページのルーティング( #123 )では、cms-tag-loop
というoptionを指定しています。
ここに、loopとsubloopの役割の差が生まれ、少し複雑化しているように感じました。
私はloop
やsubloop
という言葉に対して使い分けの意図を揃えておいた方がよさそうと考えています。
例を挙げると、「loop
やsubloop
という言葉に対して、コンテンツ配列を繰り返すときはloop
, フィールドの値が配列の場合、繰り返すときはsubloop
」などでしょうか。(この例の場合はcms-tag-loop
がすこし意図から外れてしまうことを考える必要があります。)
エラーを出すか否かなど、考慮すべきことがありそうです。
タグフィールドidをそれぞれtag1
, tag2
と仮定します
(i)
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-tag-subloop>
{%= news_tag1 %}
{%= news_tag2 %}
</p>
</div>
(ii)
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-tag-subloop>
{%= news_tag1 %}
</p>
{%= news_tag2 %}
</div>
(iii)
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-tag-subloop>
{%= news_tag1 %}
<span cms-tag-subloop>{%= news_tag2 %}</span>
</p>
</div>
これは確認です。 (160-A), (160-B)でもすこし触れましたが、参照フィールドとタグフィールドの繰り返しの仕方には違いがあります。
拡張性を考えた時に、なぜ違うかを明確にしておいた方がよさそうと考えたのでコメントしました
cms-ref-subloop
ではなく、cms-loop, cms-field
の二つで設定するのは、「タグフィールドはフィールドの値の要素を、参照フィールドは参照しているコンテンツの要素(フィールド)を繰り返しているから」でしょうか?
私的には、タグのような繰り返しのできる新しいフィールドタイプが増えたとしても、cms-NEW_FIELD_TYPE_ID-subloop
とすればよさそうであるので、問題はないと考えておりますが、他の皆さんはいかがですか?
参考: 参照フィールドのループ
<ul>
<!-- コンテンツのループ -->
<li cms-loop cms-content-type="releases">
<h1>{%= releases_[フィールドID1] %}</h1>
<!-- 参照のループ -->
<div cms-loop cms-field="[参照フィールドのID]">
<h2>{%= releases_[参照フィールドのID]_[参照先コンテンツのフィールドID1] %}</h2>
<p>{%= releases_[参照フィールドのID]_[参照先コンテンツのフィールドID2] %}</p>
<img data-src="{%= releases_[参照フィールドのID]_[参照先コンテンツのフィールドID3] %}">
</div>
<!-- 参照のループ(cms-item-variableを使う場合) -->
<div cms-loop cms-field="[参照フィールドのID]" cms-item-variable="sub">
<h2>{%= sub_[参照先コンテンツのフィールドID1] %}</h2>
<p>{%= sub_[参照先コンテンツのフィールドID2] %}</p>
<img data-src="{%= sub_[参照先コンテンツのフィールドID3] %}">
</div>
</li>
</ul>
起票ありがとうございます!
loopという概念になるので、できるだけ既存のコンテンツループと、参照フィールドのループの挙動に寄せるのがいいのかなと思いました。
なのでイメージ的には…
<ul>
<!-- コンテンツのループ -->
<li cms-loop cms-content-type="releases">
<h1>{%= releases_[フィールドID1] %}</h1>
<!-- 参照のループ -->
<div cms-loop cms-field="[参照フィールドのID]">
<h2>{%= releases_[参照フィールドのID]_[参照先コンテンツのフィールドID1] %}</h2>
<p>{%= releases_[参照フィールドのID]_[参照先コンテンツのフィールドID2] %}</p>
<img data-src="{%= releases_[参照フィールドのID]_[参照先コンテンツのフィールドID3] %}">
</div>
<!-- ****タグのループ**** -->
<ul class="tagList">
<li cms-loop cms-field="[タグフィールドのID]">
<button>{%= releases_[タグフィールドのID]_value %}</button>
</li>
</ul>
</li>
<ul>
みたいなのはどうかなと… 🤔
これからloopできるフィールドが増えた場合は、{%= releases_[タグフィールドのID]_**** %}
の部分で何を表示するのかコントロールできると、参照コンテンツのループと同じような書き方になるので、直感的でわかりやすいかなと思いました!
(タグの場合は値以外ないのでvalue
で値が使える。みたいなイメージです。)
こちらについては、このコメントの中に書かれている、loopを指定したタグ自体が繰り返される形式がいいと思いました!
@pandaulait
(160-A)※ [2. content-type に紐づくすべてのタグの展開]について、cms-loopやcms-tag-subloopはoptionの書かれたDOM自体が繰り返されますが、cms-loop-tag-onlyはその一つ階層の下のDOM が繰り返されています。これは意図的ですか?
こちらはスペックの書き間違いでした!!
正しくは書いてあるとおり、次の構文が正しいです。
<div>
<p cms-loop-tag-only cms-content-type="news">
</div>
タグフィールドidをそれぞれtag1, tag2とすると仮定して下記(i)(ii)の場合だと、どう表示するのかな私も悩んでいます…… (i)
{%= news-tag1 %}{%= news-tag2 %}
(ii)
{%= news-tag1 %} {%= news-tag2 %}
そもそも、タグのループなので、どのタグをループさせるかを指定する必要がありますね。
上記例だと、news-tag1
/ news-tag2
を1つのループで完結させることが出来ない。
なので、cms-loop-tag-only
に関しては、属性値を持って cms-loop-tag-only="対象のタグフィールドID"
のようにすべきかなと思います。
(160-B) [1. コンテンツ内のタグを展開] loopとsubloopの使い分けの意図について教えてください。
参照のループでは*-subloopというoption名ではなく、cms-loop, cms-field="[参照フィールドのID]" の組み合わせで指定しています。 また、タグごとの詳細ページのルーティング( https://github.com/unimal-jp/spear/issues/123 )では、cms-tag-loopというoptionを指定しています。 ここに、loopとsubloopの役割の差が生まれ、少し複雑化しているように感じました。
そうですね。cms-tag-loop
という名前をつけたかったのですが、すでにルーティングで使ってしまったので、cms-tag-subloop
という名前にしてしまいました。
本来であれば、#123 の cms-tag-loop
は cms-tag-routing
のような名前にすべきでしたね。。
使う側からは確かにわかりにくい機能になってますね。。
現在の cms-tag-loop
は cms-tag-routing
にして、両方利用可能。ただし、cms-tag-loop
は非推奨。
そして、今回入れようとするタグのループは cms-tag-field-loop
のようにするのはいかがでしょう?
@pandaulait @oxo-yuta
コメントありがとうございます!!
たしかに cms-loop
内の参照ループとタグループ同じ扱いでも良さそうですね!
コメントにもあったように -subloop
は誤解を招きそうですね。
現在の cms-tag-loop
の命名規則もわかりにくというのもあり。。
cms-tag-loop
は cms-tag-routing
として、両方サポートする(ただし、cms-tag-loop
は非推奨)cms-loop
と cms-field
を用いるcms-loop-tag-only
を用いるFor example, Spear v1.3.1(latest version) will replace the tag field in the content as string which concatenating tag with comma.
If the original content is the following, the spear will generate the second sample code:
Original Content
<div>
<p cms-item cms-content-type="news" cms-content="xxxxxx">{%= news_tags %}</p>
</div>
Generated Content
<div>
<p>Travel,Language</p>
</div>
This string doesn't be useful for user. So we need to provide this field as sub-loop.
If embed tag has cms-tag
and cms-field
, Spear extract each tag.
Example:
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-loop cms-field="tag1">{%= news_tag1_value %}</p>
</div>
Generated File:
<div>
<p>Travel</p>
<p>Language</p>
</div>
If element has cms-loop-tag-only
, Spear extract each all tag which related with content-type.
Example:
<div>
<p cms-loop-tag-only cms-content-type="news">{%= news_tag %}</p>
</div>
Generated File:
<div>
<p>Computer Science</p>
<p>Travel</p>
<p>Art</p>
<p>Language</p>
</div>
例えば、Spear v1.3.1(最新版)はタグフィールドを各タグをカンマで結合した文字列に置換します。
もし以下のようなコンテンツがあれば、Spear は2つ目のサンプルのようなコードを生成します。:
コンテンツ
<div
<p cms-item cms-content-type="news" cms-content="xxxxxx">>{%= news_tags %}</p>
</div>
生成されたコンテンツ
<div>
<p>Travel,Language</p>
</div>
この文字列はなんらユーザーにとって有益なものになりません。そのため、タグフィールドをサブループとして扱う機能を提供する必要があります。
もし組み込みタグ内に cms-loop
と cms-field
があり、指定されたフィールドがタグの場合、Spearは各タグを展開します。
例:
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-loop cms-field="tag1">{%= news_tags1_value %}</p>
</div>
生成されたファイル:
<div>
<p>Travel</p>
<p>Language</p>
</div>
もし cms-loop-tag-only
を持つ要素があれば、Spear はコンテンツタイプに紐づくすべてのタグを展開する。
例:
<div cms-loop-tag-only cms-content-type="news">
<p>{%= news_tag %}</p>
</div>
生成されたファイル:
<div>
<p>Computer Science</p>
<p>Travel</p>
<p>Art</p>
<p>Language</p>
</div>
@mantaroh
- content-type に紐づくすべてのタグの展開
2のcms-loop-tag-only
のタグの取得範囲ですが、これは一つのコンテンツタイプに複数のタグフィールドが設定されていた場合、それらすべてを取得するのですか?
それともどれか指定したタグフィールド一つについてのみ取得するのですか?
もし、一つのタグフィールドについてのみであれば、cms-field
のように、fieldを指定する必要がありそうです。
個人的には(i)のどれか指定したタグフィールド一つについてのみ取得する
の仕様の方が使用しやすそうと思いました
例: (i)どれか指定したタグフィールド一つについてのみ取得する場合
<div cms-loop-tag-only cms-content-type="news">
<p>{%= news_tag1 %}<span>{%= news_tag2 %}</span></p>
</div>
生成されたファイル:
<div>
<p>tag1-1 <span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag1-2 <span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag1-3 <span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag1-4 <span>tag2-1, tag2-2, tag2-3</span> </p>
</div>
or (ii)コンテンツに紐づく全てのタグフィールド一つについて取得する場合
<div cms-loop-tag-only cms-content-type="news">
<p>{%= news_#tag %}<span>{%= news_tag2 %}</span></p>
</div>
<!--- {%= news_tag %}だと、フィールドidにタグを使えなくなるので、{%= news_#tag %} が良さそう--->
生成されたファイル
<div>
<p>tag1-1 <span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag1-2 <span>tag2-1, tag2-2, tag2-3</span></p>
<p>tag1-3 <span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag1-4 <span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag2-1 <span>tag2-1, tag2-2, tag2-3</span></p>
<p>tag2-2<span>tag2-1, tag2-2, tag2-3</span> </p>
<p>tag2-3 <span>tag2-1, tag2-2, tag2-3</span> </p>
</div>
- コンテンツ内のタグを展開
良さそうです!下記のような入れ子をした場合はどうなりますか?
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<ul>
<li cms-loop cms-field="tag1">
{%= news_tags1_value %}
<ul>
<li cms-loop cms-field="tag2">
{%= news_tags2_value %}
</li>
</ul>
</li>
</ul>
</div>
@pandaulait
2のcms-loop-tag-onlyのタグの取得範囲ですが、これは一つのコンテンツタイプに複数のタグフィールドが設定されていた場合、それらすべてを取得するのですか? それともどれか指定したタグフィールド一つについてのみ取得するのですか?
もし、一つのタグフィールドについてのみであれば、cms-fieldのように、fieldを指定する必要がありそうです。 個人的には(i)のどれか指定したタグフィールド一つについてのみ取得するの仕様の方が使用しやすそうと思いました
そうですね。2つタグがあった場合の取り扱いを言及していなかったですね。。。 私も(i)が良いと思います。
ただ、タグフィールドを固定しても良いかなと思いました。 この仕様いかがでしょう?
<div cms-loop-tag-only cms-content-type="news" cms-field="tag1">
<p>{%= news_tag1 %}<span>{%= news_tag2 %}</span></p>
</div>
生成後の HTML ({%= news_tag1 %}
だけ置換される)
<div>
<p>tag1-1 <span>{%= news_tag2 %}</span> </p>
<p>tag1-2 <span>{%= news_tag2 %}</span> </p>
<p>tag1-3 <span>{%= news_tag2 %}</span> </p>
<p>tag1-4 <span>{%= news_tag2 %}</span> </p>
</div>
良さそうです!下記のような入れ子をした場合はどうなりますか?
Spear のパーサーを利用すると入れ子の場合、階層深い部分がまず展開され、その後階層が上に行く順番で展開していきます。
以下のサンプルの場合:
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<ul>
<li cms-loop cms-field="tag1">
{%= news_tags1_value %}
<ul>
<li cms-loop cms-field="tag2">
{%= news_tags2_value %}
</li>
</ul>
</li>
</ul>
</div>
生成される HTML:
<div>
<ul>
<li> Tag1-val1
<ul>
<li>Tag2-val1</li>
<li>Tag2-val2</li>
</ul>
</li>
<li> Tag1-val2
<ul>
<li>Tag2-val1</li>
<li>Tag2-val2</li>
</ul>
</li>
</ul>
</div>
@mantaroh
ただ、タグフィールドを固定しても良いかなと思いました。 この仕様いかがでしょう?
その仕様でも良いと思います! ただ一応2点、知りたいです
よろしくお願いします 🙇
1.コンテンツ内のタグを展開について
一点別で気づきましたが、{%= news_tags1_value %}
のvalueの部分はcmsで指定できない部分なので、{%= news_#published_at %}
のように、#
をつけた方がわかりやすいのかなと思いましたがいかがですか?
{%= news_tags1_value %}
-> {%= news_tags1_#value %}
@pandaulait
ただ一応2点、知りたいです
なぜタグフィールドを固定したいのですか?
タグフィールドが複数あった場合、どちらをどのようにループさせたいかはユーザーの制御に任せたほうが良いと思います。 また、Spear がユーザーが指定した HTML の中身を解析して、ループするべきタグフィールドを知る必要があるので、実装上の成約も多くなる気がしています。
<div cms-loop-tag-only cms-content-type="news">
<p>{%= news_tag1 %}<span>{%= news_tag2 %}</span></p>
</div>
このサンプルでは、どのタグをどれだけループするか検討がつきにくいかなと思います。
タグに関わらず、他にフィールドの埋め込みタグも展開されない仕様でしょうか?
明示的に cms-loop-tag-only
としているので、単純にタグのループだけをさせる仕様のほうがわかりやすいかなと思います。
ユースケースとしても、これを使う場合はコンテンツタイプで使われているタグをすべて取得して描画するケースが多いかと思います!
一点別で気づきましたが、{%= news_tags1value %}のvalueの部分はcmsで指定できない部分なので、{%= news#published_at %}のように、#をつけた方がわかりやすいのかなと思いましたがいかがですか?
そうですね!
確かにこれはサフィックスのような扱いになるので #
が必要そうです!つけておきます!
For example, Spear v1.3.1(latest version) will replace the tag field in the content as string which concatenating tag with comma.
If the original content is the following, the spear will generate the second sample code:
Original Content
<div>
<p cms-item cms-content-type="news" cms-content="xxxxxx">{%= news_tags %}</p>
</div>
Generated Content
<div>
<p>Travel,Language</p>
</div>
This string doesn't be useful for user. So we need to provide this field as sub-loop.
If embed tag has cms-tag
and cms-field
, Spear extract each tag.
Example:
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-loop cms-field="tag1">{%= news_tag1#value %}</p>
</div>
Generated File:
<div>
<p>Travel</p>
<p>Language</p>
</div>
If element has cms-loop-tag-only
, Spear extract each all tag which related with content-type.
Example:
<div>
<p cms-loop-tag-only cms-content-type="news" cms-field="tag1">{%= news_tag1 %}</p>
</div>
Generated File:
<div>
<p>Computer Science</p>
<p>Travel</p>
<p>Art</p>
<p>Language</p>
</div>
例えば、Spear v1.3.1(最新版)はタグフィールドを各タグをカンマで結合した文字列に置換します。
もし以下のようなコンテンツがあれば、Spear は2つ目のサンプルのようなコードを生成します。:
コンテンツ
<div
<p cms-item cms-content-type="news" cms-content="xxxxxx">>{%= news_tags %}</p>
</div>
生成されたコンテンツ
<div>
<p>Travel,Language</p>
</div>
この文字列はなんらユーザーにとって有益なものになりません。そのため、タグフィールドをサブループとして扱う機能を提供する必要があります。
もし組み込みタグ内に cms-loop
と cms-field
があり、指定されたフィールドがタグの場合、Spearは各タグを展開します。
例:
<div cms-item cms-content-type="news" cms-content="xxxxxx">
<p cms-loop cms-field="tag1">{%= news_tags1#value %}</p>
</div>
生成されたファイル:
<div>
<p>Travel</p>
<p>Language</p>
</div>
もし cms-loop-tag-only
を持つ要素があれば、Spear はコンテンツタイプに紐づくすべてのタグを展開する。
例:
<div cms-loop-tag-only cms-content-type="news" cms-field="tag1">
<p>{%= news_tag1 %}</p>
</div>
生成されたファイル:
<div>
<p>Computer Science</p>
<p>Travel</p>
<p>Art</p>
<p>Language</p>
</div>
回答ありがとうございますー!
明示的に cms-loop-tag-only としているので、単純にタグのループだけをさせる仕様のほうがわかりやすいかなと思います。 ユースケースとしても、これを使う場合はコンテンツタイプで使われているタグをすべて取得して描画するケースが多いかと思います!
そうですね、tag onlyですので、他の埋め込みタグの要素が判定できないですね 🙇 LGTMですー!
What is this feature?
123 was focused on tag routing. However we need to provide the tag field in content.
For example, Spear v1.3.1(latest version) will replace the tag field in the content as string which concatenating tag with comma.
If the original content is the following, the spear will generate the second sample code:
Original Content
Generated Content
This string doesn't be useful for user. So we need to provide this field as sub-loop.
Proposal Spec
1. Extracting the content tag
If embed tag has
cms-tag-sub-loop
, Spear extract each tag.Example:
Generated File:
2. Extracting the all of content-type tag
If element has
cms-loop-tag-only
, Spear extract each all tag which related with content-type.Example:
Generated File:
この機能はなに?
123 はタグによるルーティングに焦点を当てていました。しかし、コンテンツ内でのタグもサポートする必要があります。
例えば、Spear v1.3.1(最新版)はタグフィールドを各タグをカンマで結合した文字列に置換します。
もし以下のようなコンテンツがあれば、Spear は2つ目のサンプルのようなコードを生成します。:
コンテンツ
生成されたコンテンツ
この文字列はなんらユーザーにとって有益なものになりません。そのため、タグフィールドをサブループとして扱う機能を提供する必要があります。
提案する機能
1. コンテンツ内のタグを展開
もし組み込みタグ内に
cms-tag-sub-loop
があれば、Spearは各タグを展開します。例:
生成されたファイル:
2. content-type に紐づくすべてのタグの展開
もし
cms-loop-tag-only
を持つ要素があれば、Spear はコンテンツタイプに紐づくすべてのタグを展開する。例:
生成されたファイル: