Of course! Let's break down global.color in the context of the DedeCMS (织梦CMS) templating system.
What is global.color?
In DedeCMS, global.color is a global system variable that holds the primary color value defined by the website's administrator. Its primary purpose is to provide a consistent and easy-to-change color scheme for the entire website, especially for links, buttons, and other important UI elements.
Think of it as a central "brand color" setting.
How is global.color Set?
The value of global.color is not set in the template files themselves. Instead, it is configured by the site administrator in the DedeCMS backend. This is a key feature because it allows non-technical users to change the site's primary color without touching any code.
Setting Path:
- Log in to your DedeCMS admin panel.
- Navigate to 系统 (System) -> 系统基本参数 (System Basic Settings).
- On the "基本设置 (Basic Settings)" tab, find the field named 网站主色调 (Website Primary Color).
- Enter your desired color value here. This is typically a Hexadecimal color code (e.g.,
#FF0000for red,#4285F4for Google blue, or#007BFFfor a standard blue). - Click "保存 (Save)".
Once saved, this value is stored in the dede_sysconfig database table and is loaded into the global.color variable for all frontend pages.
How to Use global.color in Templates
You can use this variable in your DedeCMS template files (.htm) to style your website. The most common use case is for CSS.
Method 1: Using it Directly in Inline Styles (Not Recommended)
You can inject the variable directly into an HTML style attribute.
Example: A styled link
<a href="/about-us.html" style="color: {dede:global.name='color'/}; font-weight: bold;">
About Us
</a>
- Why it's not recommended: This mixes content (HTML) with presentation (CSS), making the template harder to read and maintain.
Method 2: The Best Practice - Using it in CSS (Recommended)
This is the cleanest and most efficient method. You define a CSS variable (or a class) in your stylesheet and assign the global.color value to it.
Step 1: In your main CSS file (e.g., style.css)
Define a CSS variable. CSS variables (custom properties) are perfect for this as they can be easily reused and changed.
/* style.css */
:root {
/* Define the primary color from the DedeCMS global variable */
--primary-color: {dede:global.name='color'/};
}
/* Now you can use this variable throughout your stylesheet */
a {
color: var(--primary-color);
transition: color 0.3s ease;
}
a:hover {
color: #333; /* Darken on hover */
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.btn-primary:hover {
background-color: #0056b3; /* A darker shade for hover effect */
}
Step 2: In your template file (e.g., head.htm)
Make sure your CSS file is linked in the <head> section of your template. The DedeCMS template engine will process the {dede:global.name='color'/} tag and replace it with the actual hex color code when the page is generated.
<!-- head.htm -->
<head>
<meta charset="UTF-8">{dede:global.seotitle/} - {dede:global.cfg_webname/}</title>
<link rel="stylesheet" href="/templets/default/style/css/style.css">
<!-- other head tags -->
</head>
Now, any link (<a> tag) or element with the class btn-primary on your entire site will automatically use the color you set in the admin panel. If you want to change the site's color scheme, you only need to update it in one place: the System Basic Settings.
What if global.color is Empty?
If an administrator forgets to set a color in the backend, {dede:global.name='color'/} will return an empty string. This can lead to unstyled elements or invalid CSS (e.g., background-color: ;).
It's good practice to provide a fallback color in your CSS.
Example with a Fallback:
:root {
--primary-color: {dede:global.name='color'/} #007bff; /* Fallback to blue if empty */
}
a {
color: var(--primary-color);
}
In this example, if global.color is empty, the browser will use the fallback color #007bff.
Summary
| Feature | Description |
|---|---|
| What it is | A global DedeCMS variable for the website's primary color. |
| How it's Set | In the backend: 系统 (System) -> 系统基本参数 (System Basic Settings) -> 网站主色调. |
| Typical Value | A Hexadecimal color code (e.g., #4285F4). |
| Best Use Case | Defining CSS variables in your stylesheet for a consistent and easily changeable theme. |
| Example in CSS | --primary-color: {dede:global.name='color'/}; |
| Example in HTML | <a style="color: {dede:global.name='color'/};">Link</a> (less recommended) |
| Handling Empty Value | Provide a fallback color in CSS: --primary-color: {dede:global.name='color'/} #007bff; |
