Question

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

我想展示前三个博客＆＃39;页脚上方主页的详细信息。

详细信息包括博客图片，博客标题和博客说明（前100个字符）。

注意 - 模板框架使用手柄语言。

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

此处，{{＆gt; components / common / footer}} - 我们可以再添加一个html文件来显示博客详情（例如homeblog.html）。

因此，{{＆gt; components / common / homeblog}}将包含在base.html上面的页脚中。

任何人都可以提供帮助，应该在homeblog.html文件中写什么来实现前3个博客＆＃39;主页上的详细信息？

<!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篇最新博文。将以下Front-Matter属性添加到＆＃34; home.html＆＃34;的顶部。文件。

blog:
    recent_posts:
        limit: 3

现在，您可以访问最近3个帖子了。要显示每个帖子的信息，您将循环显示每个帖子并显示您想要的信息。

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

要准确查看您有权访问的信息，请移除结束＆＃39; /＆＃39;从您的开发网址中添加＆＃39;？debug = bar＆＃39;到最后。它将在页面上显示您有权访问的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主题主页上的前三个博客

1 个答案: