Bigcommerce-Stencilテーマのホームページ上のトップ3のブログを表示する方法

私は、Stencil Frameworkを使ってBig-commerceに新しいテーマを作成しています。Bigcommerce-Stencilテーマのホームページ上のトップ3のブログを表示する方法

トップの3つのブログの詳細をホームページのフッターの上に表示します。

詳細は、ブログ画像、ブログタイトル、ブログの説明（最初の100文字）です。

注 - ステンシルフレームワークはハンドルバー言語を使用します。

.. \ templates \ layout \ base.htmlの現在の構造は、次のようになります。

ここでは、{{components/common/footer}}の上に、ブログの詳細を表示するhtmlファイルをもう1つ追加できます（例：homeblog.html）。

したがって、{{components}/common/homeblog}}は、フッターの上のbase.htmlに含まれます。

誰でもホームページのトップ3のブログの詳細を達成するためにhomeblog.htmlファイルに書かれるべきことはありますか？

<!DOCTYPE html> 
<html class="no-js"> 
    <head> 
     <title>{{ head.title }}</title> 
     {{{ head.meta_tags }}} 
     {{{ head.config }}} 
     {{#block "head"}} {{/block}} 
     <link href="{{ head.favicon }}" rel="shortcut icon"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     {{{stylesheet '/assets/css/theme.css'}}} 
     {{ getFontsCollection }} 
     <script src="{{cdn '/assets/modernizr-custom.js'}}"></script> 

     {{{head.scripts}}} 
     {{{head.rsslinks}}} 

     {{inject 'themeImageSizes' theme_settings._images}} 
     {{inject 'genericError' (lang 'common.generic_error')}} 
     {{inject 'maintenanceMode' settings.maintenance}} 
     {{inject 'urls' urls}} 
     {{{snippet 'htmlhead'}}} 
    </head> 
    <body> 
     {{{snippet 'header'}}} 
     <div class="icons-svg-sprite">{{> components/common/icons/icon-defs }}</div> 

     {{#if settings.privacy_cookie}} 
      {{> components/common/cookie}} 
     {{/if}} 

     {{> components/common/header }} 
     {{> components/common/body }} 
     {{> components/common/footer }} 

     <script src="{{cdn '/assets/js/bundle.js'}}"></script> 
     <script> 
      // Exported in app.js 
      window.stencilBootstrap("{{template_file}}", {{jsContext}}).load(); 
     </script> 

     {{{footer.scripts}}} 
     {{{snippet 'footer'}}} 
    </body> 
</html>

は、自分のホームページ上の3件の最も最近のブログ記事を引っ張って...

出典

2016-07-07 Krutika Patel

FYI - homepageファイルはtemplates/pages/home.htmlです。templates/layout/base.htmlは、各部分のコンテンツが表示されるデフォルトのページです。また、「トップ」のブログ投稿はどういう意味ですか？ – thannes

@ tim-diztinctさん、ありがとうございました..「トップ」の3つのブログは最近の3つのブログ投稿です。ステンシルの枠組みでこれを達成するために、もう一歩進んでください。 –

、ありがとうございました。 "home.html"ファイルの先頭に次のFront-Matter属性を追加します。

blog: 
    recent_posts: 
     limit: 3

ここで最後の3つの投稿にアクセスできます。各投稿の情報を表示するには、それぞれの投稿をループして、希望する情報を表示します。あなたのdevのURLから

<div class="blog"> 
    <h4>Recent 3 Posts</h4> 
    {{#each blog.recent_posts}} 
     <h5><a href="{{url}}">{{title}}</a></h5> 
     <p>{{summary}}</p> 
    {{/each}} 
</div>

、あなたはへのアクセス権を持って正確に何の情報を参照閉鎖を削除するには「/」、および追加「？デバッグ=バー」末端へ。ページにアクセスできるJSONが表示されます。以下の略語例。

"recent_posts": [ 
     { 
     "title": "test1", 
     "author": "", 
     "url": "/blog/test1/", 
     "thumbnail": null, 
     "summary": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\r\n tempor incididunt ut labo", 
     "show_read_more": true, 
     "date_published": "Jul 8th 2016", 
     "tags": [] 
     }, ....

出典

2016-07-08 14:53:02 thannes

@ tim-diztinctありがとうございました..この回答は本当に助けになりました。 :) –

Bigcommerce-Stencilテーマのホームページ上のトップ3のブログを表示する方法

答えて

関連する問題