Connect to Spear CMS

Spear can fetch data from Spear CMS. Recently, building jamstack site with Headless CMS is really popular.
Spear support the Spearly CMS.

Before building site with Spearly CMS, you should signup.

Learn content type and contens, fields

Spearly CMS provide official documentation!

You can learn the following resources:

Fetching configuration

Usually, creating site wizard ask you to Spearly configuration, if you choosed Use Spearly CMS to yes.

After wizard, you can set fetching configuration as well. You can see the detail for configuration, see the install guide.

Embedding content list into site

The embedding way is simple. For detail, see embed basic guide.

  • /src/index.html
...
<body>
  <div cms-loop cms-content-type="blog">
    <h1>{%= blog_title %}</h1>
  </div>
</body>

In above example, {%= blog_title %} is embed syntax. Spear will replace this string to fetched data. In this case, spear replace it to blog titles, and spear will repeat outputting this element which has cms-loop.

Spear ended up generating the following HTML:

  • /dist/index.html
...
<body>
  <div>
    <h1>First blog post</h1>
  </div>
  <div>
    <h1>Second post</h1>
  </div>
</body>

Embed a content into site

You can embed single content as well! Embedding way is simillar to the way of embedding list content.

  • /src/index.html
...
<body>
  <div cms-item cms-content-type="blog" cms-content="c-N2np7l945FMzCimfKuPP">
    <h1>{%= blog_title %}</h1>
  </div>
</body>

Spear will fetch one conetent from Spearly CMS, because this sample has cms-item attribute and cms-content attribute.

Spear ended up generating the following HTML:

  • /dist/index.html
...
<body>
  <div>
    <h1>Second post</h1>
  </div>
</body>

Routing

Spear will create html file by each content. For example, you want to build blog site, you need to implement detail page.

  • /src/blog/[alias].html
...
<body>
  <div cms-item cms-content-type="blog" cms-content="c-N2np7l945FMzCimfKuPP">
    <h1>{%= blog_title %}</h1>
    <section>
      {%= blog_body %}
    </section>
  </div>
</body>
...It's little difference of previous examples. This file name is `[alis].html`. This alias link to Spearly CMS alias name or content id.  This alias is similar to WordPress's slug. This alias is unique key of Spearly CMS.Spear will generate every contents page. (E.g., we have three contents(A/B/C), spear will generate `A.html` / `B.html` / `C.html`)If you want to reference this alias page from list of contents, you can use `{%= blog_#alias %}` embed sytax.  For detail, see [embed basic guide](/en/embed/basic.html).