handlebars,Code片段,代码实例,代码示例,代码片段库

handlebars 身体类

bc-body-class

<body {{#if page_type}}class="{{page_type}}-template"{{/if}}>

handlebars 产品图片proguct画廊

bc-product-gallery

\!h product-view.html

<section class="productView-images" data-image-gallery>
    <ul class="productView-gallery" data-slick="{
            infinite: false,
            mobileFirst: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            prevArrow: '<button class='slick-prev'>Previous</button>',
            nextArrow: '<button class='slick-next'>Next</button>',
        }">
        {{#each product.images}}
            <li class="productView-img">
                <figure class="productView-image" data-image-gallery-main data-zoom-image="{{getImage this 'zoom_size' (cdn theme_settings.default_image_product)}}">
                    <div class="productView-img-container">
                        <a href="{{getImage this 'zoom_size' (cdn theme_settings.default_image_product)}}">
                            <img class="productView-image--default lazyload" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'product_size' (cdn theme_settings.default_image_product)}}"
                            alt="{{this.alt}}" title="{{this.alt}}" data-main-image>
                        </a>
                    </div>
                </figure>
            </li>
        {{/each}}
    </ul>
</section>

handlebars 从html注入到javascript

bc-inject-html-js



{{inject "tagNewArticles" "555"}}
<script>
    let jsContext = JSON.parse({{jsContext}}); 
    console.log(jsContext.tagNewArticles);
</script>

handlebars 标签博客标签按标签过滤

bc-tags

\!h custom.js
export default function () {
    $(function() {
        blogFilters();
    });

    function blogFilters(){
        $('.filter-select').change(function() {
            window.location.href = $(this).val();
        });
    }
}

\!h blog.html
<div class="filter-area">
    <div class="subtitle">{{lang 'blog.filters'}}</div>
    <select class="filter-select">
        <option value="">{{lang 'blog.by_author'}}</option>
        <option value="/blog/tag/Gordon+Ramsy" {{#if blog.tag '==' 'Gordon Ramsy' }}selected="selected"{{/if}}>Gordon Ramsy</option>
        <option value="/blog/tag/Ariana+Grande" {{#if blog.tag '==' 'Ariana Grande' }}selected="selected"{{/if}}>Ariana Grande</option>
    </select>
    <select class="filter-select">
        <option value="">{{lang 'blog.by_tag'}}</option>
        <option value="/blog/tag/Dog" {{#if blog.tag '==' 'Dog' }}selected="selected"{{/if}}>Dog</option>
        <option value="/blog/tag/Bird" {{#if blog.tag '==' 'Bird' }}selected="selected"{{/if}}>Bird</option>
    </select> 
</div>

{{#each blog.posts}}
    {{> components/blog/post post=this show_tags=true}}
{{/each}}

handlebars 版权

bc-copyright

\!h schema.json
{ "type": "text", "label": "Copyright", "force_reload": true, "id": "footer_copyright" },
{ "type": "text", "label": "Additional links", "force_reload": true, "id": "footer_additional_links" }

\!h config.json
"footer_copyright": "© 2004-2016 Front Porch Pets, Inc.",
"footer_additional_links": "<a href='/terms-of-use/'>Terms of Use</a> | <a href='/privacy-policy/'>Privacy Policy</a>",
    
\!h footer.html
{{#or theme_settings.footer_copyright settings.address theme_settings.footer_additional_links}}
    <ul class="footer-copyright">
        {{#if settings.show_newsletter_box}}<li>{{theme_settings.footer_copyright}}</li>{{/if}}
        {{#if settings.address}}<li>{{settings.address}}</li>{{/if}}
        {{#if theme_settings.footer_additional_links}}<li>{{{theme_settings.footer_additional_links}}}</li>{{/if}}
    </ul>
{{/or}}

handlebars 菜单 - 子页面菜单

bc-subpages-menu

{{#each pages as |parentpage|}}
    {{#if parentpage.name '==' ../theme_settings.menu_col_quick_links}}
        {{#if parentpage.children}}
            <nav class="footer-col-menu quick-links-menu">
                <h5 class="footer-info-heading">{{../../../theme_settings.menu_col_quick_links}}</h5>
                <ul class="footer-nav"> 
                    {{#each parentpage.children as |child|}}
                        <li><a href="{{child.url}}" class="{{#if child.name '==' ../../../../page.title}}active{{/if}}">{{child.name}}</a></li>
                    {{/each}}
                </ul>
            </nav>
        {{/if}}
    {{/if}}
{{/each}}

handlebars 菜单 - 类别菜单

bc-categories-menu

{{#if theme_settings.menu_col_categories}}
    <nav class="footer-col-menu categories-menu">
        <h5 class="footer-info-heading">{{../theme_settings.menu_col_categories}}</h5>
        <ul class="footer-nav">
            {{#each categories}}
                {{#if children}}
                    <li><a class="{{#if is_active}}active{{/if}}" href="{{url}}">{{name}}</a></li>
                    {{#each children}}
                        <li><a class="{{#if is_active}}active{{/if}}" href="{{url}}">{{name}}</a></li>
                    {{/each}}
                {{else}}
                    <li><a class="{{#if is_active}}active{{/if}}" href="{{url}}">{{name}}</a></li>
                {{/if}}
            {{/each}}
        </ul>
    </nav>
{{/if}}

handlebars 电话邮件字段

bc-phone-email

{{#or theme_settings.phone theme_settings.email}}
    <ul class="footer-contacts">
        {{#if theme_settings.phone}}<li><a href="tel:{{#replace '-' theme_settings.phone}}{{/replace}}"><span class="icon-phone"></span>{{theme_settings.phone}}</a></li>{{/if}}
        {{#if theme_settings.email}}<li><a href="mailto:{{theme_settings.email}}"><span class="icon-email"></span>{{theme_settings.email}}</a></li>{{/if}}
    </ul>
{{/or}}

handlebars 最近的帖子很多帖子

bc-recent-posts

recent_posts not working in Blog Page

Нужно прописать во всех темплейтах templates/pages и в подпапках
---
blog:
    recent_posts:
        limit: {{theme_settings.homepage_blog_posts_count}}
---

footer.html
{{#if theme_settings.homepage_blog_posts_count}}
    <div class="recent-posts">
        <div class="blog-sidebar">
            <h4>{{lang 'footer.latest_posts'}}</h4>
            {{#if blog.posts}}
                {{#each blog.posts}}
                    {{#if @index '<' ../theme_settings.homepage_blog_posts_count}}
                        <a href="{{url}}">
                            <img src="{{getImage thumbnail 'gallery_size'}}" alt="{{thumbnail.alt}}">
                        </a>
                        <h5><a href="{{url}}">{{{title}}}</a></h5>
                        <p>{{ellipsis summary 50}}</p>
                    {{/if}}
                {{/each}}
            {{else}}
                {{#each blog.recent_posts}}
                    <a href="{{url}}">
                        <img src="{{getImage thumbnail 'gallery_size'}}" alt="{{thumbnail.alt}}">
                    </a>
                    <h5><a href="{{url}}">{{{title}}}</a></h5>
                    <p>{{ellipsis summary 50}}</p>
                {{/each}}
            {{/if}}
         </div>
    </div>
{{/if}}

handlebars 域设置template_file

域设置template_file

user_data.tpl

#!/bin/bash

mv /var/www/html /var/www/html.old
mv /var/www/wordpress /var/www/html
chown -Rf www-data:www-data /var/www/html

sed -i "s/\$domain/${domain}/g"  /etc/apache2/sites-enabled/000-default.conf
a2enconf block-xmlrpc

service apache2 restart
cp /etc/skel/.bashrc /root

handlebars 身体类

handlebars 产品图片proguct画廊

handlebars 从html注入到javascript

handlebars 标签博客标签按标签过滤

handlebars 版权

handlebars *菜单* - 子页面菜单

handlebars *菜单* - 类别菜单

handlebars 电话邮件字段

handlebars 最近的帖子很多帖子

handlebars 域设置template_file

handlebars 菜单 - 子页面菜单

handlebars 菜单 - 类别菜单