包简介

The Asset Tags Builder manages the generation of script and style tags for an Html Document.

README 文档

README

Description

Beyond the JDocument, the Asset Tags Builder manages the generation of script and style tags for an Html Document.

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

Usage

Create your Asset Tags Repository

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();

Including scripts and styles

The tags builder has the following predefined ways to include these scripts and styles:

InlineScriptTag
InlineStyleTag
LinkCriticalStylesheetTag
LinkDeferStylesheetTag
ScriptTag

For instance, ScriptTag defers the script and the LinkDeferStylesheetTag loads the stylesheet with a script at the end of the body.

Sample code:

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);

Head and Body Renderers for Joomla

These classes help to define the proper renderers for the head and body scripts. In the template, they are called in this way:

Statement to generate the scripts and styles for the document head:

<jdoc:include type="xthtmlassets" />

Statement to generate the scriptsat the bottom of the document body:

<jdoc:include type="xthtmlassets" />

Head Renderer

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;
    }
}

Body Renderer

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);
    }
}

Acknowledgements

Inspired by PrestaShop JavascriptManager
JAB18 - Let’s build a Joomla PWA PWS website

License

The MIT License (MIT)

anibalsanchez/extly-html-asset-tags-builder 适用场景与选型建议

anibalsanchez/extly-html-asset-tags-builder 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 1.18k 次下载、GitHub Stars 达 0，最近一次更新时间为 2019 年 08 月 07 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 anibalsanchez/extly-html-asset-tags-builder 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 anibalsanchez/extly-html-asset-tags-builder 我们能提供哪些服务？

定制开发 / 二次开发

基于 anibalsanchez/extly-html-asset-tags-builder 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

anibalsanchez/extly-html-asset-tags-builder

包简介