📝

BASEでBlog Appの記事内容をトップページに表示する方法

2023/09/22に公開

CSS

BASEではBlog Appという機能が存在します。
Blog Appはショップ内にBlogコンテンツが追加できるAppです。さらに固定記事機能を使うと、特定の記事1件を「お知らせ」としてトップページに固定表示できます。

ですがこの固定表示だと記事は1件のみであり、日付や画像などの情報は表示されません。
そこで応用例としてBlogRSSで記事を取得して表示する方法があります。

BASE Developersにその方法が記載されているのですが、ここからもう少し改良したコードを紹介します。

作成できるイメージは以下です。

お知らせ部がBlogの内容です

さっそくですが、コードはこちら

html

{block:AppsBlog}
  <!-- blogを呼び出し -->
  <div id="blog-set"></div>
{/block:AppsBlog}

{block:IndexPage}{block:NoIndexPageCategory}{block:NoIndexPageSearch}
{block:AppsBlog}
<script>
  $(function(){
      $.ajax({
          url: '{BlogFeedPageURL}',
          type: 'GET',
          dataType: 'xml',
      })
      .done(function(data) {
          i = 1;
          $('item', data).each(function() {
              var link = $('link', this).text();
              var title = $('title', this).text();
              var image = $('image', this).text();
              var content = $('content\\:encoded', this).text();
              var pub_date = $('pubDate', this).text();
              var pd = new Date(pub_date);
              var y = pd.getFullYear();
              var m = ('00' + (pd.getMonth() + 1)).slice(-2);
              var d = ('00' + pd.getDate()).slice(-2);
              var res = y + '/' + m + '/' + d;
              var blog_content = '<div class="blog-wrap"><div class="blog-wrap__img" style="background-image: url(' + image + ');"></div><div class="blog-wrap__contants"><a href="' + link + '"><div class="blog-wrap__date">' + res + '</div><div class="blog-wrap__title">' + title + '</div><div class="blog-wrap__article">' + content + '</div></a></div></div>';
              $('#blog-set').append(blog_content);
              if (i >= 3) {
                  return false;
              }
              i++;
          });
      });
  });
</script>
{/block:AppsBlog}
{/block:NoIndexPageSearch}{/block:NoIndexPageCategory}{/block:IndexPage}

css

.blog-section__title{
  text-align: center;
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 300;
}

#blog-set{
  width: 90%;
  margin: 0 auto;
}
.blog-wrap{
  display: flex;
}
.blog-wrap:nth-child(n+1){
  margin-bottom: 16px;
}
.blog-wrap__contants{
  margin-left: 8px;
}
.blog-wrap__img {
  min-height: 100px;
  min-width: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}
.blog-wrap__title{
  font-size: 16px;
}
.blog-wrap__article{
  margin-top: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 任意の行数を指定 */
}

cssはご参考に。

さっそくですが、コードはこちら

Discussion