{template "header.html"}

<style>
.help-wrap { margin: 0 auto; padding: 10px 0 30px; color: #334155; line-height: 1.75; }
.help-section-title { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: #1e293b; }
.help-section-body { font-size: 14px; }
.help-note { margin: 0 0 16px; padding: 12px 16px; background: #f8fafc; border-left: 4px solid #2563eb; color: #475569; }
.help-feature { margin-bottom: 20px; padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.help-feature-title { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #1e293b; }
.help-feature-desc p { margin: 0 0 8px; }
.help-feature-desc p:last-child { margin-bottom: 0; }
.help-feature-desc ul { margin: 8px 0 0; padding-left: 20px; }
.help-feature-desc li { margin-bottom: 6px; }
.help-steps { margin: 0; padding-left: 22px; }
.help-step { margin-bottom: 18px; }
.help-step-title { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: #1e293b; }
.help-step-desc { margin: 0; color: #475569; }
.help-summary { margin-top: 18px; padding: 14px 16px; background: #eff6ff; border-radius: 8px; color: #1e40af; }
.help-code { display: inline-block; margin: 2px 0; padding: 2px 8px; font-family: Consolas, monospace; font-size: 13px; background: #f1f5f9; border-radius: 4px; color: #0f172a; word-break: break-all; }
.help-pre { margin: 8px 0; padding: 12px 14px; font-family: Consolas, monospace; font-size: 13px; background: #0f172a; color: #e2e8f0; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; }
.help-table { width: 100%; margin: 8px 0; border-collapse: collapse; font-size: 13px; }
.help-table th, .help-table td { padding: 8px 10px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.help-table th { background: #f8fafc; font-weight: 600; }
.help-link { color: #2563eb; text-decoration: none; }
.help-link:hover { text-decoration: underline; }
</style>

<div class="portlet light bordered">
    <div class="portlet-title tabbable-line">
        <ul class="nav nav-tabs" style="float:left;">
            <li class="{if $page==0}active{/if}">
                <a href="{dr_url('module/help/template', ['page' => 0])}"><i class="fa fa-folder-open"></i> {dr_lang('目录结构')}</a>
            </li>
            <li class="{if $page==1}active{/if}">
                <a href="{dr_url('module/help/template', ['page' => 1])}"><i class="fa fa-file-code-o"></i> {dr_lang('语法与变量')}</a>
            </li>
            <li class="{if $page==2}active{/if}">
                <a href="{dr_url('module/help/template', ['page' => 2])}"><i class="fa fa-tags"></i> {dr_lang('常用标签')}</a>
            </li>
            <li class="{if $page==3}active{/if}">
                <a href="{dr_url('module/help/template', ['page' => 3])}"><i class="fa fa-wrench"></i> {dr_lang('制作步骤')}</a>
            </li>
        </ul>
    </div>
    <div class="portlet-body">
        <div class="help-wrap">

            {if $page==0}
            <div class="help-section-body">
                <p class="help-note">
                    前台模板存放在 <span class="help-code">{TPLPATH}pc/{SITE_TEMPLATE}/home/</span>，
                    静态资源在 <span class="help-code">static/{SITE_THEME}/</span>（{dr_lang('模板中通过')} <span class="help-code">{code}{HOME_THEME_PATH}{/code}</span> {dr_lang('引用')}）。
                    当前站点模板目录为 <span class="help-code">{SITE_TEMPLATE}</span>，主题风格为 <span class="help-code">{SITE_THEME}</span>，可在 <a class="help-link" href="{dr_url('module/site_config/index')}">网站设置</a> 中修改。
                </p>

                <div class="help-pre">template/
├── pc/
│   └── {SITE_TEMPLATE}/           # 当前 PC 模板目录
│       └── home/
│           ├── index.html       # 网站首页
│           ├── list.html        # 栏目列表页
│           ├── show.html        # 内容详情页
│           ├── category.html    # 栏目封面页
│           ├── page.html        # 单页栏目
│           ├── search.html      # 模块搜索页
│           ├── header.html      # 公共页头
│           ├── footer.html      # 公共页脚
│           ├── 404.html         # 404 页面
│           └── msg.html         # 提示信息页
└── mobile/
    └── {SITE_TEMPLATE}/home/    # 手机端，文件结构与 PC 相同

static/{SITE_THEME}/               # 主题风格静态资源（CSS/JS/图片）
├── pc/css/
├── pc/plugins/
└── swiper/</div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('模板文件说明')}</h3>
                    <div class="help-feature-desc">
                        <table class="help-table">
                            <thead>
                                <tr><th>{dr_lang('文件')}</th><th>{dr_lang('触发场景')}</th><th>{dr_lang('说明')}</th></tr>
                            </thead>
                            <tbody>
                                <tr><td><span class="help-code">index.html</span></td><td>{dr_lang('网站首页')}</td><td>{dr_lang('全站首页，可调用各模块数据块')}</td></tr>
                                <tr><td><span class="help-code">list.html</span></td><td>{dr_lang('列表栏目')}</td><td>{dr_lang('栏目内容分页列表，输出')} {code}{$pages}{/code} {dr_lang('分页')}</td></tr>
                                <tr><td><span class="help-code">show.html</span></td><td>{dr_lang('内容详情')}</td><td>{dr_lang('标题、正文、上下篇、关联内容等')}</td></tr>
                                <tr><td><span class="help-code">category.html</span></td><td>{dr_lang('封面栏目')}</td><td>{dr_lang('展示子栏目及每个子栏目的部分内容')}</td></tr>
                                <tr><td><span class="help-code">page.html</span></td><td>{dr_lang('单页栏目')}</td><td>{dr_lang('输出栏目名称与正文')} {code}{$content}{/code}</td></tr>
                                <tr><td><span class="help-code">search.html</span></td><td>{dr_lang('模块搜索')}</td><td>{dr_lang('搜索表单与结果列表')}</td></tr>
                                <tr><td><span class="help-code">header.html / footer.html</span></td><td>{dr_lang('公共引入')}</td><td>{dr_lang('通过')} {code}{template "header.html"}{/code} {dr_lang('复用')}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('模块独立模板（可选）')}</h3>
                    <div class="help-feature-desc">
                        <p>在 <a class="help-link" href="{dr_url('module/module/index')}">模块管理</a> 中可为单个模块绑定独立风格目录；栏目编辑页也可单独指定 list/show/page 等模板文件名。</p>
                        <p>优先级：内容自定义模板 &gt; 栏目模板设置 &gt; 模块风格 &gt; 站点默认风格。</p>
                    </div>
                </div>
            </div>
            {/if}

            {if $page==1}
            <div class="help-section-body">
                <p class="help-note">迅睿模板语法由花括号标签与 PHP 混合组成，循环体内当前行数据通常用 <span class="help-code">$t</span> 表示。</p>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('引入子模板')}</h3>
                    <div class="help-feature-desc">
                        <pre class="help-pre">{code}{template "header.html"}
{template "footer.html"}{/code}</pre>
                        <p>{dr_lang('引入同目录下的页头、页脚；也可引入子路径模板，如')} {code}{template "index_data.html"}{/code}。</p>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('SEO 与页面变量')}</h3>
                    <div class="help-feature-desc">
                        <table class="help-table">
                            <thead>
                                <tr><th>{dr_lang('变量')}</th><th>{dr_lang('说明')}</th></tr>
                            </thead>
                            <tbody>
                                <tr><td><span class="help-code">{code}{$meta_title}{/code}</span></td><td>{dr_lang('页面标题')}</td></tr>
                                <tr><td><span class="help-code">{code}{$meta_keywords}{/code}</span></td><td>{dr_lang('页面关键词')}</td></tr>
                                <tr><td><span class="help-code">{code}{$meta_description}{/code}</span></td><td>{dr_lang('页面描述')}</td></tr>
                                <tr><td><span class="help-code">{code}{$indexc}{/code}</span></td><td>{dr_lang('首页标记（仅首页为 1）')}</td></tr>
                                <tr><td><span class="help-code">{code}{$catid}{/code}</span></td><td>{dr_lang('当前栏目 ID')}</td></tr>
                                <tr><td><span class="help-code">{code}{$cat.name}{/code}</span> / <span class="help-code">{code}{$cat.url}{/code}</span></td><td>{dr_lang('当前栏目名称与链接')}</td></tr>
                                <tr><td><span class="help-code">{code}{$title}{/code}</span> / <span class="help-code">{code}{$content}{/code}</span></td><td>{dr_lang('详情页标题与正文')}</td></tr>
                                <tr><td><span class="help-code">{code}{$updatetime}{/code}</span></td><td>{dr_lang('更新时间（已格式化）')}</td></tr>
                                <tr><td><span class="help-code">{code}{$pages}{/code}</span></td><td>{dr_lang('列表分页 HTML')}</td></tr>
                                <tr><td><span class="help-code">{code}{MOD_DIR}{/code}</span></td><td>{dr_lang('当前模块目录名')}</td></tr>
                                <tr><td><span class="help-code">{code}{SITE_LOGO}{/code}</span></td><td>{dr_lang('站点 LOGO 地址')}</td></tr>
                                <tr><td><span class="help-code">{code}{HOME_THEME_PATH}{/code}</span></td><td>{dr_lang('当前风格静态资源路径')}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('判断与循环')}</h3>
                    <div class="help-feature-desc">
                        <pre class="help-pre">{code}{if $indexc} class="is-active"{/if}

{if $catid && dr_in_array($catid, $t.catids)} class="is-active"{/if}

{/code}</pre>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('站点自定义参数')}</h3>
                    <div class="help-feature-desc">
                        <p>在 <a class="help-link" href="{dr_url('module/site_param/index')}">网站信息</a> 中维护的字段，模板中读取：</p>
                        <pre class="help-pre">{code}{php $mysite=dr_site_value('hdtp');}
{loop $mysite $v}
{dr_get_file($v[1])}
{/loop}{/code}</pre>
                        <p>安装时默认包含 <span class="help-code">hdtp</span>（幻灯片）、<span class="help-code">yqlj</span>（友情链接）等字段。</p>
                    </div>
                </div>
            </div>
            {/if}

            {if $page==2}
            <div class="help-section-body">
                <p class="help-note">{dr_lang('以下为建站系统最常用的前台标签；不熟悉语法时，可优先使用下方标签生成工具，再粘贴到模板中调试。完整文档见')} <a class="help-link" href="https://www.xunruicms.com/doc/" target="_blank" rel="noopener">{dr_lang('官方模板手册')}</a>。</p>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('标签生成工具（推荐）')}</h3>
                    <div class="help-feature-desc">
                        <p>{dr_lang('制作模板时不必手写全部标签，以下两个工具可可视化生成调用代码，复制到模板即可使用。')}</p>
                        <table class="help-table">
                            <thead>
                                <tr><th>{dr_lang('工具')}</th><th>{dr_lang('说明')}</th><th>{dr_lang('入口')}</th></tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Mbdy</strong><br><span class="help-code">{dr_lang('字段标签调用工具')}</span></td>
                                    <td>
                                        {dr_lang('官方应用市场免费插件。支持字段调用、页面标签、循环标签、搜索条件等，可按模块/栏目/字段点选生成代码，适合后台开发时使用。')}
                                        <ul>
                                            <li>{dr_lang('安装：后台「应用插件 → 应用市场」搜索')} <span class="help-code">Mbdy</span> {dr_lang('或「字段标签调用工具」')}</li>
                                            <li>{dr_lang('安装后菜单：应用插件 → 模板调用工具')}</li>
                                        </ul>
                                    </td>
                                    <td>
                                        {if dr_is_app('mbdy')}
                                        <a class="help-link" href="{dr_url('mbdy/home/index')}">{dr_lang('打开 Mbdy')}</a>
                                        {else}
                                        <span>{dr_lang('需先安装插件')}</span>
                                        {/if}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>{dr_lang('在线标签生成器')}</strong></td>
                                    <td>
                                        {dr_lang('迅睿官方在线工具，无需安装插件。可生成常用标签、导航循环、module/category 内容循环、自定义字段调用等代码，适合快速查阅与复制。')}
                                    </td>
                                    <td>
                                        <a class="help-link" href="https://www.xunruicms.com/doc/code/" target="_blank" rel="noopener">{dr_lang('打开在线工具')}</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="help-note" style="margin-top:12px;margin-bottom:0;">{dr_lang('提示：在线工具部分「自定义字段调用」功能需后台安装《字段标签生成工具》插件后配合使用，详见')} <a class="help-link" href="https://www.xunruicms.com/doc/code/" target="_blank" rel="noopener">xunruicms.com/doc/code</a>。</p>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('内容列表')} {code}{module}{/code}</h3>
                    <div class="help-feature-desc">
                        <pre class="help-pre">{code}{module module=news num=6 order=updatetime}
{$t.url} {$t.title}
{/module}

{module catid=$catid order=updatetime page=1}
{$t.url} {$t.title}
{/module}
{$pages}{/code}</pre>
                        <ul>
                            <li><span class="help-code">module</span> — {dr_lang('模块目录，如 news、product')}</li>
                            <li><span class="help-code">catid</span> — {dr_lang('栏目 ID，支持逗号多栏目')}</li>
                            <li><span class="help-code">num</span> — {dr_lang('条数；列表页用 page=1 开启分页')}</li>
                            <li><span class="help-code">order</span> — {dr_lang('排序：updatetime、hits、displayorder 等')}</li>
                            <li><span class="help-code">flag</span> — {dr_lang('推荐位编号')}</li>
                            <li>{dr_lang('常用字段')}：<span class="help-code">$t.title</span>、<span class="help-code">$t.url</span>、<span class="help-code">$t.thumb</span>、<span class="help-code">$t.description</span>、<span class="help-code">$t.hits</span></li>
                        </ul>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('栏目导航')} {code}{category}{/code}</h3>
                    <div class="help-feature-desc">
                        <pre class="help-pre">{code}{category module=share pid=0}
{$t.url} {$t.title}
{/category}

{category module=share pid=$t.id return=t2}
{$t.url} {$t.title}
{/category}{/code}</pre>
                        <ul>
                            <li><span class="help-code">module=share</span> — {dr_lang('共享栏目树')}</li>
                            <li><span class="help-code">pid=0</span> — {dr_lang('一级栏目；pid=$catid 取子栏目')}</li>
                            <li><span class="help-code">return=t2</span> — {dr_lang('自定义循环变量名，避免嵌套冲突')}</li>
                        </ul>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('关联内容')} {code}{related}{/code}</h3>
                    <div class="help-feature-desc">
                        <pre class="help-pre">{code}{related module=MOD_DIR tag=$tag num=6}
{$t.url} {$t.title}
{/related}{/code}</pre>
                        <p>{dr_lang('按 Tag 或关键词关联推荐，常用于详情页底部「相关内容」。')}</p>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('常用函数')}</h3>
                    <div class="help-feature-desc">
                        <table class="help-table">
                            <thead>
                                <tr><th>{dr_lang('函数')}</th><th>{dr_lang('说明')}</th></tr>
                            </thead>
                            <tbody>
                                <tr><td><span class="help-code">dr_catpos($catid, ...)</span></td><td>{dr_lang('面包屑导航')}</td></tr>
                                <tr><td><span class="help-code">dr_module_url($dir)</span></td><td>{dr_lang('模块首页地址')}</td></tr>
                                <tr><td><span class="help-code">dr_thumb($thumb)</span></td><td>{dr_lang('缩略图地址')}</td></tr>
                                <tr><td><span class="help-code">dr_get_file($id)</span></td><td>{dr_lang('附件/图片完整 URL')}</td></tr>
                                <tr><td><span class="help-code">dr_show_hits($id)</span></td><td>{dr_lang('详情页浏览量（自动计数）')}</td></tr>
                                <tr><td><span class="help-code">dr_strcut($str, $len)</span></td><td>{dr_lang('字符串截断')}</td></tr>
                                <tr><td><span class="help-code">dr_site_value('字段名')</span></td><td>{dr_lang('读取网站信息自定义字段')}</td></tr>
                                <tr><td><span class="help-code">dr_get_content_kws($keywords)</span></td><td>{dr_lang('关键词转 Tag 链接数组')}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="help-feature">
                    <h3 class="help-feature-title">{dr_lang('静态资源引用')}</h3>
                    <div class="help-feature-desc">
                        <pre class="help-pre">&lt;link href="&#123;HOME_THEME_PATH&#125;pc/css/style.bundle.css" rel="stylesheet" /&gt;
&lt;script src="&#123;HOME_THEME_PATH&#125;swiper/js/swiper.min.js"&gt;&lt;/script&gt;
&lt;link href="&#123;THEME_PATH&#125;assets/icon/css/icon.css" rel="stylesheet" /&gt;</pre>
                        <p><span class="help-code">{code}{HOME_THEME_PATH}{/code}</span> {dr_lang('指当前风格目录下的 static 资源；')}<span class="help-code">{code}{THEME_PATH}{/code}</span> {dr_lang('指系统后台公共资源。')}</p>
                    </div>
                </div>
            </div>
            {/if}

            {if $page==3}
            <div class="help-section-body">
                <p class="help-note">{dr_lang('推荐复制当前')} <span class="help-code">{SITE_TEMPLATE}</span> {dr_lang('模板再修改，可最大程度保证页面类型完整、标签调用正确。')}</p>

                <ol class="help-steps">
                    <li class="help-step">
                        <span class="help-step-title">{dr_lang('第一步：复制模板目录')}</span>
                        <p class="help-step-desc">
                            将 <span class="help-code">template/pc/{SITE_TEMPLATE}/</span> 复制为新目录（如 <span class="help-code">mytpl</span>）；
                            手机端同步复制 <span class="help-code">template/mobile/{SITE_TEMPLATE}/</span> → <span class="help-code">template/mobile/mytpl/</span>。
                        </p>
                    </li>
                    <li class="help-step">
                        <span class="help-step-title">{dr_lang('第二步：复制静态资源')}</span>
                        <p class="help-step-desc">
                            将 <span class="help-code">static/{SITE_THEME}/</span> 复制为 <span class="help-code">static/mytpl/</span>，
                            修改模板中的样式、图片路径均相对于 <span class="help-code">{code}{HOME_THEME_PATH}{/code}</span>。
                        </p>
                    </li>
                    <li class="help-step">
                        <span class="help-step-title">{dr_lang('第三步：修改模板文件')}</span>
                        <p class="help-step-desc">
                            至少保留 <span class="help-code">index.html</span>、<span class="help-code">list.html</span>、
                            <span class="help-code">show.html</span>、<span class="help-code">header.html</span>、<span class="help-code">footer.html</span>；
                            按需调整 HTML 结构与 <span class="help-code">{code}{module}{/code}</span>、<span class="help-code">{code}{category}{/code}</span> {dr_lang('标签调用')}。
                        </p>
                    </li>
                    <li class="help-step">
                        <span class="help-step-title">{dr_lang('第四步：后台启用')}</span>
                        <p class="help-step-desc">
                            进入 <a class="help-link" href="{dr_url('module/site_config/index')}">网站设置</a>，
                            将「模板目录」改为 <span class="help-code">mytpl</span>，「主题风格」改为 <span class="help-code">mytpl</span> 并保存；
                            <a class="help-link" href="{dr_url('module/site_mobile/index')}">手机设置</a> 中同步选择对应风格。
                        </p>
                    </li>
                    <li class="help-step">
                        <span class="help-step-title">{dr_lang('第五步：验证前台')}</span>
                        <p class="help-step-desc">
                            依次访问首页、栏目列表、内容详情、搜索页，确认布局与数据正常；
                            修改模板后刷新浏览器即可，无需更新系统缓存（URL/栏目结构变更除外）。
                        </p>
                    </li>
                    <li class="help-step">
                        <span class="help-step-title">{dr_lang('第六步：模块/栏目定制（可选）')}</span>
                        <p class="help-step-desc">
                            某模块需独立风格时，在 <a class="help-link" href="{dr_url('module/module/index')}">模块管理</a> 设置模块主题风格；
                            某栏目需特殊列表/详情页时，在栏目编辑的「模板设置」中指定模板文件名。
                        </p>
                    </li>
                </ol>

                <div class="help-feature" style="margin-top:20px;">
                    <h3 class="help-feature-title">{dr_lang('常见问题')}</h3>
                    <div class="help-feature-desc">
                        <ul>
                            <li><strong>{dr_lang('修改后无变化')}</strong>：{dr_lang('确认模板目录（SITE_TEMPLATE）与主题风格（SITE_THEME）正确；清除浏览器缓存；若开启静态化需重新生成')}</li>
                            <li><strong>{dr_lang('样式丢失')}</strong>：{dr_lang('检查 static/')}<span class="help-code">{SITE_THEME}</span>{dr_lang('/ 是否存在；模板中')} {code}{HOME_THEME_PATH}{/code} {dr_lang('路径是否正确')}</li>
                            <li><strong>{dr_lang('列表无数据')}</strong>：{dr_lang('检查')} {code}{module}{/code} {dr_lang('的 module/catid 参数；确认栏目已绑定对应模块且有内容')}</li>
                            <li><strong>{dr_lang('导航不显示')}</strong>：{dr_lang('共享栏目需 module=share；检查栏目「是否显示」开关')}</li>
                        </ul>
                    </div>
                </div>

                <div class="help-summary">
                    <strong>{dr_lang('参考')}：</strong>
                    {dr_lang('当前站点模板位于')} <span class="help-code">{TPLPATH}pc/{SITE_TEMPLATE}/home/</span>，
                    {dr_lang('可直接打开 index.html、list.html、show.html 对照学习。')}
                </div>
            </div>
            {/if}

        </div>
    </div>
</div>

{template "footer.html"}
