Question

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

Answer 1

为所有益生菌开发者提供更新的答案

我们按照Pushing Assets to the Browser的教程进行了操作，但是为什么仍无法找到资产的情况有一个缺失的情节。假设我们在这里基于该教程创建了我们自己的主题模块。我举了我的例子：

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模板中的脚本标签。让撇号为你做，你的工作只是推动资产;）

现在，如果您有太多资产，并且每次上传新资产时您都懒得编写代码，我会使用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)
        });
    }
}

例如，如果我想使用自定义资产PNG执行<img>代码该怎么办？我是否也需要pushAsset？

答案：不，你不必推送资产，因为它只适用于Stylesheets和Scripts。在app.js中加载模块后，撇号会自动将资源上传到/modules/module-name/path-to-asset/的网址。例如：<img src="/modules/my-theme/img/icon.png">简单！

<小时/>

你完成了！

另一个注意：如果您只需要通过CSS调用您的资产以获取使用 url（）或font-face的背景图片，则需要使用您自己的模块名称进行调用：{{ 1}}。简单！！

请记住，请勿将 LINK 和 SCRIPT 标记用于链接您推送的资产。 Apostrophe为您提供强大的性能！同样，你的工作只是推动资产。

Answer 2

编写自己的curl --header "Authorization":"base64" https://www.test.com -v和link代码并不是必要或明智的，因为这样可以防止Apostrophe在生产中缩小资产，并将LESS文件作为一个单元进行编译，具有以下优点：共享mixins等。

但是，apostrophe-samples project现在包含“主题”模块的工作示例。我已将有时在script项目级别找到的资产移至apostrophe-assets模块，以演示如何正确完成此操作。

关键要素是：

不要忘记在app.js中启用theme模块。
在theme中，在lib/modules/theme/index.js中推送您需要的资源，或从construct调用的方法。
将这些资源放入construct模块的public/css和public/js子目录中。

请参阅apostrophe-samples project了解确切的工作代码。

要了解生产中的撇号以及如何在没有其他代码的情况下缩小资产，请参阅Apostrophe in production。

感谢您轻松将此用例带入示例项目。

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

2 个答案: