时间戳

首页 > 解决方案 > 将资产推送到浏览器 - 您自己的主题模块

apostrophe-cms - 将资产推送到浏览器 - 您自己的主题模块

问题描述

对于包括我自己在内的一些初学者来说，仍在研究如何制作我们自己的主题模块。但这就是我自己找到解决方案的方式。请注意：我不知道这是否会影响 ApostropheCMS 的性能问题，但我将把它作为我们所有人的解决方案。让我们开始 ！（见下面的答案）：

标签： apostrophe-cms

解决方案

所有 APOSTROPHE 开发人员初学者的更新答案

我们遵循了将资产推送到浏览器中的教程，但是以某种方式缺少关于为什么仍然找不到资产的情节。假设我们在这里基于该教程创建了自己的主题模块。我以我的为例：

my-theme
  - public/
     - css/
         - bootstrap/
             - bootstrap.min.css
         - font-awesome/
             - font-awesome.min.css
     - js/
         - bootstrap/
             - bootstrap.min.js
   - index.js

然后，你必须把它放在app.js中来加载模块：

  modules: {
      // in app.js
      // other config above
      // include my own-theme-module
      'my-theme' : {},

然后，在我们的my-theme/index.js中，这些是我的 pushAsset 方法：

module.exports = {
    construct : function(self,options){
        // Every asset you have in public folder
        self.pushAsset('script', 'bootstrap/bootstrap.min');
        self.pushAsset('stylesheet', 'bootstrap/bootstrap.min');
        self.pushAsset('stylesheet', 'custom');
    }
}

重要提示：您不必在 nunjucks 模板中包含链接或脚本标签，因为它会使您在 ApostropheCMS 上的性能问题，如果您在 nunjucks 模板中放置链接/脚本标签，可能不会进行缩小过程。让撇号为您完成，您的工作只是 pushAsset ;)

现在，如果您有太多资产，并且每次上传新资产时都懒得写代码，我有一个使用 lodash 的快捷方式，很简单！. 在my-theme/index.js：

var _ = require('lodash');
module.exports = {
    stylesheets : [
        {   // Make sure your directory after css folder is correct for specific search
            name : 'bootstrap/bootstrap.min'
        },
        {
            name : 'custom'
        },
        {
            name : 'font-awesome/css/font-awesome.min'
        }
    ],
    scripts : [
        {
            name : 'bootstrap/bootstrap.min'
        }
    ],
    construct : function(self,options){
        // Every asset you have in public folder
        _.each(options.stylesheets || [] , function(item){
            self.pushAsset('stylesheet', item.name);
        });
        _.each(options.scripts || [] , function(item){
            self.pushAsset('script' , item.name)
        });
    }
}

例如，如果我想<img>用我的自定义资产 PNG 做标记怎么办？我也需要 pushAsset 吗？

答：不，您不必推送资产，因为它仅适用于样式表和脚本。在 app.js 中加载模块后，撇号会自动将资产上传到/modules/module-name/path-to-asset/. 例如：<img src="/modules/my-theme/img/icon.png">简单！


你完成了 ！

另一个注意事项：如果您只需要通过 CSS 为使用url()或 font-face的背景图像调用您的资产，则需要使用您自己的模块名称来调用：/modules/your-module-name/path-to-your-asset/。简单的 ！！

并记住，不要使用LINK和SCRIPT标签来链接您推送的资产。Apostrophe 已为您提供强大的性能！同样，您的工作是仅推送资产。

推荐阅读