主题 html 文件

更新时间：2024年9月30日 17:03 浏览：422

文件位置：/YourThemeName/YourThemeName.php

示例：

<be-html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title><?php echo $this->title; ?></title>
    <meta name="keywords" content="<?php echo $this->metaKeywords ?? ''; ?>">
    <meta name="description" content="<?php echo $this->metaDescription ?? ''; ?>">
    <meta name="applicable-device" content="pc,mobile">

    <base href="<?php echo beUrl(); ?>/" >
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="https://cdn.phpbe.com/ui/be.css" />
    <link rel="stylesheet" href="https://cdn.phpbe.com/ui/be-icons.css"/>

    <style type="text/css">
        <?php
        $configTheme = \Be\Be::getConfig('Theme.YourThemeName.Theme');

        echo 'html {';
        echo 'font-size: ' . $configTheme->fontSize. 'px;';
        echo 'background-color: ' . $configTheme->backgroundColor. ';';
        echo 'color: ' . $configTheme->fontColor. ';';
        echo '}';

        echo 'body {';
        echo '--major-color: ' . $configTheme->majorColor . ';';
        echo '--minor-color: ' . $configTheme->minorColor . ';';
        echo '--font-color: ' . $configTheme->fontColor . ';';

        $libCss = \Be\Be::getLib('Css');
        for ($i=1; $i<=9; $i++) {
            // 主色依次减谈 10%
            echo '--major-color-' . $i. ': ' . $libCss->lighter($configTheme->majorColor, $i * 10) . ';';
            // 主色依次加深 10%
            echo '--major-color' . $i. ': ' . $libCss->darker($configTheme->majorColor, $i * 10) . ';';

            // 搭配色依次减谈 10%
            echo '--minor-color-' . $i. ': ' . $libCss->lighter($configTheme->minorColor, $i * 10) . ';';
            // 搭配色依次加深 10%
            echo '--minor-color' . $i. ': ' . $libCss->darker($configTheme->minorColor, $i * 10) . ';';

            // 文字颜色依次减谈 10%
            echo '--font-color-' . $i. ': ' . $libCss->lighter($configTheme->fontColor, $i * 10) . ';';
            // 文字颜色依次加深 10%
            echo '--font-color' . $i. ': ' . $libCss->darker($configTheme->fontColor, $i * 10) . ';';
        }
        echo '}';

        echo 'a {';
        echo 'color: ' . $configTheme->linkColor. ';';
        echo '}';

        echo 'a:hover {';
        echo 'color: ' . $configTheme->linkHoverColor. ';';
        echo '}';
        ?>
    </style>
    <be-head>
    </be-head>
</head>
<body>
    <be-body></be-body>
</body>
</html>
</be-html>

主题配置文件中的配置项将生成 CSS 常量，用于覆盖BE UI 中的配置，并控制整站色调：

body {
	--major-color: #57B33E;
	--minor-color: #02121E;
	--font-color: #253745;
	--major-color-1: #64c04b;
	--major-color1: #4ea137;
	--minor-color-1: #042c4a;
	--minor-color1: #01101a;
	--font-color-1: #334b5f;
	--font-color1: #21313e;
	--major-color-2: #75c75f;
	--major-color2: #458f31;
	--minor-color-2: #074777;
	--minor-color2: #010e18;
	--font-color-2: #416079;
	--font-color2: #1d2c37;
	--major-color-3: #86ce73;
	--major-color3: #3c7d2b;
	--minor-color-3: #0a62a4;
	--minor-color3: #010c15;
	--font-color-3: #4f7593;
	--font-color3: #192630;
	--major-color-4: #97d587;
	--major-color4: #346b25;
	--minor-color-4: #0d7dd1;
	--minor-color4: #010a12;
	--font-color-4: #618aaa;
	--font-color4: #162029;
	--major-color-5: #a9dc9b;
	--major-color5: #2b591f;
	--minor-color-5: #1e96f0;
	--minor-color5: #01080e;
	--font-color-5: #7b9db8;
	--font-color5: #121b22;
	--major-color-6: #bae3af;
	--major-color6: #224718;
	--minor-color-6: #4babf3;
	--minor-color6: #00070c;
	--font-color-6: #95b1c6;
	--font-color6: #0e151b;
	--major-color-7: #cbeac3;
	--major-color7: #1a3512;
	--minor-color-7: #78c0f6;
	--minor-color7: #000509;
	--font-color-7: #b0c4d4;
	--font-color7: #0b1014;
	--major-color-8: #dcf1d7;
	--major-color8: #11230c;
	--minor-color-8: #a5d5f9;
	--minor-color8: #000306;
	--font-color-8: #cad8e2;
	--font-color8: #070b0d;
	--major-color-9: #edf8eb;
	--major-color9: #081106;
	--minor-color-9: #d2eafc;
	--minor-color9: #000102;
	--font-color-9: #e4ebf0;
	--font-color9: #030506;
}

页面中使用示例：

<div class="be-bc-major-9 be-p-100">
    <span class="be-c-major">颜色：主色，背景：主色减淡90%<span>
</div>

效果如下：

颜色：主色，背景：主色减淡90%

也可以在 CSS 样式中通过 var 调用变量：

.header-menu a {
  color: var(--major-color);
}

/* 鼠标悬停时，链接颜色加深20% */
.header-menu a:hover {
  color: var(--major-color2);
}

.footer {
  background-color: var(--minor-color);
}

.footer a {
  color: var(--font-color);
}

.footer  a:hover {
  color: var(--major-color);
}

更有效率的做法：

您开发主题时，可以自行编译 Be Ui 的 scss 库，编译方法参见：

https://www.phpbe.com/ui

可装ui库放置在主题的 www 目录下，将编译好的 ui/be.css 引入主题中

<?php
$themeWwwUrl = \Be\Be::getProperty('Theme.YourThemeName')->getWwwUrl();
?>
<link rel="stylesheet" href="<?php echo $themeWwwUrl; ?>/ui/be.css" />