跳转到内容
XOOPS 2.7 Docs

“主题FAQ”

主题常见问题解答

Section titled “主题常见问题解答”

有关 XOOPS 主题、定制和管理的常见问题和解答。

主题安装和激活

Section titled “主题安装和激活”

问：如何在XOOPS中安装新主题？

Section titled “问：如何在XOOPS中安装新主题？”

答： 1.下载主题zip文件 2. 转到XOOPS管理 > 外观 > 主题 3. 点击“上传”并选择zip文件 4.主题出现在主题列表中 5. 单击为您的站点激活它

替代方案：手动解压到 /themes/ 目录并刷新管理面板。

问：主题上传失败并显示“权限被拒绝”

Section titled “问：主题上传失败并显示“权限被拒绝””

A: 修复主题目录权限：

Terminal window
# Make themes directory writable
chmod 755 /path/to/xoops/themes


# Fix uploads if uploading
chmod 777 /path/to/xoops/uploads


# Fix ownership if needed
chown -R www-data:www-data /path/to/xoops/themes

问：如何为特定用户设置不同的主题？

Section titled “问：如何为特定用户设置不同的主题？”

答：

  1. 进入用户管理器 > 编辑用户
  2. 转到“其他”选项卡
  3. 在“用户主题”下拉列表中选择首选主题
  4. 保存

用户-selected主题覆盖默认网站主题。

问：我可以为管理站点和用户站点设置不同的主题吗？

Section titled “问：我可以为管理站点和用户站点设置不同的主题吗？”

答： 是的，在XOOPS管理>设置中设置：

  1. 前端主题 - 默认站点主题
  2. 管理主题 - 管理控制面板主题（通常是单独的）

查找如下设置：

  • theme_set - 前端主题
  • admin_theme - 管理主题

主题定制

Section titled “主题定制”

问：如何自定义现有主题？

Section titled “问：如何自定义现有主题？”

A: 创建一个子主题来保留更新：

themes/
├── original_theme/
│   ├── style.css
│   ├── templates/
│   └── images/
└── custom_theme/          {* Create copy for editing *}
    ├── style.css
    ├── templates/
    └── images/

然后在您的自定义主题中编辑theme.html。

问：如何更改主题颜色？

Section titled “问：如何更改主题颜色？”

A: 编辑主题的 CSS 文件：

Terminal window
# Locate theme CSS
themes/mytheme/style.css


# Or theme template
themes/mytheme/theme.html

对于 XOOPS 主题：

themes/mytheme/style.css
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
}


body {
    background-color: var(--primary-color);
    color: #333;
}


a {
    color: var(--secondary-color);
}


.button {
    background-color: var(--accent-color);
}

问：如何将自定义CSS添加到主题？

Section titled “问：如何将自定义CSS添加到主题？”

答： 几种选择：

选项 1：编辑主题。html

themes/mytheme/theme.html
<head>
    {* Existing CSS *}
    <link rel="stylesheet" href="{$xoops_url}/themes/{$xoops_theme}/custom.css">
</head>

选项 2：创建自定义。css

Terminal window
# Create file
themes/mytheme/custom.css


# Add your styles
body { background: #fff; }

选项 3：管理设置（如果支持） 转到XOOPS管理>设置>主题设置并添加自定义CSS。

问：如何修改主题HTML模板？

Section titled “问：如何修改主题HTML模板？”

A: 找到模板文件：

Terminal window
# List theme templates
ls -la themes/mytheme/templates/


# Common templates
themes/mytheme/templates/theme.html      {* Main layout *}
themes/mytheme/templates/header.html     {* Header *}
themes/mytheme/templates/footer.html     {* Footer *}
themes/mytheme/templates/sidebar.html    {* Sidebar *}

使用正确的 Smarty 语法进行编辑：

themes/mytheme/templates/theme.html
{* XOOPS Theme Template *}
<!DOCTYPE html>
<html>
<head>
    <meta charset="{$xoops_charset}">
    <title>{$xoops_pagetitle}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{$xoops_url}/themes/{$xoops_theme}/style.css">
</head>
<body>
    <header>
        {include file="file:header.html"}
    </header>


    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    {$xoops_contents}
                </div>
                <aside class="col-md-3">
                    {include file="file:sidebar.html"}
                </aside>
            </div>
        </div>
    </main>


    <footer>
        {include file="file:footer.html"}
    </footer>
</body>
</html>

主题结构

Section titled “主题结构”

问：主题中需要哪些文件？

Section titled “问：主题中需要哪些文件？”

A： 最小结构：

themes/mytheme/
├── theme.html              {* Main template (required) *}
├── style.css              {* Stylesheet (optional but recommended) *}
├── screenshot.png         {* Preview image for admin (optional) *}
├── images/                {* Theme images *}
│   └── logo.png
└── templates/             {* Optional: Additional templates *}
    ├── header.html
    ├── footer.html
    └── sidebar.html

有关详细信息，请参阅主题结构。

问：如何从头开始创建主题？

Section titled “问：如何从头开始创建主题？”

A: 创建结构：

Terminal window
mkdir -p themes/mytheme/images
cd themes/mytheme

创建theme.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="{$xoops_charset}">
    <title>{$xoops_pagetitle}</title>
    <link rel="stylesheet" href="{$xoops_url}/themes/{$xoops_theme}/style.css">
</head>
<body>
    <header>{$xoops_headers}</header>
    <main>{$xoops_contents}</main>
    <footer>{$xoops_footers}</footer>
</body>
</html>

创建style.css：

* { margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }
header { background: #333; color: #fff; padding: 20px; }
main { padding: 20px; }
footer { background: #f5f5f5; padding: 20px; border-top: 1px solid #ddd; }

主题变量

Section titled “主题变量”

问：主题模板中有哪些可用变量？

Section titled “问：主题模板中有哪些可用变量？”

A: 常见XOOPS主题变量：

{* Site Information *}
{$xoops_sitename}          {* Site name *}
{$xoops_url}               {* Site URL *}
{$xoops_theme}             {* Current theme name *}


{* Page Content *}
{$xoops_contents}          {* Main page content *}
{$xoops_pagetitle}         {* Page title *}
{$xoops_headers}           {* Meta tags, styles in head *}


{* Module Information *}
{$xoops_module_header}     {* Module-specific header *}
{$xoops_moduledesc}        {* Module description *}


{* User Information *}
{$xoops_isuser}            {* Is user logged in? *}
{$xoops_userid}            {* User ID *}
{$xoops_uname}             {* Username *}


{* Blocks *}
{$xoops_blocks}            {* All block content *}


{* Other *}
{$xoops_charset}           {* Document charset *}
{$xoops_version}           {* XOOPS version *}

问：如何将自定义变量添加到我的主题中？

Section titled “问：如何将自定义变量添加到我的主题中？”

A: 在渲染之前的 PHP 代码中：

<?php
// In module or admin code
require_once XOOPS_ROOT_PATH . '/class/xoopstpl.php';
$xoopsTpl = new XoopsTpl();


// Add custom variables
$xoopsTpl->assign('my_variable', 'value');
$xoopsTpl->assign('data_array', ['key1' => 'val1', 'key2' => 'val2']);


// Use in theme template
$xoopsTpl->display('file:theme.html');
?>

在主题中：

<p>{$my_variable}</p>
<p>{$data_array.key1}</p>

主题样式

Section titled “主题样式”

问：如何使我的主题具有响应能力？

Section titled “问：如何使我的主题具有响应能力？”

A: 使用 CSS 网格或 Flexbox：

themes/mytheme/style.css
/* Mobile first approach */
body {
    font-size: 14px;
}


.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}


main {
    order: 2;
}


aside {
    order: 3;
}


/* Tablet and up */
@media (min-width: 768px) {
    .container {
        grid-template-columns: 2fr 1fr;
    }
}


/* Desktop and up */
@media (min-width: 1200px) {
    .container {
        grid-template-columns: 3fr 1fr;
    }
}

或者使用 Bootstrap 集成：

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
</head>


<div class="container">
    <div class="row">
        <div class="col-md-9">{$xoops_contents}</div>
        <div class="col-md-3">{* Sidebar *}</div>
    </div>
</div>

问：如何向我的主题添加深色模式？

Section titled “问：如何向我的主题添加深色模式？”

答：

themes/mytheme/style.css
/* Light mode (default) */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --border-color: #cccccc;
}


body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}


/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --border-color: #444444;
    }
}


/* Or with CSS class */
body.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #444444;
}

使用 JavaScript 切换：

<script>
document.getElementById('dark-mode-toggle').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
    localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
});


// Load preference
if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark-mode');
}
</script>

主题问题

Section titled “主题问题”

问：主题显示“无法识别的模板变量”错误

Section titled “问：主题显示“无法识别的模板变量”错误”

A: 变量没有传递给模板。检查：

  1. 变量在 PHP 中分配：
<?php
$xoopsTpl->assign('variable_name', $value);
?>
  1. 模板存在（指定的地方）
  2. 模板语法正确：
{* Correct *}
{$variable_name}


{* Wrong *}
$variable_name
{variable_name}

问：CSS 更改未出现在浏览器中

Section titled “问：CSS 更改未出现在浏览器中”

答： 清除浏览器缓存：

  1. 硬刷新：Ctrl+Shift+R（Mac 上为 Cmd+Shift+R） 2.清除服务器上的主题缓存：
Terminal window
rm -rf xoops_data/caches/smarty_cache/themes/*
rm -rf xoops_data/caches/smarty_compile/themes/*

3.检查主题中的CSS文件路径：

Terminal window
ls -la themes/mytheme/style.css

问：主题中的图像无法加载

Section titled “问：主题中的图像无法加载”

A: 检查图像路径：

{* WRONG - relative path from web root *}
<img src="themes/mytheme/images/logo.png">


{* CORRECT - use xoops_url *}
<img src="{$xoops_url}/themes/{$xoops_theme}/images/logo.png">


{* Or in CSS *}
background-image: url('{$xoops_url}/themes/{$xoops_theme}/images/bg.png');

问：主题模板丢失或导致错误

Section titled “问：主题模板丢失或导致错误”

A: 请参阅模板错误进行调试。

主题分布

Section titled “主题分布”

问：如何打包主题进行分发？

Section titled “问：如何打包主题进行分发？”

A: 创建一个可分发的 zip:

Terminal window
# Structure
mytheme/
├── theme.html           {* Required *}
├── style.css
├── screenshot.png       {* 300x225 recommended *}
├── README.txt
├── LICENSE
├── images/
│   ├── logo.png
│   └── favicon.ico
└── templates/           {* Optional *}
    ├── header.html
    └── footer.html


# Create zip
zip -r mytheme.zip mytheme/

问：我可以出售我的 XOOPS 主题吗？答： 检查 XOOPS 权限证：

Section titled “问：我可以出售我的 XOOPS 主题吗？答： 检查 XOOPS 权限证：”
  • 使用XOOPS classes/templates的主题必须尊重XOOPS权限
  • 纯CSS/HTML主题限制较少
  • 查看XOOPS贡献指南了解详细信息

主题表演

Section titled “主题表演”

问：如何优化主题性能？

Section titled “问：如何优化主题性能？”

答：

  1. 最小化CSS/JS - 删除未使用的代码
  2. 优化图像 - 使用正确的格式（WebP，AVIF）
  3. 使用 CDN 获取资源
  4. 延迟加载图像：
<img src="image.jpg" loading="lazy">
  1. 缓存-bust版本：
<link rel="stylesheet" href="{$xoops_url}/themes/{$xoops_theme}/style.css?v={$xoops_version}">

有关更多详细信息，请参阅性能FAQ。

相关文档

Section titled “相关文档”
  • 模板错误
  • 主题结构
  • 性能FAQ
  • Smarty调试

#XOOPS #主题 #faq #troubleshooting #customization