So zeigen Sie die Top Three Blogs auf der Homepage des BigCommerce-Stencil Theme durch Anpassung an

Ich erstelle ein neues Thema in Big-Commerce mit Stencil Framework.So zeigen Sie die Top Three Blogs auf der Homepage des BigCommerce-Stencil Theme durch Anpassung an

Ich möchte die Top drei Blogs Details auf der Homepage über Fußzeile anzeigen.

Die Details sind Blog-Bild, Blog-Titel und Blog-Beschreibung (erste 100 Zeichen).

Hinweis - Stencil Framework verwendet die Sprache des Lenkers.

Aktuelle Struktur von .. \ templates \ layout \ base.html ist wie folgt.

Hier, über {{> components/common/footer}} - können wir eine weitere HTML-Datei hinzufügen, die Blogdetails anzeigt (z. B. homeblog.html).

Daher wird {{> components/common/homeblog}} in base.html über der Fußzeile enthalten sein.

Kann jemand helfen, was sollte in homeblog.html Datei geschrieben werden, um Top 3 Blogs Details auf der Startseite zu erreichen?

<!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>

Danke ...

Quelle

2016-07-07 Krutika Patel

FYI - die Homepage-Datei ist die Vorlagen/pages/home.html ... templates/Layout/base.html ist die Standardseite, in dem jeder Inhalt des Teil angezeigt wird. Was meinst du mit "Top" -Blog-Posts? – thannes

Danke @ tim-diztinct .. "Top" drei Blogs sind die letzten drei Blog-Posts. Kannst du bitte weiter führen, um dies im Schablonenrahmen zu erreichen? –

Um die 3 neuesten Blog-Posts auf Ihrer Homepage zu ziehen. Fügen Sie am Anfang Ihrer "home.html" -Datei das folgende Front-Matter-Attribut hinzu.

blog: 
    recent_posts: 
     limit: 3

Jetzt haben Sie Zugriff auf die letzten 3 Beiträge. Um die Informationen zu jedem Beitrag anzuzeigen, führen Sie die einzelnen Posts durch und zeigen die gewünschten Informationen an.

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

Um genau zu sehen, was Informationen, die Sie Zugriff haben, entfernen Sie das Schließen ‚/‘ aus dem Entwickler-URL und fügen Sie ‚? Debug = Bar‘ bis zum Ende. Es zeigt den JSON an, auf den Sie auf der Seite zugreifen können. Verkürztes Beispiel unten.

"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": [] 
     }, ....

Quelle

2016-07-08 14:53:02 thannes

Danke @ tim-diztinct .. Diese Antwort hat wirklich geholfen. :) –

So zeigen Sie die Top Three Blogs auf der Homepage des BigCommerce-Stencil Theme durch Anpassung an

Antwort

Verwandte Themen