如何通过自定义在Bigcommerce-Stencil主题首页显示前三名博客

Question

我正在使用 Stencil Framework 在 Big-commerce 中创建新主题。

我想在首页页脚上方显示前三个博客的详细信息。

详细信息包括博客图片、博客标题和博客描述（前 100 个字符）。

注意 - Stencil Framework 使用 handlebar 语言。

..\templates\layout\base.html 的当前结构如下。

此处，在 {{> components/common/footer }} 上方 - 我们可以再添加一个 html 文件，该文件将显示博客详细信息（例如 homeblog.html）。

因此，{{> components/common/homeblog}} 将包含在页脚上方 base.html 中。

谁能帮忙，在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>

谢谢...

Answer 1

将 3 个最近的博客 post 拉到您的主页上。将以下 Front-Matter 属性添加到 "home.html" 文件的顶部。

blog:
    recent_posts:
        limit: 3

现在，您可以访问最后 3 post 秒。要显示每个 post 的信息，您将循环每个 post 并显示您想要的信息。

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

要准确查看您有权访问的信息，请从您的开发 URL 中删除结尾的“/”，并在末尾添加“?debug=bar”。它将在页面上显示您有权访问的 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": []
      }, ....

如何通过自定义在Bigcommerce-Stencil主题首页显示前三名博客

How to display Top Three Blogs on Home Page of Bigcommerce-Stencil Theme through Customization

blogs

themes

e-commerce

bigcommerce