html - 如何自定义我网站的主题取决于用户

Question

我正在使用 bootstrap 3，我必须在我的网站上设置多个主题，具体取决于我们拥有的每个客户。

• 客户端 1:绿色主题；
• 客户端 2:紫色主题；
• 客户 3:灰色主题..

然后继续......

上下文解决方案必须是动态的，网站看起来一样，只是颜色变化。现在我在 url 上使用主题(获取主题...我正在寻找更好的解决方案)我无法按客户端类型制作特定的 css，重复的代码 -> 无法维护。

我现在的解决方案

我在 php 中创建了一个名为 bootstrap-override.css.php 的文件

上面包含这段代码:

<?php
header("Content-Type: text/css");

$defaultWhite = $white = '#FFFFFF';
$defaultGray1 = $gray1 = '#E7E7E7';
$defaultGray2 = $gray2 = '#CDCDCD';
$defaultGray3 = $gray3 = '#F2F2F2';
$defaultGrayBlue1 = $grayBlue1 = '#99AEBD';
$defaultGrayBlue2 = $grayBlue2 = '#495D6C';
$defaultBlue1 = $blue1 = '#0094D7';
$defaultBlue2 = $blue2 = '#004F9F';

if (isset($_GET['theme'])) {
    switch ($_GET['theme']) {
        case 'CA':
            $grayBlue1 = '#008168';
            $blue1 = '#009AA5';
            $blue2 = '#2A3B48';
            break;
        case 'CE':
            $defaultGrayBlue1 = $grayBlue1 = '#ABABAB';
            $defaultGrayBlue2 = '#727274';
            $blue1 = '#D70119';
            $blue2 = '#D70119';
            break;
// More client...
    }
}
?>

我的 css 使用这些变量，我使用这段代码调用它:

$this->headLink()->prependStylesheet($this->basePath() . '/websiteName/css/bootstrap-override.css.php'.((!empty($_GET['theme'])) ? "?theme={$_GET['theme']}" : ''))

(ZF2 应用程序)

但是 switch case 部分很丑，get 部分也很丑......如果我有一个新的客户端类型，我不能这样离开，我会让这段代码更复杂......我想要一个更有效的方法做这个。

如果有人可以帮助改进这一点。

编辑:根据评论，将所有主题存储在数据库中，客户端/主题之间可能存在 1/n 关系，我一个月前就已经想到了......但我对这个解决方案的问题是来设计它。如果我将它存储在数据库中，我必须创建一个模型层以尊重 Zend\MVC 最佳实践，以及我如何在这种架构中设计我的 CSS？

Answer 1

如果我对问题的理解正确，我会建议将 CSS 文件 添加到 HeadLink。

您可以有一个“默认”CSS 文件，它为所有客户端实现共享样式，然后是一个单独的、特定于主题的 CSS 文件，该文件然后指定 CA 的样式， CE等

要将此应用于 HeadLink View 助手，您可以使用事件监听器，“在渲染时”监听。

例如

use Zend\ModuleManager\Feature;
use Zend\EventManager\EventInterface;
use Zend\Mvc\MvcEvent;

class Module implements BootstrapListenerInterface
{
    public function onBootstrap(EventInterface $event)
    {
        $eventManager = $event->getApplication()->getEventManager();

        $eventManager->attach(MvcEvent::EVENT_RENDER, [$this, 'addClientCss'], 100);
    }

    public function addClientCss(MvcEvent $event)
    {
        $serviceManager = $event->getApplication()->getServiceManager();
        $config = $serviceManager->get('config');

        if (! isset($config['custom_css']) || ! is_array($config['custom_css'])) {
            return;
        }

        $viewPluginManager = $serviceManager->get('ViewPluginManager');

        $headLink = $viewPluginManager->get('headlink');
        $basePath = $viewPluginManager->get('basepath')();

        foreach($config['custom_css'] as $cssFilePath) {

            $headLink->appendStylesheet($basePath . $cssFilePath);
        }
    }
}

然后在需要的module.config.php中进行配置。

return [
    'client_css' => [
       '/some/css/path/to/styles.css',
       '/another/path/to/css/file.css'.
    ],
];

理想情况下，这将位于特定于您正在处理的客户或元素的模块中(并且也在 application.config.php 中的模块列表中的最后)，以便此配置是最后合并。