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

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 模板中包含 link 或脚本标记，因为它会使您在缩小过程中的 ApostropheCMS 上出现性能问题如果您在 nunjucks 模板中放置 link/script 标签，则可能不会采用。让 Apostrophe 为你做，你的工作只是 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)
        });
    }
}

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

Answer : NO , you don't have to push asset because its only works on Stylesheets and Scripts . Once you load the module in app.js , the apostrophe automatically upload the asset to the url to /modules/module-name/path-to-asset/ . For Example : <img src="/modules/my-theme/img/icon.png"> Simple !

大功告成！

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

并且记住，不要将 LINK 和 SCRIPT 标签放到 link 你推送的资产。撇号为您打造了强大的性能！同样，您的工作只是推送资产。

Answer 2

没有必要也不建议编写您自己的 link 和 script 标签，因为这会阻止 Apostrophe 在生产中缩小您的资产，并阻止将您的 LESS 文件编译为一个单元共享 mixins 等的好处

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

关键要素是：

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

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

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

感谢您推动将此用例纳入示例项目。

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

Pushing Assets to the Browser - Your Own Theme Module

apostrophe-cms