Support the loop of ref field in contents loop and single content embedding

[oxo-yuta]

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

The loop of the ref field is not working.

With the original js library by Spearly CMS, we can create the loop of ref field like this.

<article class="article" cms-loop cms-content-type="posts">
    <!-- div block below should loop -->
    <div class="article-author" cms-loop cms-field="author" cms-item-variable="author">
      <img class="article-author-image" src="{%= posts_author_image %}"/>
      <span class="article-author-name">{%= author_name %}</span>
    </div>
  </div>
</article>

but with Spear, it is not able.

Describe the solution you'd like

It generates the HTML as loop with ref field's value

[mantaroh]

@oxo-yuta

Thank you for filing issue! It looks for me that problem of sub-loop. I'll look into this issue 🙏🏼

[mantaroh]

@oxo-yuta

We have a few sub loop issue yet. However, we can build your site if we :

• Remove the sub loop (Especially, your author loop in posts loop)
• Specify one cms-item on [alias].spear. (Combine two cms-item into one)

I looking into sub loop feailure now, but you can build with the following modification:

diff --git a/package.json b/package.json
index 9dff598..d29683f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,6 @@
   "dependencies": {
     "html-minifier-terser": "^7.0.0-beta.0",
     "node-html-parser": "^5.3.3",
-    "@spearly/spear-cli": "^1.1.9"
+    "@spearly/spear-cli": "^1.1.11"
   }
 }
\ No newline at end of file
diff --git a/src/index.spear b/src/index.spear
index 049d137..ed3aa26 100644
--- a/src/index.spear
+++ b/src/index.spear
@@ -59,10 +59,6 @@
           </a>
           <span class="article-tag">{%= posts_tags %}  </span>
           <p class="article-description">{%= posts_digest %}</p>
-          <div class="article-author" cms-loop cms-field="author" cms-item-variable="author">
-            <img class="article-author-image" src="{%= posts_author_image %}"/>
-            <span class="article-author-name">{%= author_name %}</span>
-          </div>
         </div>
       </article>

diff --git a/src/posts/[alias].spear b/src/posts/[alias].spear
index 3613766..dcbb981 100644
--- a/src/posts/[alias].spear
+++ b/src/posts/[alias].spear
@@ -24,8 +24,8 @@
     </div>
   </nav>
   <section id="articles" class="section">
-    <div class="container">
-      <article cms-item cms-content-type="posts" class="article">
+    <div  cms-item cms-content-type="posts" class="container">
+      <article class="article">
         <a href="{%= posts_#url %}" class="article-imageLink">
           <img src="{%= posts_eye-catch %}" alt="" class="article-image">
         </a>
@@ -36,13 +36,9 @@
           </a>
           <span class="article-tag">{%= posts_tags %}  </span>
           <p class="article-description">{%= posts_digest %}</p>
-          <div class="article-author" cms-loop cms-field="author" cms-item-variable="author">
-            <img class="article-author-image" src="{%= posts_author_image %}"/>
-            <span class="article-author-name">{%= author_name %}</span>
-          </div>
         </div>
       </article>
-      <article cms-item cms-content-type="posts" class="content">
+      <article class="content">
         <div class="article-content">{%= posts_content %}</div>
       </article>
     </div>
diff --git a/src/posts/index.spear b/src/posts/index.spear
index 676a631..a7be0f2 100644
--- a/src/posts/index.spear
+++ b/src/posts/index.spear
@@ -1,18 +1,14 @@
-<!-- <article class="article" cms-loop cms-content-type="posts">
+<article class="article" cms-loop cms-content-type="posts">
   <a href="/posts/{%= posts_#url %}" class="article-imageLink">
     <img src="{%= posts_eye-catch %}" alt="" class="article-image">
   </a>
   <div class="article-rightBlock">
     <time class="article-date">{%= posts_post-date %}</time>
     <a href="{%= posts_#url %}" class="article-titleLink">
-      <h2 class="article-title">{%= posts_title %} </h2>
+      <h2 class="article-title">{%= posts_title %} </h2>
     </a>
-    <span class="article-tag">{%= posts_tags %}    </span>
+    <span class="article-tag">{%= posts_tags %} </span>
     <p class="article-description">{%= posts_digest %}</p>
-    <div class="article-author" cms-loop cms-field="author" cms-item-variable="author">
-      <img class="article-author-image" src="{%= posts_author_image %}"/>
-      <span class="article-author-name">{%= author_name %}</span>
-    </div>
   </div>
-</article> -->
-<h1>aadsd</h1>
+</article>
+<h1>aadsd</h1>