如何在撇号cms中添加bootstrap css和js

时间:2018-10-26 18:23:29

标签: apostrophe apostrophe-cms

这是我在撇号资产中的配置。我错过了什么吗?

// This configures the apostrophe-assets module to push a 'site.less'
// stylesheet by default, and to use jQuery 3.x

module.exports = {
  jQuery: 3,
  stylesheets: [
    {
      name: 'bootstrap.min',
      minify: true
    },
    {
      name:'font-awesome.min',
      path: 'fonts/css',
      minify:true
    },
    {
      name: 'style',
      minify: false
    },

    {
        name: 'site'
    }

  ],
  scripts: [
    {
      name: 'jquery-3.2.1.min',
      minify:true
    },{
      name: 'popper'

    },{
      name: 'bootstrap.min'
    },
    {
      name: 'custom'
    },
    {
      name: 'site'
    }
  ]
};

我已推荐https://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html。我也已经用撇号覆盖了现有模块。

1 个答案:

答案 0 :(得分:1)

知道是否有必要添加jQuery: 3

很有趣

看看我的代码:

lib/modules/apostrophe-assets/index.js

module.exports = {
  stylesheets: [
    {
      name: 'site'
    }
  ],
  scripts: [
    {
      name: 'site'
    },
    {
      name: 'lethargy.min'
    },
    {
      name: 'smartscroll.min'
    }
  ]
};

我的js文件位于这样的默认路径中:

lib/modules/apostrophe-assets/public/js/lethargy.min.js

您也可以从此处的每个小部件推送资产,例如在索引js中:

lib/modules/example-widget/index.js

  //Create functions for pushing assets to browser
  afterConstruct: function(self) {
  self.pushAssets();
  },

  //load third party styles and scripts
  //init has all settings for fullpage
  construct: function(self, options) {
    self.pushAssets = function() {
      self.pushAsset('stylesheet', 'vendor/materialize.min', { when: 'always' });
      self.pushAsset('stylesheet', 'overrides', { when: 'always' });
      self.pushAsset('script', 'vendor/materialize', { when: 'always' });
      self.pushAsset('script', 'init', { when: 'always' });
    };
  }