Перенос ресурсов в браузер - ваш собственный тематический модуль - PullRequest
Новая
       10

Перенос ресурсов в браузер - ваш собственный тематический модуль

0 голосов
/ 11 июня 2018

Для некоторых новичков, в том числе и для меня, все еще нужно разобраться, как сделать наш собственный модуль темы.Но так я нашел решение сам.Обратите внимание: я не знаю, влияет ли это на производительность системы ApostropheCMS, но я оставлю это решение всем нам.Давай начнем !(См. Ответ ниже):

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Нет необходимости или нежелательно писать свои собственные теги link и script, потому что это не позволяет Apostrophe минимизировать ваши активы в рабочей среде и компилировать ваши файлы LESS как единое целое с преимуществами общих миксинов и т. Д..

Однако проект *1006* с апострофом-примерами теперь содержит рабочий пример модуля "theme".Я переместил активы, иногда находящиеся на уровне проекта в apostrophe-assets, в модуль theme, чтобы продемонстрировать, как это можно сделать правильно.

Ключевые элементы:

  • Донне забудьте включить модуль theme в app.js.
  • В lib/modules/theme/index.js, вставить нужные вам активы в construct или метод, вызванный из construct.

Для получения точного рабочего кода см. Проект примеров апострофов .

Чтобы узнать об Apostrophe в производстве и о том, как минимизировать активы там без дополнительного кода, см. Apostrophe in production .

Спасибо за толчок для включения этого варианта использования в примерыпроект.

0 голосов
/ 11 июня 2018

ОБНОВЛЕННЫЙ ОТВЕТ ДЛЯ ВСЕХ НАЧИНАЮЩИХ РАЗРАБОТЧИКОВ 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, апостроф автоматически загрузит ресурс в URL на /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 , чтобы связать актив, который вы нажали.Апостроф СДЕЛАН ДЛЯ ВАС ДЛЯ МОЩНОЙ ЭФФЕКТИВНОСТИ!Опять же, ваша работа состоит в том, чтобы выдвигать актив ТОЛЬКО.

...