如何在 Silverstripe 5 中通过 CMS 值动态修改网站样式？

2024-03-15 05:10:05

通过 Silverstripe 5 中的 CMS 值动态更改 CSS

在现代网络开发中，网站定制至关重要。用户希望拥有反映他们独特偏好的网站，同时能够轻松地进行修改。Silverstripe 5 中的 CMS 值提供了这样的灵活性，允许用户在 CMS 管理面板中更改 CSS 变量，从而影响网站的公开样式。

CMS 中的 CSS 值

CMS 值是一种数据类型，可存储和管理字符串值。它们非常适合存储 CSS 变量，这些变量可以在 CMS 管理面板中轻松编辑。要创建 CMS 值，只需在您的 DataObject 类中声明它：

use SilverStripe\ORM\DataObject;
use SilverStripe\Forms\FieldList;
use SilverStripe\Forms\TextField;
use SilverStripe\Forms\Tab;

class ColorSettings extends DataObject
{
    private static $db = [
        'PrimaryColour' => 'Varchar',
        'AccentColour1' => 'Varchar',
        'AccentColour2' => 'Varchar',
    ];

    public function getCMSFields()
    {
        $fields = FieldList::create(
            Tab::create('Root',
                TextField::create('PrimaryColour', 'Primary Colour'),
                TextField::create('AccentColour1', 'Accent Colour 1'),
                TextField::create('AccentColour2', 'Accent Colour 2')
            )
        );

        return $fields;
    }
}

使用 CMS 值更新 CSS

有了 CMS 值，就可以使用它们来更新 CSS。这可以通过在 CSS 文件中使用以下语法来实现：

body {
    --primary: $PrimaryColour;
    --accent1: $AccentColour1;
    --accent2: $AccentColour2;
}

这里，--primary、--accent1 和 --accent2 是 CSS 变量，指向 CMS 值。当用户在 CMS 管理面板中更改这些值时，CSS 将自动更新，反映这些更改。

示例代码

以下代码展示了如何使用 CMS 值动态更改 CSS：

// 在 CMS 中创建 ColorSettings 数据对象
$colorSettings = ColorSettings::get()->first();

// 更新 CSS 变量
$primaryColour = $colorSettings->PrimaryColour;
$accentColour1 = $colorSettings->AccentColour1;
$accentColour2 = $colorSettings->AccentColour2;

$css = <<<EOT
body {
    --primary: $primaryColour;
    --accent1: $accentColour1;
    --accent2: $accentColour2;
}
EOT;

// 将更新后的 CSS 写入文件
file_put_contents('site.css', $css);