README

描述

除了JDocument，资产标签构建器还管理Html文档中脚本和样式标签的生成。

composer require anibalsanchez/extly-html-asset-tags-builder

用法

创建您的资产标签存储库

require_once JPATH_ROOT.'/libraries/my-library/vendor/autoload.php';

use Extly\Infrastructure\Support\HtmlAsset\Repository as HtmlAssetRepository;

// Create the repository, where all tags are defined and stored before the rendering
$htmlAssetRepository = HtmlAssetRepository::getInstance();

包含脚本和样式

标签构建器有以下预定义方式来包含这些脚本和样式

内联脚本标签
内联样式标签
链接关键样式表标签
链接延迟样式表标签
脚本标签

例如，ScriptTag 延迟脚本，而 LinkDeferStylesheetTag 在body底部加载样式表。

示例代码

use Extly\Infrastructure\Support\HtmlAsset\Asset\InlineScriptTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\LinkCriticalStylesheetTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\LinkDeferStylesheetTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\ScriptTag;

// Add template js
$templateJsFile = CMSHTMLHelper::script('template.js', ['relative' => true, 'pathOnly' => true]);
$templateJsFile = $templateJsFile.'?'.(new JVersion)->getMediaVersion();
$htmlAssetRepository->push(new ScriptTag($templateJsFile));

// Add Stylesheets
$templateCssFile = CMSHTMLHelper::stylesheet('template.css', ['relative' => true, 'pathOnly' => true]);
$templateCssFile = $templateCssFile.'?'.(new JVersion)->getMediaVersion();
$htmlAssetRepository->push(new LinkCriticalStylesheetTag($templateCssFile));

// Additional inline head scripts
$headScripts = $this->params->get('headScripts');

if (!empty($headScripts)) {
    $htmlAssetRepository->push(new InlineScriptTag($headScripts));
}

// FontAwesome at the end of the body
$linkStylesheetTag = new LinkDeferStylesheetTag('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
$htmlAssetRepository->push($linkStylesheetTag);

为Joomla创建头部和主体渲染器

这些类帮助定义头部和主体脚本的适当渲染器。在模板中，它们可以这样调用

生成文档头部脚本和样式的语句

<jdoc:include type="xthtmlassets" />

生成文档底部脚本的语句

<jdoc:include type="xthtmlassets" />

头部渲染器

namespace Joomla\CMS\Document\Renderer\Html;

defined('JPATH_PLATFORM') or die;

use Extly\Infrastructure\Support\HtmlAsset\HtmlAssetTagsBuilder;
use Extly\Infrastructure\Support\HtmlAsset\Repository;

/**
 * HTML document renderer for the document `<head>` element.
 */
class XTHtmlAssetsRenderer extends HeadRenderer
{
    /**
     * Renders the document head and returns the results as a string.
     *
     * @param string $head    (unused)
     * @param array  $params  Associative array of values
     * @param string $content The script
     *
     * @return string The output of the script
     */
    public function render($head, $params = [], $content = null)
    {
        $document = $this->_doc;

        // Nothing loaded by default
        $document->_styleSheets = [];
        $document->_style = [];
        $document->_scripts = [];
        $document->_script = [];

        // My Script and Styles
        $headScript = new HtmlAssetTagsBuilder()->generate(Repository::GLOBAL_POSITION_HEAD);

        return parent::render($head, $params, $content).$headScript;
    }
}

主体渲染器

namespace Joomla\CMS\Document\Renderer\Html;

defined('JPATH_PLATFORM') or die;

use Extly\Infrastructure\Support\HtmlAsset\HtmlAssetTagsBuilder;
use Extly\Infrastructure\Support\HtmlAsset\Repository;

/**
 * HTML document renderer for the document `<head>` element.
 */
class XTHtmlAssetsBodyRenderer extends HeadRenderer
{
    /**
     * Renders the document head and returns the results as a string.
     *
     * @param string $head    (unused)
     * @param array  $params  Associative array of values
     * @param string $content The script
     *
     * @return string The output of the script
     */
    public function render($head, $params = [], $content = null)
    {
        return new HtmlAssetTagsBuilder()->generate(Repository::GLOBAL_POSITION_BODY);
    }
}

致谢

受PrestaShop的JavascriptManager启发
JAB18 - 让我们构建一个Joomla PWA PWS网站

许可证

MIT许可证（MIT）

anibalsanchez / extly-html-asset-tags-builder

维护者

详细信息