在车把/endurojs 中为博客创建标签过滤器

Question

我正在创建一个带有标签的博客，每个博客条目可以有多个标签，可以过滤这些标签以显示选择了相同标签的博客条目。

我的问题在于，当我过滤结果时，我不确定如何将标签（或关键字）作为参数发送到另一个车把助手，所以我可以只显示具有相同标签的博客条目。

此代码从所有博客条目中获取所有标签：

<h4 class="white-color remove-margin">Tags:
      {{#blog}}
          {{#joinTags this}}
             {{#each this}}
                  <a class="badge bg-light-blue" onclick="filterBlogEntries('{{this}}')">#{{this}}</a>
              {{/each}}
          {{/joinTags}}
      {{/blog}}
</h4>

filterBlogEntries 现在什么都不做，只打印发送的参数。那一个参数是我需要过滤所有博客条目的参数。

到目前为止，我列出了所有这样的博客文章：

 {{#blog}}
       {{#each_upto this 6}}
                            <article>
                                  <li class="blog-list__item">   
                                    <div class="blog-entry">
                                        <img class="blog-entry__img" src="{{blog_entry.blog_img}}">
                                        <h4 class="blog-tag">
                                            {{#each blog_entry.blog_tag}}
                                                <span class="badge bg-light-blue">#{{this}}</span>
                                            {{/each}}
                                        </h4>
                                        <h3 class="highlight center-text remove-margin">{{blog_entry.blog_title}}</h3>
                                        <h4 class="center-text remove-margin">{{blog_entry.blog_subtitle}}</h4>
                                        <a class="blue-color bold center-text" onclick="showEntry( '{{blog_entry.blog_img}}','{{blog_entry.blog_tag}}','{{blog_entry.blog_title}}',   '{{blog_entry.blog_subtitle}}','{{blog_entry.blog_text}}')">Ver más</a>
                                    </div>
                               </li>                  

                            </article>
       {{/each_upto}}
  {{/blog}}

现在，我的问题是，通过函数 filterBlogEntries()，我如何发送用户选择的标签以按标签过滤博客条目？

Answer 1

我最近遇到了类似的问题，我先在博客文章中添加标签，然后在将列出的页面中添加标签，还创建了一个新的助手来按标签列出文章。

我在 cms/generators/blog/example-post.js 中生成的博文如下所示

({
    $meta_data_expander: true,
    $meta_data_info: 'won\'t work with the temp action',
    meta_data: {
        page_title: '',
        $keywords_type: 'textarea',
        keywords: '',
        $meta_description_type: 'textarea',
        meta_description: ''
    },
    display_title: 'Example title',
    published: true,
    $date_value: '2019-01-08',
    $date_type: 'date',
    date: 'Tuesday, 08 January, 2019',
    teaser: {
        $cover_type: 'image',
        cover: '/remote/direct_uploads/1546951493_lite-feature.jpg',
        marked: 'Example endurojs generator template.',
        $marked_markdown: false,
        $marked_type: 'textarea'
    },
    main_content: {
        $content_type: 'quill',
        content: '<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Normal</p>',
        $content_control_path: '/brick/enduro_quill/quill_control'
    },
    enable_comments: true,
    $tags_templatitator: '@@global.tags_elements',
    tags: [
        {
            project: true
        }
    ]
})

所有标签都添加到标签数组中。

在将列出文章的页面中 cms/projects.js 我们定义了将显示的文章标签。

({
    $meta_data_expander: true,
    $meta_data_info: 'won\'t work with the temp action',
    meta_data: {
        page_title: '',
        $keywords_type: 'textarea',
        keywords: '',
        $meta_description_type: 'textarea',
        meta_description: ''
    },

    tags: [
            {project: true}
          ]
})

我们注册一个新的车把助手

assets/hbs_helpers/blog_list_by_tag.js

var _ = require('lodash')
var Promise = require('bluebird')

var pagelist_generator = enduro.api.pagelist_generator

enduro.templating_engine.registerHelper('blog_list_by_tag', function (tags, options) {

    var pages
    return pagelist_generator.get_cms_list()
        .then((pagelist) => {
            var get_content_promises = []
            pages = _.chain(pagelist.structured.blog)
                .filter((o) => { return typeof o === 'object' }).value() // filter pages only

            for (page_id in pages) {
                var page = pages[page_id]

                function get_content (page) {
                    get_content_promises.push(enduro.api.flat.load(page.fullpath).then((content) => { page.content = content }))
                }

                get_content(page)
            }

            return Promise.all(get_content_promises)
        })
        .then(() => {
            pages = _.chain(pages)
                .sortBy('content.$date_value').reverse() // sort by date
                .filter((page) => { return page.content.published }) // remove unpublished              
                .filter( //filter by tag
                    (page) => {
                        var taged                       
                        _.forEach(tags, (value) =>{ return  _.findIndex(page.content.tags, value) != -1 ? taged = true : false })
                        return taged 
                    }
                )
                .value()

            return options.fn(pages)
        })
})

最后在上下文中我使用新创建的助手并将标签作为参数传递。

{{#blog_list_by_tag tags}}

    {{#each this}}
        <article class="">

            <h2>
                <a href="/blog/">{{content.display_title}}</a>
            </h2>
            <p>More post data ....</p>
        </article>
    {{/each}}

{{/blog_list_by_tag}}