1

詳細：

組み立てる: 0.4.4

うなり声: 0.4.1

質問：

最新の 5 つの投稿をフロント ページに表示するブログを設計しています。キーワードに基づいて投稿のコレクションを作成しました。

assemble: {
  options: {
    flatten: false,
    partials: '<%= build.src %>/_partials/*.hbs',
    layoutdir: '<%= build.src %>/_layouts',
    data: ['<%= build.src %>/_data/*.{json,yml}', 'package.json'],
    assets: '<%= build.out %>/',
    helpers: [ 'helper-moment','<%= build.src %>/helpers/helper-*.js'],
    collections: [
    { name: 'keywords', inflection: 'keyword' }
    ]

  },

さまざまな投稿の YAML フロント マターは次のようになります。

--

レイアウト: default.hbs

タイトル: <%= site.title %>

説明: "Adult Redeploy All Sites Summit 2015"

作成日: 06-23-2014

スラッグ：「ようこそ」

パンくずリスト: false

投稿日: 2014 年 1 月 12 日

キーワード:

  • ニュース

ナビゲーションソート: 100

--

タイトルと要約を表示する私のコードは次のとおりです。

<div>
  {{#each keywords}}
   {{#is keyword "news"}}
   {{#withSort pages "data.posted" dir="desc"}}
    <div>
     <h2><a href="/{{relativeLink}}">{{data.title}}</a></h2>
      <p>{{formatDate data.posted "%F"}}</p>
    <div>
        {{#markdown}}{{data.summary}}{{/markdown}}
    </div>
    <p><a href="/{{relativeLink}}">more...</a></p>
  </div>
  {{/withSort}}
  {{/is}}
  {{/each}}
 </div>

これは機能します。すべてのブログが問題なく表示されます。しかし、私は 5 つに制限したいと思います。つまり、最新の 5 つです。

私はこの問題を見てきました：

https://github.com/assemble/assemble/issues/463

しかし、それを上記の例に組み込む方法がわかりません。#withSort でページを制限する方法はありますか?

混乱している。

4

4 に答える 4

1

同じ問題があり、そのためのヘルパーを作成することになりました。

var _ = require('underscore');

var helpers = {
    latest: function(array, amount, fn) {
        var buffer = "";

        _.chain(array)
            .filter(function(i) {
                return i.data.date;
            })
            .sortBy(function(i) {
                return i.data.date;
            })
            .reverse()
            .first(amount)
            .forEach(function(i) {
                buffer += fn.fn(i);
            });

        return buffer;
    },

};

module.exports.register = function(Handlebars, options) {
    options = options || {};

    for (var helper in helpers) {
        Handlebars.registerHelper(helper, helpers[helper]);
    }
    return this;
};

assemble.helpers 検索パスのどこかに追加してください。アンダースコアの依存関係がインストールされていることを確認してください

npm install underscore --save-dev --save-exact

次に、このようなヘルパーを使用できます

  <ul>
    {{#latest pages 5}}
      <li><a href="{{relativeLink}}">{{data.title}}</a></li>
    {{/latest}}
  </ul>
于 2015-05-03T11:39:37.977 に答える
0

良いニュースと悪いニュースがあります。悪いニュースは、ページ コレクションの並べ替えと制限の両方を行う組み込みのヘルパーがあるとは思えないことです。

編集:私は間違っていました。コレクションの並べ替えと withFirst ヘルパーを組み合わせた組み込みの方法があるかもしれません。別途回答させていただきます。

良いニュースは、これを行うために独自のカスタム ハンドルバー ヘルパーを作成できることです。withSort Helperに基づいて、以下のサンプル ヘルパーを作成しました。次のように使用します。

<div>
  {{#each keywords}}
    {{#is keyword "news"}}
      {{#withSortLimit pages sortBy="data.posted" dir="desc" limit=5}}
        <div>
          <h2><a href="/{{relativeLink}}">{{data.title}}</a></h2>
          <p>{{formatDate data.posted "%F"}}</p>
          <div>
          {{#markdown}}{{data.summary}}{{/markdown}}
          </div>
          <p><a href="/{{relativeLink}}">more...</a></p>
        </div>
      {{/withSortLimit}}
    {{/is}}
  {{/each}}
</div>

withSortLimit.js これ は withSortLimit ヘルパーの飾り気のないソースです。options.helpers docsで説明されているように、これを Gruntfile の Assemble 構成に登録する必要があります。 

/*
 * withSortLimit Handlebars Helper for Assemble
 * Sample usage:
 *   {{#withSortLimit pages sortBy="data.posted" dir="desc" limit=5}}
 *     <li>{{formatDate data.posted "%F"}}: {{data.title}}</li>
 *   {{/withSortLimit}}
 */
(function() {

    var _ = require("lodash");

    function getPropertyFromSpec(obj, propertySpec) {
        var properties = propertySpec.split('.');
        var resultObj = obj;
        _.each(properties, function (property) {
            if (resultObj[property]) {
                resultObj = resultObj[property];
            }
        });
        return resultObj;
    }

    module.exports.register = function(Handlebars, options) {
        Handlebars.registerHelper("withSortLimit", function(collection, options) {
            var result = "";
            var selectedPages = collection;

            // Sorting
            var sortProperty = options.hash.sortBy || "basename";
            selectedPages = _.sortBy(collection, function (item) {
                return getPropertyFromSpec(item, sortProperty);
            });
            if (options.hash.dir && options.hash.dir === "desc") {
                selectedPages = selectedPages.reverse();
            }

            // Limit
            if (options.hash.limit && options.hash.limit > 0) {
                selectedPages = _.first(selectedPages, options.hash.limit);
            }

            // Rendering
            _.each(selectedPages, function (page, index, pages) {
                result += options.fn(page);
            });

            return result;
        });
    };

}).call(this);
于 2015-01-29T18:41:27.967 に答える
0

次の組み合わせで目標を達成できるはずです。

  1. Gruntfile でキーワード コレクションのカスタム ソート ルールを指定します。
  2. ヘルパーを使用して、{{#withFirst pages 5}}ソートされたリストを最初の 5 つの投稿に制限します。

グラントファイル

assemble: {
  options: {
    flatten: false,
    partials: '<%= build.src %>/_partials/*.hbs',
    layoutdir: '<%= build.src %>/_layouts',
    data: ['<%= build.src %>/_data/*.{json,yml}', 'package.json'],
    assets: '<%= build.out %>/',
    helpers: [ 'helper-moment','<%= build.src %>/helpers/helper-*.js'],
    collections: [
      { name: 'keywords', inflection: 'keyword', sortby: 'posted', sortorder: 'desc' }
    ]
  },

ページ テンプレート

<div>
  {{#each keywords}}
    {{#is keyword "news"}}
      {{#withFirst pages 5}}
        <div>
          <h2><a href="/{{relativeLink}}">{{data.title}}</a></h2>
          <p>{{formatDate data.posted "%F"}}</p>
          <div>
          {{#markdown}}{{data.summary}}{{/markdown}}
          </div>
          <p><a href="/{{relativeLink}}">more...</a></p>
        </div>
      {{/withFirst}}
    {{/is}}
  {{/each}}
</div>
于 2015-01-29T19:45:16.693 に答える