Question

我猜这个问题可能与How do I use "Main Layout" views in a multi module Phalcon application?

的结果相同

我的主要布局视图具有我整个应用的基本html结构，并且我使用控制器布局视图来显示该控制器的内容。我相信到目前为止我做得对吗？

但现在我需要在主布局视图中加载与该模块控制器相关的特定JS和CSS文件。

目前我正在主要布局文件中加载所有CSS和JS，但这完全违背了多模块方法。每个模块都应该能够加载css / js文件，而无需修改核心布局文件。

理想情况下，我希望采用与设置页面标题相同的方法

控制器： Phalcon \ Tag :: setStylesheetLink（“http://fonts.googleapis.com/css?family=Rosario”，false）;

观点： echo Phalcon \ Tag :: getStylesheetLink（）;

我可以通过其他任何方式实现此目标吗？

Answer 1

目前无法创建某种排序功能（样式表按照您设置的顺序打印出来）或收集工具，您只需将样式表添加到\Phalcon\Tag::stylesheetLink()，它们就可以打印出来

但是，您可以使用自定义类实现所需的功能，如下所示：

在你的config.ini中你有这个部分

[resource]
css.bootstrap = "/public/css/bootstrap.css"
css.index     = "/public/css/index.css"
css.about     = "/public/css/about.css"
css.contact   = "/public/css/contact.css"

创建课程\MyApp\Tag

namespace MyApp;

class Tag
{
    private $_css = array();

    public function add($css)
    {
        $this->_css[$css] = true;
    }

    public function remove($css)
    {
        $this->_css[$css] = false;
    }

    public function clear()
    {
        $this->_css = array();
    }

    public function generate()
    {
        $config = \Phalcon\DI::getDefault()->get('config');
        $output = '';

        foreach ($this->_css as $css => $active)
        {
            if ($active)
            {
                if (isset($config->resource->css->$css))
                {
                    $output .= \Phalcon\Tag::stylesheetLink($config->resource->css->$css);
            }
        }

        return $output;
    }
}

然后在您的控制器中，您可以执行以下操作：

$style = new \MyApp\Tag();
$style->add('bootstrap');
$style->add('about');

$this->view->setVar('stylesheets', $style->generate();

并在您看来：

<?php echo $stylesheets; ?>

Answer 2

这是一种可以手动操作js和css文件资产顺序的方法。

首先，在控制器中添加css和js路径时，使用自动Phalcon \ Assets \ Collection容器来存储您的ad-hoc资产：

$this->assets->addJs('js/bootstrap-multiselect.js');
$this->assets->addCss('css/bootstrap-multiselect.css');

在您的所有控制器扩展的自定义BaseController中，添加一个afterExecuteRoute（）公共方法：

/**
 * stuff to do after a route has been executed
 * this is where we attach standard js and css assets
 * */
public function afterExecuteRoute(){
    // wait to rebuild assets until after the dispatcher is finished
    if( ! $this->dispatcher->isFinished() ){
        return;
    }
    ...
}

一旦我们确定当前路由已完成执行，我们就可以从Phalcon \ Assets \ Manager中的自动js和css集合中提取ad-hoc资产，将它们附加到我们的公共资源文件列表中，对它们进行排序和重复数据删除，然后将它们放入新的自定义集合中：

// get list of js files added to the standard js collection
$append_js = array();
forEach( $this->assets->getJs() as $js){
    $append_js[] = $js->getPath();
}
// declare paths to common js assets
$js_assets = array(
    'js/jquery-2.1.1.min.js',
    'js/jquery-ui.min.js',
    'js/bootstrap.min.js',
);
// merge common paths with ad-hoc paths
$js_assets = array_merge( $js_assets, $append_js );
$js_assets = array_unique( $js_assets ); // dedup
// add js assets to a new collection
$js_collection = $this->assets->collection('header_js');
forEach( $js_assets as $js_path ){
    $js_collection->addJs( $js_path );
}

将css资产重建为新集合的方式相同：

// get list of css files added to the standard css collection
$append_css = array();
forEach( $this->assets->getCss() as $css ){
    $append_css[] = $css->getPath();
}
// declare paths to common css assets
$css_assets = array(
    'css/jquery-ui.min.css',
    'css/jquery-ui.theme.min.css',
    'css/jquery-ui.structure.min.css',
    'css/bootstrap.min.css',
    'css/bootstrap-theme.min.css',
    'css/main.css',
);
// merge common paths with ad-hoc paths
$css_assets = array_merge( $css_assets, $append_css );
$css_assets = array_unique( $css_assets ); // dedup
// add css assets to a new collection
$css_collection = $this->assets->collection('header_css');
forEach( $css_assets as $css_path ){
    $css_collection->addCss( $css_path );
}

最后，当您在模板中输出js和css资产时，输出新的自定义集合，而不是Phalcon \ Assets \ Manager自动创建的默认集合：

{{ getDoctype() }}
<html>
    <head>
        {{ tag.getTitle() }}
        {{ assets.outputCss( 'header_css' ) }}
        {{ assets.outputJs( 'header_js' ) }}
    </head>

使用Phalcon标签动态加载CSS和Javascript文件

2 个答案: