رفتن به محتوا
XOOPS 2.7 Docs

ساختار تم

بررسی اجمالی

Section titled “بررسی اجمالی”

تم های XOOPS نمایش بصری سایت شما را کنترل می کنند. درک ساختار تم برای سفارشی سازی و ایجاد تم های جدید ضروری است.

چیدمان دایرکتوری

Section titled “چیدمان دایرکتوری”
themes/mytheme/
├── theme.html                  # Main layout template
├── theme.ini                   # Theme configuration
├── theme_blockleft.html        # Left sidebar block template
├── theme_blockright.html       # Right sidebar block template
├── theme_blockcenter_c.html    # Center block (centered)
├── theme_blockcenter_l.html    # Center block (left-aligned)
├── theme_blockcenter_r.html    # Center block (right-aligned)
├── css/
│   ├── style.css              # Main stylesheet
│   ├── admin.css              # Admin customizations (optional)
│   └── print.css              # Print stylesheet (optional)
├── js/
│   └── theme.js               # Theme JavaScript
├── images/
│   ├── logo.png               # Site logo
│   └── icons/                 # Theme icons
├── language/
│   └── english/
│       └── main.php           # Theme translations
├── modules/                    # Module template overrides
│   └── news/
│       └── news_index.tpl
└── screenshot.png             # Theme preview image

فایل های ضروری

Section titled “فایل های ضروری”

theme.html

Section titled “theme.html”

قالب اصلی چیدمان که تمام محتوا را در بر می گیرد:

<!DOCTYPE html>
<html lang="<{$xoops_langcode}>">
<head>
    <meta charset="<{$xoops_charset}>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
    <meta name="description" content="<{$xoops_meta_description}>">
    <meta name="keywords" content="<{$xoops_meta_keywords}>">


    {* Module-specific headers *}
    <{$xoops_module_header}>


    {* Theme stylesheets *}
    <link rel="stylesheet" href="<{$xoops_url}>/themes/<{$xoops_theme}>/css/style.css">
</head>
<body class="<{$xoops_dirname}>">
    <header class="site-header">
        <a href="<{$xoops_url}>" class="logo">
            <img src="<{$xoops_url}>/themes/<{$xoops_theme}>/images/logo.png"
                 alt="<{$xoops_sitename}>">
        </a>
        <nav class="main-nav">
            <{$xoops_mainmenu}>
        </nav>
    </header>


    <div class="page-container">
        {* Left sidebar *}
        <{if $xoops_showlblock == 1}>
        <aside class="sidebar-left">
            <{foreach item=block from=$xoops_lblocks}>
                <{include file="theme:theme_blockleft.html"}>
            <{/foreach}>
        </aside>
        <{/if}>


        {* Main content *}
        <main class="content">
            <{$xoops_contents}>
        </main>


        {* Right sidebar *}
        <{if $xoops_showrblock == 1}>
        <aside class="sidebar-right">
            <{foreach item=block from=$xoops_rblocks}>
                <{include file="theme:theme_blockright.html"}>
            <{/foreach}>
        </aside>
        <{/if}>
    </div>


    <footer class="site-footer">
        <{$xoops_footer}>
    </footer>


    {* Module-specific footers *}
    <{$xoops_module_footer}>
</body>
</html>

theme.ini

Section titled “theme.ini”

فایل پیکربندی تم:

[Theme]
name = "My Theme"
version = "1.0.0"
author = "Your Name"
license = "GPL-2.0"
description = "A modern responsive theme"


[Screenshots]
screenshot = "screenshot.png"


[Options]
responsive = true
bootstrap = false


[Settings]
primary_color = "#3498db"
secondary_color = "#2c3e50"

قالب ها را مسدود کنید

Section titled “قالب ها را مسدود کنید”
{* theme_blockleft.html *}
<section class="block block-left" id="block-<{$block.id}>">
    <{if $block.title}>
        <h3 class="block-title"><{$block.title}></h3>
    <{/if}>
    <div class="block-content">
        <{$block.content}>
    </div>
</section>

متغیرهای قالب

Section titled “متغیرهای قالب”

متغیرهای جهانی

Section titled “متغیرهای جهانی”
متغیرتوضیحات
$xoops_sitenameنام سایت
$xoops_urlآدرس سایت
$xoops_themeنام موضوع فعلی
$xoops_langcodeکد زبان
$xoops_charsetرمزگذاری کاراکتر
$xoops_pagetitleعنوان صفحه
$xoops_dirnameنام ماژول فعلی

متغیرهای کاربر

Section titled “متغیرهای کاربر”
متغیرتوضیحات
$xoops_isuserوارد شده است
$xoops_isadminمدیر است
$xoops_useridشناسه کاربری
$xoops_unameنام کاربری

متغیرهای چیدمان

Section titled “متغیرهای چیدمان”
متغیرتوضیحات
$xoops_showlblockنمایش بلوک های سمت چپ
$xoops_showrblockنمایش بلوک های سمت راست
$xoops_showcblockنمایش بلوک های مرکزی
$xoops_lblocksآرایه بلوک های چپ
$xoops_rblocksآرایه بلوک های راست
$xoops_contentsمحتوای صفحه اصلی

لغو الگوی ماژول

Section titled “لغو الگوی ماژول”

الگوهای ماژول را با قرار دادن آنها در موضوع خود لغو کنید:

themes/mytheme/modules/
└── news/
    ├── news_index.tpl      # Overrides news module's index
    └── news_article.tpl    # Overrides article display

سازمان CSS

Section titled “سازمان CSS”
css/style.css
/* === Variables === */
:root {
    --primary-color: #3498db;
    --text-color: #333;
    --bg-color: #fff;
}


/* === Base === */
body {
    font-family: system-ui, sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
}


/* === Layout === */
.page-container {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}


/* === Components === */
.block {
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}


.block-title {
    margin: 0 0 10px;
    font-size: 1.1em;
}


/* === Responsive === */
@media (max-width: 768px) {
    .page-container {
        grid-template-columns: 1fr;
    }


    .sidebar-left,
    .sidebar-right {
        order: 2;
    }
}

مستندات مرتبط

Section titled “مستندات مرتبط”
  • ../Templates/Smarty-Templating - نحو الگو
  • تم-توسعه - راهنمای تم کامل
  • CSS-Best-Practices - دستورالعمل های یک ظاهر طراحی
  • ../../03-Module-Development/Block-Development - ایجاد بلوک