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

Question

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

Answer 1

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

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

关键要素是：

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

查看apostrophe-samples project 了解确切的工作代码。

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

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

Answer 2

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

我们遵循了来自 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 模板中的脚本标签。让撇号为你做，你的工作只是 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 吗？

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

---

你已经完成了！

另一个注意事项：如果您只需要通过 CSS 为使用 url() 或 font-face 的背景图像调用资产，则需要使用自己的模块名称进行调用：@987654329 @ .简单的 ！ ！

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