Xiuno BBS 开发实践教程 - 主题 - The Hard Way第二版

2026-08-13 08:57

# 《Xiuno BBS 开发实践教程 - 主题 - The Hard Way》第二版 > 本文使用了人工智能辅助编写。 ## 引言 **特别注意**：本章节将会涉及越来越多的具体代码，建议腾出至少一小时时间阅读。考虑到本教程读者的学历与前后端技能水平，在此我**高度建议手中常备AI助手**来为你讲解相关概念。本文要求你已经看过我之前写的Xiuno BBS开发实践教程文章。你还有可能需要粗略阅读Xiuno BBS源代码来搞懂一些概念，以及你可以使用的变量与函数。 *** 还记得2009年的时候，我还是个萝莉。那时候互联网还没有现在这么发达，找到一款好用的软件就像在深山老林里发现宝藏一样令人兴奋。我当时就想，如果能有一个地方，把那些‘藏在山洞里’的优秀软件分享出来，那该多好！于是，我萌生了一个点子——**“软件山洞” SoftCave**。它不仅是一个介绍软件的地方，更是一个可以让志同道合的人交流心得、分享经验的社区。多年后，当我接触到Xiuno BBS时，我发现这个平台非常适合实现当年的那个点子。今天，我想邀请你一起完成这个项目——创建一个名为‘软件山洞’的主题，让它成为我们梦想中的软件分享社区。 ### 回顾：自定义主题的基本思路 - 创建新的主题文件夹：在xiunobbs/view/目录下创建一个新的文件夹，例如`my_custom_theme`。 - 覆盖默认模板文件：将需要修改的模板文件从默认主题复制到新创建的主题文件夹中，并进行相应的修改。 - 添加自定义CSS：通过自定义CSS文件覆盖或扩展默认样式。 ## 一、引入新概念：了解Xiuno BBS是怎么输出HTML页面的当我们查看`route`文件夹里的php文件的时候，我们经常能看到`include`的踪迹。例如我们打开`forum.php`： ```php include _include(APP_PATH.'view/htm/forum.htm'); ``` 这个代码就会引入属于论坛板块的“forum.htm”文件。虽然后缀名是“htm”，但实际上应看作是PHP文件。 ### 那为什么不直接include对应文件，而是要再包装成\_include函数？因为Overwrite机制的存在。 Xiuno BBS的特点就是Hook机制和Overwrite机制。我们在之前的教程里提到了Hook机制（Hook机制就是插入自己的代码，合并后运行），那么我们…… ## 引入新概念：Overwrite机制这个比较好理解，一句话概括就是：“你用你的文件**覆盖现有的文件**来达到**替代源文件功能**的目的。” 而这个机制的核心是`_include`函数。 ### `_include()` 函数解析这段代码可以在`model/plugin.func.php`中找到，我添加了详细的注释便于理解。 ```php $g_include_slot_kv = array(); // 全局变量，用于存储模板中的slot键值对 /** * 用于包含指定路径下的模板文件，并对其进行必要的预处理。 * * @param string $srcfile 源文件路径 * @return string 返回编译后的临时文件路径 */ function _include($srcfile) { global $conf; // 合并插件，存入 tmp_path $len = strlen(APP_PATH); // 获取应用根目录的长度 $tmpfile = $conf['tmp_path'].substr(str_replace('/', '_', $srcfile), $len); // 将源文件路径转换为临时文件路径 if(!is_file($tmpfile) || DEBUG > 1) { // 如果临时文件不存在或处于调试模式，则需要重新编译 // 开始编译 $s = plugin_compile_srcfile($srcfile); // 【重点】编译源文件，合并插件内容 // 支持 <template> <slot> $g_include_slot_kv = array(); // 初始化全局变量 for($i = 0; $i < 10; $i++) { // 最多支持10层嵌套 $s = preg_replace_callback('#<template\sinclude="(.*?)">(.*?)</template>#is', '_include_callback_1', $s); // 使用正则表达式替换 <template> 标签 if(strpos($s, '<template') === FALSE) break; // 如果没有更多的 <template> 标签，跳出循环 } file_put_contents_try($tmpfile, $s); // 将编译后的内容写入临时文件 $s = plugin_compile_srcfile($tmpfile); // 再次编译临时文件 file_put_contents_try($tmpfile, $s); // 更新临时文件内容 } return $tmpfile; // 返回临时文件路径，用于真实include关键字所用 } /** * 【重点】找到具有最高权重的覆盖文件。 * * @param string $srcfile 源文件路径 * @return string 返回覆盖文件路径 */ function plugin_find_overwrite($srcfile) { $plugin_paths = plugin_paths_enabled(); // 获取所有启用的插件路径 $len = strlen(APP_PATH); // 获取应用根目录的长度 $returnfile = $srcfile; // 默认返回原文件 $maxrank = 0; // 初始化最大权重为0 foreach($plugin_paths as $path=>$pconf) { // 遍历所有插件路径 $dir = file_name($path); // 获取插件目录名称 $filepath_half = substr($srcfile, $len); // 获取文件路径后半部分 $overwrite_file = APP_PATH."plugin/$dir/overwrite/$filepath_half"; // 构建覆盖文件路径 if(is_file($overwrite_file)) { // 如果覆盖文件存在 $rank = isset($pconf['overwrites_rank'][$filepath_half]) ? $pconf['overwrites_rank'][$filepath_half] : 0; // 获取覆盖文件权重 if($rank >= $maxrank) { // 如果当前覆盖文件的权重更高 $returnfile = $overwrite_file; // 更新返回文件路径 $maxrank = $rank; // 更新最大权重 } } } return $returnfile; // 返回最终的覆盖文件路径 } /** * 【重点】编译源文件，主要是为了合并插件内容。 * * @param string $srcfile 源文件路径 * @return string 编译后的内容 */ function plugin_compile_srcfile($srcfile) { global $conf; // 判断是否开启插件 if(!empty($conf['disabled_plugin'])) { $s = file_get_contents($srcfile); // 如果禁用了插件，则直接返回原始内容 return $s; } // 如果有 overwrite，则用 overwrite 替换掉 $srcfile = plugin_find_overwrite($srcfile); // 【重点】查找是否存在覆盖文件 $s = file_get_contents($srcfile); // 读取源文件内容 // 最多支持 10 层 Hook 处理 for($i = 0; $i < 10; $i++) { if(strpos($s, '#', '// hook \\1', $s); // 将 HTML 注释格式的 Hook 转换为 PHP 注释格式 $s = preg_replace_callback('#//\s*hook\s+(\S+)#is', 'plugin_compile_srcfile_callback', $s); // 使用回调函数处理 Hook } else { break; // 如果没有更多的 Hook，跳出循环 } } return $s; // 返回编译后的内容 } /** * 用于处理 <template> 标签内的 <slot> 标签 * * 如果你使用过vue的话，可能会对这个概念不陌生 * * @param array $m 正则匹配结果数组 * @return string 替换后的字符串 */ function _include_callback_1($m) { global $g_include_slot_kv; $r = file_get_contents($m[1]); // 读取 <template include="..."> 中指定的文件内容 preg_match_all('#<slot\sname="(.*?)">(.*?)</slot>#is', $m[2], $m2); // 查找所有的 <slot name="..."> 标签 if(!empty($m2[1])) { // 如果有 slot 标签 $kv = array_combine($m2[1], $m2[2]); // 将 slot 名称和内容组合成键值对 $g_include_slot_kv += $kv; // 将新的键值对添加到全局变量中 foreach($g_include_slot_kv as $slot=>$content) { // 遍历所有 slot 键值对 $r = preg_replace('#<slot\sname="'.$slot.'"\s*/>#is', $content, $r); // 使用实际的内容替换对应的 slot 标签 } } return $r; // 返回替换后的内容 } ``` 这也是Xiuno BBS插件系统的基石。 ### 实例例如有以下插件目录结构： - my\_plugin/ - conf.json - overwrite/ - view/ - htm/ - forum.htm 那么，当用户访问`forum-1.htm`时，会大致上发生这些事情： - 从`index.php`出发 - 引入`include _include(APP_PATH . 'index.inc.php');` - （*路由处理*）在`switch ($route)`里找到了`case 'forum'` - 引入`include _include(APP_PATH.'route/forum.php');` - （*页面逻辑*）经过一系列处理（如判断权限、获取数据等）后，引入`include _include(APP_PATH.'view/htm/forum.htm');` - 经过一系列处理后，实际上引入了`tmp/view_htm_forum.htm` - 而在这个文件里，其实还引入了更多文件（为方便阅读，只保留了文件名，实际上皆通过`include _include()`引入）： - `APP_PATH.'view/htm/header.inc.htm'` - 页眉，它又引入了： - `APP_PATH.'view/htm/header_nav.inc.htm'` - 导航栏 - `APP_PATH.'view/htm/thread_list.inc.htm'` - 帖子列表 - `APP_PATH.'view/htm/thread_list_mod.inc.htm'` - 帖子管理按钮 - `APP_PATH.'view/htm/footer.inc.htm'` - 页脚，它又引入了： - `APP_PATH.'view/htm/footer_nav.inc.htm'` - 页脚“导航栏” 换算成实际的组装顺序大约为： - `APP_PATH.'view/htm/header.inc.htm'`：包含了`<html><head>...</head><body>...`，然后引入： - `APP_PATH.'view/htm/header_nav.inc.htm'`：包含了`<header id="header">...</header>` - 然后继续`APP_PATH.'view/htm/header.inc.htm`的未完部份：`<main id="body"><div class="container">...` - `APP_PATH.'view/htm/forum.htm'`：包含了`<div class="row"><div class="col-lg-9 main">...<div class="card card-threadlist">...<div class="card-body"><ul class="list-unstyled threadlist mb-0">...`，然后引入： - `APP_PATH.'view/htm/thread_list.inc.htm`：包含了`<li class="media thread ">...</li>` - 然后继续`APP_PATH.'view/htm/forum.htm`的未完部份：`</ul></div></div>...` - `APP_PATH.'view/htm/thread_list_mod.inc.htm`：包含了`<div class="text-center">...<div class="btn-group mod-button">...</div></div>` - 然后继续`APP_PATH.'view/htm/forum.htm`的未完部份：`...</div><div class="aside">...</div></div>` - `APP_PATH.'view/htm/footer.inc.htm`：包含了`...</div></main>...`，然后引入： - `APP_PATH.'view/htm/footer_nav.inc.htm`：包含了`<footer id="footer">...</footer>` - 然后继续`APP_PATH.'view/htm/footer.inc.htm`的未完部份：`...</body></html>` 这样就实现了HTML页面的组装。 ```html  <html> <head>...</head> <body>  <header id="header">...</header>  <main id="body"> <div class="container">   <div class="row"> <div class="col-lg-9 main">...<div class="card card-threadlist">...<div class="card-body"> <ul class="list-unstyled threadlist mb-0">  <li class="media thread ">...</li>  </ul> </div> </div>  <div class="text-center">...<div class="btn-group mod-button">...</div> </div>  </div> <div class="aside">...</div> </div>   </div> </main>  <footer id="footer">...</footer>  </body> </html>  ``` ## 引入新概念：Template与Slot 如果你熟悉Vue.js，那么对`<template>`和`<slot>`的概念不会陌生。 ```html <slot name="custom-slot" /> ``` ```html <template include="path/to/template.htm"> <slot name="custom-slot">自定义内容</slot> </template> ``` 但是在这里有以下重要区别： - template和slot只是**模拟出来的功能**，这两个标签本身不会输出到HTML里面。 - template里的include属性值是**相对于`APP_PATH`常量的“绝对路径”**，不会自动跟着`_include`函数判断的状态改变。 ### 用途和用法这个机制只在用户相关页面使用了，包括： - **`my.common.template.htm`** - `my.htm` - `my.template.htm` - `my_avatar.htm` - `my_password.htm` - `my_thread.htm` - `my_thread.template.htm` - **`user.common.template.htm`** - `user.htm` - `user.template.htm` - `user_thread.htm` - `user_thread.template.htm` 其中： - `my.common.template.htm` - `user.common.template.htm` 是顶层页面，在这里引入了header和footer文件，而页面内容则使用了自闭合的slot标签表示。 *** - `my.template.htm` - `my_thread.template.htm` - `user.template.htm` - `user_thread.template.htm` 是用户导航二级菜单组件，它对应的slot name是`my_nav`或`user_nav` > 用户导航一级菜单对应Hook为： > > - my\_common\_my\_before.htm > - my\_common\_my\_after.htm > - my\_common\_my\_thread\_before.htm > - my\_common\_my\_thread\_after.htm > - user\_common\_user\_before.htm > - user\_common\_user\_after.htm > - user\_common\_thread\_before.htm > - user\_common\_thread\_after.htm *** - `my.htm` - `my_avatar.htm` - `my_password.htm` - `my_thread.htm` - `user.htm` - `user_thread.htm` 是具体页面内容组件，它对应的slot name是`my_body`或`user_body` *** **具体结构**，简化来说是这样的： ```html <div class="row">  <div class="col-lg-2" id="user_aside"> <div class="card"> <div class="card-body"> 用户名 </div> <div id="user_nav"> <a href="user-1.htm">个人资料</a> <a href="user-thread-1.htm">论坛帖子</a> </div> </div> </div>  <div class="col-lg-10" id="user_main"> <div class="card"> <div class="card-header">  <slot name="user_nav" /> </div> <div class="card-body">  <slot name="user_body" /> </div> </div> </div> </div> ``` 当用户访问user.htm的时候，会大致上发生这些事情： - 从`index.php`出发 - 引入`include _include(APP_PATH . 'index.inc.php');` - （*路由处理*）在`switch ($route)`里找到了`case 'user'` - 引入`include _include(APP_PATH.'route/user.php');` - （*页面逻辑*）经过一系列处理（如判断权限、获取数据等）后，引入`include _include(APP_PATH.'view/htm/user.htm');` - 经过一系列处理后，实际上引入了`tmp/view_htm_user.htm` - 在该文件中的`template`标签的`include`属性中指定引入`./view/htm/user.template.htm`，并将该文件中的`slot name="user_body"`内容暂存下来 - （*`user.template.htm`*）而在该文件的`template`标签的`include`属性中指定引入`./view/htm/user.common.template.htm`（继续引入更高层级的模板），并将该文件中的`slot name="user_nav"`内容暂存下来 - （*`user.common.template.htm`*）而在该文件里找到了两个自闭合的slot`<slot name="user_nav" />`、`<slot name="user_body" />`，继而将刚才暂存的具体HTML内容替换到对应slot位置中，组装成完整的页面。 - （*`user.common.template.htm`*）同时，在这个文件里，其实还引入了更多文件（为方便阅读，只保留了文件名，实际上皆通过`include _include()`引入）： - `APP_PATH.'view/htm/header.inc.htm'` - 页眉，它又引入了： - `APP_PATH.'view/htm/header_nav.inc.htm'` - 导航栏 - `APP_PATH.'view/htm/footer.inc.htm'` - 页脚，它又引入了： - `APP_PATH.'view/htm/footer_nav.inc.htm'` - 页脚“导航栏” 继而组装成类似这样的页面： ```html  <html> <head> ... </head> <body>  <header id="header"> <nav>导航栏内容</nav> </header>  <main id="body"> <div class="container">   <div class="row">  <div class="col-lg-2" id="user_aside"> <div class="card"> <div class="card-body text-center"> 用户名 </div> <div class="list-group" id="user_nav"> <a href="user-1.htm" class="list-group-item">个人资料</a> <a href="user-thread-1.htm" class="list-group-item">论坛帖子</a> </div> </div> </div>  <div class="col-lg-10" id="user_main"> <div class="card"> <div class="card-header">  <slot name="user_nav"></slot> </div> <div class="card-body">  <slot name="user_body"></slot> </div> </div> </div> </div>   </div> </main>  <footer id="footer"> <nav>页脚导航栏内容</nav> </footer>  </body> </html>  ``` > 可能有点绕，所以建议慢慢看，如果感觉到头晕的话，请务必休息。 ### 完整的视图层图示为： ```mermaid graph LR browser_htm["browser.htm"] footer_inc_htm["footer.inc.htm"] footer_nav_inc_htm["footer_nav.inc.htm"] forum_htm["forum.htm"] header_inc_htm["header.inc.htm"] header_nav_inc_htm["header_nav.inc.htm"] index_htm["index.htm"] message_htm["message.htm"] mod_close_htm["mod_close.htm"] mod_delete_htm["mod_delete.htm"] mod_move_htm["mod_move.htm"] mod_top_htm["mod_top.htm"] subgraph "my_common_template_htm" ["my.common.template.htm"] slot_my_nav["slot my_nav"] slot_my_body["slot my_body"] end my_htm["my.htm"] my_template_htm["my.template.htm"] my_avatar_htm["my_avatar.htm"] my_password_htm["my_password.htm"] my_thread_htm["my_thread.htm"] my_thread_template_htm["my_thread.template.htm"] post_htm["post.htm"] post_list_inc_htm["post_list.inc.htm"] thread_htm["thread.htm"] thread_list_inc_htm["thread_list.inc.htm"] thread_list_mod_inc_htm["thread_list_mod.inc.htm"] subgraph "user_common_template_htm" ["user.common.template.htm"] slot_user_nav["slot user_nav"] slot_user_body["slot user_body"] end user_htm["user.htm"] user_template_htm["user.template.htm"] user_create_htm["user_create.htm"] user_login_htm["user_login.htm"] user_resetpw_htm["user_resetpw.htm"] user_resetpw_complete_htm["user_resetpw_complete.htm"] user_thread_htm["user_thread.htm"] user_thread_template_htm["user_thread.template.htm"] subgraph S_note[特殊说明] note_browser["browser.htm：当用户使用不兼容的旧版浏览器时，系统自动跳转至此页。"] end start["起点"] start --> forum_htm start --> index_htm start --> message_htm start --> mod_close_htm start --> mod_delete_htm start --> mod_move_htm start --> mod_top_htm start --> my_htm start --> my_avatar_htm start --> my_password_htm start --> my_thread_htm start --> post_htm start --> thread_htm start --> user_htm start --> user_thread_htm start --> user_login_htm start --> user_create_htm start --> user_resetpw_htm start --> user_resetpw_complete_htm start --> browser_htm --> note_browser header_inc_htm -- _include --> header_nav_inc_htm footer_inc_htm -- _include --> footer_nav_inc_htm forum_htm -- _include --> header_inc_htm forum_htm -- _include --> thread_list_inc_htm forum_htm -- _include --> thread_list_mod_inc_htm forum_htm -- _include --> footer_inc_htm index_htm -- _include --> header_inc_htm index_htm -- _include --> thread_list_inc_htm index_htm -- _include --> thread_list_mod_inc_htm index_htm -- _include --> footer_inc_htm message_htm -- _include --> header_inc_htm message_htm -- _include --> footer_inc_htm mod_close_htm -- _include --> header_inc_htm mod_close_htm -- _include --> footer_inc_htm mod_delete_htm -- _include --> header_inc_htm mod_delete_htm -- _include --> footer_inc_htm mod_move_htm -- _include --> header_inc_htm mod_move_htm -- _include --> footer_inc_htm mod_top_htm -- _include --> header_inc_htm mod_top_htm -- _include --> footer_inc_htm my_common_template_htm -- _include --> header_inc_htm my_common_template_htm -- _include --> footer_inc_htm my_htm -- template include --> my_template_htm my_htm -- with slot my_body --> my_template_htm my_htm -- content will goes to --> slot_my_body my_template_htm -- template include --> my_common_template_htm my_template_htm -- with slot my_nav --> my_common_template_htm my_template_htm -- with inherited slot my_body --> my_common_template_htm my_template_htm -- content will goes to --> slot_my_nav my_avatar_htm -- template include --> my_template_htm my_avatar_htm -- with slot my_body --> my_template_htm my_avatar_htm -- content will goes to --> slot_my_body my_password_htm -- template include --> my_template_htm my_password_htm -- with slot my_body --> my_template_htm my_password_htm -- content will goes to --> slot_my_body my_thread_template_htm -- template include --> my_common_template_htm my_thread_template_htm -- with slot my_nav --> my_common_template_htm my_thread_template_htm -- with inherited slot my_body --> my_common_template_htm my_thread_template_htm -- content will goes to --> slot_my_nav my_thread_htm -- template include --> my_thread_template_htm my_thread_htm -- with slot my_body --> my_thread_template_htm my_thread_htm -- content will goes to --> slot_my_body post_htm -- _include --> header_inc_htm post_htm -- _include --> footer_inc_htm thread_htm -- _include --> header_inc_htm thread_htm -- _include --> post_list_inc_htm thread_htm -- _include --> thread_list_mod_inc_htm thread_htm -- _include --> footer_inc_htm user_common_template_htm -- _include --> header_inc_htm user_common_template_htm -- _include --> footer_inc_htm user_htm -- template include --> user_template_htm user_htm -- with slot user_body --> user_template_htm user_htm -- content will goes to --> slot_user_body user_template_htm -- template include --> user_common_template_htm user_template_htm -- with slot user_nav --> user_common_template_htm user_template_htm -- with inherited slot user_body --> user_common_template_htm user_template_htm -- content will goes to --> slot_user_nav user_create_htm -- _include --> header_inc_htm user_create_htm -- _include --> footer_inc_htm user_login_htm -- _include --> header_inc_htm user_login_htm -- _include --> footer_inc_htm user_resetpw_htm -- _include --> header_inc_htm user_resetpw_htm -- _include --> footer_inc_htm user_resetpw_complete_htm -- _include --> header_inc_htm user_resetpw_complete_htm -- _include --> footer_inc_htm user_thread_template_htm -- template include --> user_common_template_htm user_thread_template_htm -- with slot user_nav --> user_common_template_htm user_thread_template_htm -- with inherited slot user_body --> user_common_template_htm user_thread_template_htm -- content will goes to --> slot_user_nav user_thread_htm -- template include --> user_thread_template_htm user_thread_htm -- with slot user_body --> user_thread_template_htm user_thread_htm -- content will goes to --> slot_user_body ``` ## 二、在创建主题之前需要知道的限制虽然你确实可以使用任何前端技术和CSS框架制造出任何你想要的外观，但请务必注意以下几点： ### 所有插件都是基于原装主题设计的原装主题的技术栈是Bootstrap 4+JQuery 3，这意味着： ### 插件极有可能使用Bootstrap的类来实现视觉效果例如`card, btn-primary, list-froup, nav-tabs`等等。如果你要实现自己的外观，务必别忘了兼容bootstrap，或直接从Bootstrap起步。 > 可以考虑使用Tailwind CSS，加[Daisy UI](https://daisyui.com/)，然后再增补一些Bootstrap专属的样式来实现兼容性。 ### 插件一定会使用Bootstrap的组件例如`Modal`和`Tooltip`等。甚至仅仅是从Bootstrap 4升级到Bootstrap 5——因为Bootstrap 5将自定义属性从类似“`data-toggle="modal"`”改成了“`data-bs-toggle="modal"`”就足够让很多插件无法正常显示Modal框。更有甚者，可能会用自己实现的模态框函数去模拟Bootstrap的Modal组件，例如： ```js // 来自兔兔积分插件 $.tt_confirm = function(subject, ok_callback, options,btn_title) { var options = options || {size: "md"}; options.body = options.body || ''; var title = "积分"; var subject = options.body ? '' : '<p>'+subject+'</p>'; var s = '\ <div class="modal fade" tabindex="-1" role="dialog">\ <div class="modal-dialog modal-'+options.size+'">\ <div class="modal-content">\ <div class="modal-header">\ <h5 class="modal-title">'+title+'</h5><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></button>\ </div>\ <div class="modal-body">\ '+subject+'\ '+options.body+'\ </div>\ <div class="modal-footer">\ <button type="button" class="btn btn-primary">'+btn_title+'</button>\ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">'+lang.close+'</button>\ </div>\ </div>\ </div>\ </div>'; var jmodal = $(s).appendTo('body'); jmodal.find('.modal-footer').find('.btn-primary').on('click', function() { jmodal.modal('hide'); if(ok_callback) ok_callback(); }); jmodal.modal('show'); return jmodal; } ``` 这东西看的我很无语： **1. 字符串拼接触目惊心** 一大坨 HTML 用反斜杠续行的字符串拼接，里面变量穿插得跟打地鼠似的。维护这种代码，找个 `</div>` 都能找瞎。哦对了，这里面还有两个连续的 `</button></button>`，能跑起来纯属奇迹。 **2. 变量命名随心所欲** `subject` 参数传进来，结果函数里又定义了个 `subject` 变量覆盖掉，最后还用 `options.body` 来决定要不要显示原本的 `subject`。这种逻辑，三个月后他自己回来看都得愣住。 **3. 完全无视国际化** 标题写死 "积分"，连 `lang` 变量都懒得用。别的弹窗好歹还能用 `lang.close`，标题就硬编码中文，这插件要是拿去给老外用，直接抓瞎。 **4. 回调处理粗暴** `ok_callback` 执行完没有任何错误处理，而且是在 `modal('hide')` 之后同步调用的。万一回调里有异步操作或者报错，用户就只能干瞪眼看着模态框消失后啥也没发生。 **5. 滥用全局 jQuery 对象** 直接往 `$` 上挂 `$.tt_confirm`，也不怕和其他插件冲突。叫 `tt_confirm` 是"兔兔确认框"的意思吧，但这命名跟闹着玩似的，完全没有命名空间的概念。 **6. 最离谱的是——他明明可以直接用 xiuno.js 自带的 `$.confirm`** Xiuno 自己封装好的 `$.confirm` 不用，非要自己造一个漏洞百出的轮子。这不叫开发，这叫行为艺术。 **总结**：这段代码完美诠释了什么叫"能用就行"的开发哲学——能用，但也就仅限于"能用"，稍微碰一下就散架的那种。你看得无语，我看得血压都上来了。 ### xiuno.js依赖bootstrap 诸如`$.ajax_modal(),$.confirm(),$.alert(),$.fn.alert(),$.fn.button()`等是直接与Bootstrap相关组件挂靠，而`$.ajax_modal(),$.confirm(),$.alert()`等直接使用Bootstrap Modal组件时间效果。目前暂时只知道Xiuno BBS本身使用了xiuno.js的大量功能，其他插件使用情况未知。 ### 那使用类似Vue、React这类现代JavaScript框架呢？（含开发独立App）如果选择使用类似 Vue 或 React 这样的现代JavaScript框架（或者使用Flutter这样的跨平台前端开发框架，或者是开发小程序等），开发难度将会是地狱级的，原因如下： #### 一、高度依赖Xiuno BBS的API功能： - 你需要**依赖Xiuno BBS的API**来获取数据并与后台交互。 - [公开注明的API节点](https://www.yuque.com/xiand/xiunobbs/ilckd0)数量不足以满足所有需求 - 可以观察实际页面表单的内容并通过抓包来模仿这些请求（例如登录、注册、发帖、回帖等操作）。 - 安装API插件后，可以通过在URL后面加上 `?ajax=1` 来返回JSON格式内容。 - **仍需编写更多代码来暴露你所需的功能，并确保敏感信息不会被泄露。** #### 二、Xiuno BBS的API本身也能让你诱发高血压，所以我必须先讲清楚你可能会遇到的坑： - API返回的内容中，`code`可能是*int*也可能是*string*，其中： - 如果是*int*，通常来说： - `0`是成功 - `1`通常是用户出错（例如没有权限等） - `-1`通常是服务器出错（例如因为某些原因没能将提交的内容成功写入数据库） - 其他任何值都应该视作用户出错，除非这个错误码是你定义的 - 例如：`{code: 0, message: "登录成功"}` - 但有些插件会选择将1当作成功，0当作失败，所以这会很抓狂的 - 如果是*string*： - 例如`username`的内容应当全部当作是用户出错（例如用户名出错） - 设计目标是让收到的时候将code所指的ID的DOM增加一个tooltip，提示用户出错的原因 - 但是邪门的就来了：有时候，可能是因为PHP版本缘故，会将int转换成string，所以你还得单独写逻辑来处理这种问题 - 例如：`{code: "-1", message: "登录失败"}` - 而`message`**可能会返回任意类型**（主要包括string，int，array，object），**务必注意这一点**（希望你的JSON解析库足够坚挺，不会因为这种问题而坏掉） - 因为有时候即使`code`是0，它也可能会返回你意想不到类型的东西 - 例如回复帖子的节点`post-create.htm`，它可能会返回“发帖成功”也可能返回你刚刚创建好的帖子的JSON表达你必须自己总结API节点的请求方式、参数、enctype（是`application/x-www-form-urlencoded`还是`multipart/form-data`）、返回内容示范，因为Xiuno BBS的作者……一言难尽，仅仅告诉你类似 ``` 发表新主题：/thread-create.htm fid, subject, doctype, message doctype 值参考： install/install.sql ``` 和 ``` 版主管理：参看 route/mod.php ``` 和 ``` 其他请参看代码 route/*.php ``` 这样的十分粗略的介绍，而没有更具体的参数和返回内容示范。（非广告）我个人强烈建议使用Apifox来完成API节点的记录。 > **注意：我没有任何义务替你总结这些API节点，you're on your own.** #### 三、安全隐患： - 例如，某些API节点可能未经过滤，会输出密码和salt等敏感信息（即使密码已经是哈希过的，但仍然是重大安全隐患）。因此，必须仔细检查每个页面的API返回内容，并手动 unset 敏感字段。 - Xiuno BBS为了“将计算量放在用户侧”仅使用了MD5加密，而没有使用更复杂的方式，或没有将整个加密部分放在后端，这可能导致安全性不足。不过，这也符合一些安全要求（例如传输密码时不能明文传输）。 ----- 如果决定使用Vue或React之类的框架，可以考虑使用第三方库（如 [BootstrapVue](https://bootstrap-vue.org/) 或 [React-Bootstrap](https://react-bootstrap.github.io/)）来利用Bootstrap的样式和组件，以保持一定程度的兼容性。我很希望有人能当这个“第一个吃螃蟹的人”。我也很欣慰我已经看到有一些人尝试做App了。 ### 结论十分遗憾的是，除非你有极大毅力将你自己预计使用的插件都转化为适合你自己的“另一套技术栈”风格，否则**最好选择Bootstrap**，只因为这个生态系统与Bootstrap绑定。 ## 三、创建主题我们将会使用知名的“Argon” Bootstrap 主题。该主题与Xiuno BBS一样，采用[MIT License](https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)，很适合本教程所需。 ### 涉及到什么页面 #### 主要我们要对这些页面做大翻新： - `header.inc.htm` - `header_nav.inc.htm` - `footer.inc.htm` - `footer_nav.inc.htm` - `forum.htm` - `index.htm` - `thread.htm` #### 次要然后对这些页面进行微调： - `message.htm` - `my_thread.htm` - `post.htm` - `post_list.inc.htm` - `user-login.htm` - `user-create.htm` - `user_resetpw.htm` - `user_resetpw_complete.htm` - `user_thread.htm` 其余页面不变。 ### 预计目录结构 - my\_theme\_softcave/ - conf.json - overwrite/ - view - htm - header.inc.htm - header\_nav.inc.htm - footer.inc.htm - footer\_nav.inc.htm - forum.htm - index.htm - thread.htm - thread\_list.inc.htm - message.htm - my\_thread.htm - post.htm - post\_list.inc.htm - user\_login.htm - user\_create.htm - user\_resetpw\.htm - user\_resetpw\_complete.htm - user\_thread.htm - view - css - argon-dashboard.css - bbs.css ### 下载所需的静态资源使用电脑浏览器访问 <https://technext.github.io/argon-dashboard/index.html> ，然后直接按ctrl+s保存网页，“保存类型”选中“网页，全部”，然后找一个安全的地方保存。在文件管理器里，找到刚才下载好的文件所在的文件夹，找到名字类似“Argon Dashboard - Free Dashboard for Bootstrap 4 by Creative Tim\_files”的文件夹，打开，其中有一个文件叫“argon-dashboard.css”，复制它到“xiunobbs根目录/plugin/my\_theme\_softcave/view/css/”文件夹里。 ### 文件内容，及可以在对应文件里使用的变量详解现在我将详细介绍 `my_theme_softcave` 主题中的所有模板文件内容，并提供详细的代码和解释。 #### **【一直可用的变量】** - `$conf`：Xiuno BBS配置信息（全部页面） - *详见`conf/conf.php`文件* - `$header`： - `title`：string类型；页面标题，对应`<title>`标签 - `mobile_title`：string类型；页面移动端标题，通常会在导航栏显示 - `mobile_link`：string类型；页面移动端链接，对应导航栏Logo网址，多数时候是主页，偶尔会在帖子页面为板块页面 - `keywords`：string类型；SEO关键字，用半角逗号分隔；如果要使用的话，请务必确保每次都是用`.=`而不是`=`，否则你会覆盖其他插件设置的关键字 - `description`：string类型；SEO描述文字 - `navs`：array类型；本意是导航菜单内容，但在Xiuno BBS里没用到，可能为预留 - `$user`：array类型；当前登录的用户（全部页面），大致包括： - `uid`：int类型；用户ID - `gid`：int类型；用户组ID - `email`：string类型；邮箱；**【禁止对外显示】** - `username`：string类型；用户名，不可以重复；**【禁止对外显示】** - `realname`：string类型；真实姓名；为未来需求预留；**【禁止对外显示】** - `idnumber`：string类型；真实身份证号码；为未来需求预留 - `password`：string类型；密码Hash结果；**【禁止对外显示】** - `password_sms`：string类型；手机发送的 sms 验证码（又叫OTP）；为未来需求预留；**【禁止对外显示】** - `salt`：string类型；密码的盐值；**【禁止对外显示】** - `mobile`：int类型；手机号；为未来需求预留；**【禁止对外显示】** - `qq`：string类型；qq号码；为未来需求预留；**【禁止对外显示】** - `threads`：int类型；发帖数 - `posts`：int类型；回帖数 - `credits`：int类型；积分类型1（经验），与积分插件一起使用 - `golds`：int类型；积分类型2（金币），与积分插件一起使用 - `rmbs`：int类型；积分类型3（人民币），与积分插件一起使用 - `create_ip`：int类型；创建时IP，使用`ip2long`函数保存；**【禁止对外显示】** - `create_date`：int类型；创建时间时间戳；**【禁止对外显示】** - `login_ip`：int类型；登录时IP，使用`ip2long`函数保存；**【禁止对外显示】** - `login_date`：int类型；登录时间时间戳；**【禁止对外显示】** - `logins`：int类型；登录次数；**【禁止对外显示】** - `avatar`：int类型；用户最后更新头像时间时间戳 - `create_ip_fmt`：string类型；创建时IP，使用`long2ip`函数转换后的样子；**【禁止对外显示】** - `create_date_fmt`：string类型；创建时间，人类可读格式；**【禁止对外显示】** - `login_ip_fmt`：string类型；登录时IP，使用`long2ip`函数转换后的样子；**【禁止对外显示】** - `login_date_fmt`：string类型；登录时间，人类可读格式；**【禁止对外显示】** - `groupname`：string类型；用户组名称 - `avatar_url`：string类型，用户头像地址 - `online_status`：int类型；如果用户在线，会是1（*建议转换成bool类型*） - `$uid`：int类型；当前登录的用户ID，0为游客（全部页面） - `$gid`：int类型；当前登录的用户的用户组ID（全部页面） - `$fid`：int类型；当前所在的论坛板块ID（用于板块、帖子详情、编辑帖子页面） - `$tid`：int类型；当前所在的帖子ID（用于帖子详情、编辑帖子页面） - `$pid`：int类型；当前所在的回帖ID（用于编辑回帖页面） - `$route`：string类型；当前所在的路由名称，如“index、forum、user”等（全部页面） - `$forumlist_show`：array类型；可以对外显示的论坛板块数组（全部页面） - *详见header\_nav.inc.htm里的`$_forum`* - `$static_version`：string类型；静态资源版本号（全部页面） ```php // 游客的$user内容 $guest = array ( 'uid' => 0, 'gid' => 0, 'groupname' => lang('guest_group'), 'username' => lang('guest'), 'avatar_url' => 'view/img/avatar.png', 'create_ip_fmt' => '', 'create_date_fmt' => '', 'login_date_fmt' => '', 'email' => '', 'threads' => 0, 'posts' => 0, ); ``` 下文中，除非特殊标注，一律都包括“一直可用的变量”。 #### **主要文件内容** ##### header.inc.htm **【修改内容简介】** 增加了主题自己的CSS文件，改变页面结构，增加“header部分”，实现了响应式设计和美观的页面标题区域。 **【本文件内的变量】** - `$bootstrap_css`：string类型；Bootstrap框架网址 - `$bootstrap_bbs_css`：string类型；论坛专用样式网址 **【代码实现】** ```html <?php $conf = G('conf'); $header = G('header'); $user = G('user'); $uid = G('uid'); $gid = G('gid'); $fid = G('fid'); $tid = G('tid'); $pid = G('pid'); $route = G('route'); $forumlist_show = G('forumlist_show'); $static_version = $conf['static_version']; $hide_breadcrumb = true; ?>  <!DOCTYPE html> <html lang="<?= $conf['lang'];?>"> <head>   <?= defined('BASE_HREF') ? '<base href="'.BASE_HREF.'" />' : '' ;?>   <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1"> <?php if(!empty($header['keywords'])) { ?>  <meta name="keywords" content="<?= strip_tags($header['keywords']);?>" /> <?php } ?>  <meta name="description" content="<?= strip_tags($header['description']);?>" />  <meta name="renderer" content="webkit">  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <title><?= $header['title'];?></title>   <link rel="shortcut icon" href="<?= $conf['view_url'];?>img/favicon.ico" /> <link rel="icon" sizes="32x32" href="<?= $conf['view_url'];?>img/favicon.ico"> <link rel="Bookmark" href="<?= $conf['view_url'];?>img/favicon.ico" />  <?php // 如果 $bootstrap_css 未定义，则使用 conf 配置中的 view_url + 静态版本号 $bootstrap_css = !empty($bootstrap_css) ? $bootstrap_css : $conf['view_url']"css/bootstrap.css".$static_version; ?>  <link rel="stylesheet" href="<?= $bootstrap_css;?>">     <link rel="stylesheet" href="./plugin/my_theme_softcave/view/css/argon-dashboard.css">  <link rel="stylesheet" href="./plugin/my_theme_softcave/view/css/bbs.css">   </head> <body>   <div class="main-content">  <?php include _include(APP_PATH.'view/htm/header_nav.inc.htm');?>  <header class="header bg-gradient-primary pb-8 pt-8 ">  <div class="container">  <div class="header-body text-center text-white"> <?php if(param(0) == 'thread' && isset($thread)): ?>  <div class="card-thread-info">   <h1 class="display-3 text-white break-all">  <?= $thread['subject'];?>  </h1>  <div class="meta mt-3">  <span class="username">  <a href="<?= url('user-' . $thread['uid']);?>" class=" text-white font-weight-bold">  <img class="avatar-2 " src="<?= $thread['user_avatar_url'];?>">  <?= $thread['username'];?> </a> </span> <time class="date ml-2"> <i class="icon-calendar-o"></i>  <?= $thread['create_date_fmt'];?> </time> <span class=" ml-2"><i class="icon-eye"></i>  <?= $thread['views'];?> </span>  </div> </div> <?php elseif($route == 'thread' && $action == 'create' || $route == 'post' && $action == 'update' || $route == 'post' && $action == 'create'): if($route == 'thread' && $action == 'create') { $form_title = lang('thread_create'); } elseif($route == 'post' && $action == 'update') { $form_title = lang('post_update'); } elseif($route == 'post' && $action == 'create') { $form_title = lang('post_create'); } ?>  <h1 class="display-3 text-white"> <?= $form_title ?> </h1> <?php elseif($route == 'index'):?>  <div class="card-site-info">  <div class="mb-3 "> <h1 class="display-3 text-white">  <?= $conf['sitename'];?> </h1> <div class="mt-0 lead line-height-3">  <?= $conf['sitebrief'];?> </div> </div> <?php if($user):?>  <a role="button" class="btn btn-success btn-lg mb-3" href="<?= url('thread-create-'.$fid);?>">+ <?= lang('thread_create_new');?> </a> <?php endif;?>  <div class="p-2 col-12 col-sm-9 col-md-6 col-lg-3 mx-auto "> <table class="w-100"> <tr align="center"> <td> <span class="text-white-50"> <?= lang('threads');?> </span><br> <b> <?= $runtime['threads'];?> </b> </td> <td> <span class="text-white-50"> <?= lang('posts');?> </span><br> <b> <?= $runtime['posts'];?> </b> </td> <td> <span class="text-white-50"> <?= lang('users');?> </span><br> <b> <?= $runtime['users'];?> </b> </td> <?php if($runtime['onlines'] > 0) { ?> <td> <span class="text-white-50"> <?= lang('online');?> </span><br> <b> <?= $runtime['onlines'];?> </b> </td> <?php } ?> </tr> </table> </div>  </div> <?php elseif(param(0) == 'forum'): ?> <div class="card-forum-info container-sm"> <div class="w-auto d-flex flex-column flex-md-row text-md-left align-items-center justify-content-center mx-auto mb-3">  <figure class="mb-2 mb-md-0 mr-0 mr-md-3"> <img class="logo-5 " src="<?= $forum['icon_url'];?>"> </figure> <div class="mb-2 mb-md-0 mr-0 mr-md-3">  <h1 class="text-white"> <?= $forum['name'];?> </h1>   <div class=" line-height-2"> <?= $forum['brief'];?> </div>  <?php if($forum['announcement']) : ?>  <h2 class="mt-3 text-white h3 card-title"><?php echo lang('forum_anouncement');?>：</h2> <div> <?php echo $forum['announcement'];?> </div> <?php endif; ?> <?php if($forum['modlist']) : ?>  <h2 class="mt-3 text-white h3 card-title"><?php echo lang('forum_moderator');?>：</h2> <ul class="list-inline"> <?php foreach ($forum['modlist'] as $mod) : ?> <li class="list-inline-item"> <a href="<?= url('user-' . $mod['uid']);?>" class="text-white"> <img src="<?php echo $conf['view_url'];?>img/avatar.png" alt="<?php echo $mod['username'];?>" width="32" height="32" class="avatar-1"> <?php echo $mod['username'];?> </a> </li> <?php endforeach; ?> </ul> <?php endif; ?> </div> <?php if($user):?>  <a role="button" class="btn btn-success" href="<?= url('thread-create-'.$fid);?>">+ <?= lang('thread_create_new');?> </a> <?php endif;?> </div> <div class="p-2 col-12 col-sm-9 col-md-6 col-lg-3 mx-auto "> <table class="w-100"> <tr align="center"> <td> <span class="text-white-50"> <?= lang('threads');?> </span><br> <b> <?= $forum['threads'];?> </b> </td> <td> <span class="text-white-50"> <?= lang('today_posts');?> </span><br> <b> <?= $forum['todayposts'];?> </b> </td> <td> <span class="text-white-50"> <?= lang('today_threads');?> </span><br> <b> <?= $forum['todaythreads'];?> </b> </td>  </tr> </table> </div> </div> <?php else: ?> <h1 class="display-3 text-white"> <?php echo( empty($header['mobile_title']) ? $header['title'] : $header['mobile_title'] );?> </h1> <?php endif; ?> </div> </div> </header>  <main class="container wider">   ``` **【代码解释】** 1. **变量初始化**：首先获取所有必要的全局变量，如配置信息、用户信息、路由信息等。 2. **HTML头部**：设置了字符编码、视口、SEO元标签等基本HTML头部信息。 3. **CSS引入**：引入了Bootstrap CSS、Argon Dashboard主题样式和自定义论坛样式。 4. **页面结构**： - 使用`<div class="main-content">`作为整个网站的容器 - 包含导航菜单（通过`include _include(APP_PATH.'view/htm/header_nav.inc.htm');`引入） - 新增了一个美观的页面标题区域`<header class="header bg-gradient-primary">` 5. **动态标题区域**：根据不同页面类型显示不同的标题内容： - 帖子页面：显示帖子标题、作者信息、发布日期和查看量 - 发帖/编辑页面：显示表单标题 - 主页：显示网站名称、简介、发帖按钮和网站统计信息 - 论坛板块页面：显示板块名称、简介、公告、版主列表和板块统计信息 - 其他页面：显示默认标题 6. **响应式设计**：使用了Bootstrap的响应式类（如`container`、`col-12`、`col-md-6`等）确保页面在不同设备上都能正常显示。 7. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### header\_nav.inc.htm **【修改内容简介】** 重新设计了导航栏内容，实现了响应式导航菜单，包括移动端和桌面端的不同显示效果，以及用户登录状态的不同显示。 **【本文件内的变量】** - `$_forum`：array类型；单个论坛板块： - `fid`：int类型；板块ID - `fup`：int类型；上一级版块；为其他插件预留 - `name`：string类型；版块名称 - `rank`：int类型；显示顺序，注意**数字越大越靠前** - `threads`：int类型；主题数 - `todayposts`：int类型；今日发回帖数量 - `todaythreads`：int类型；今日发主题贴数量 - `brief`：string类型；版块简介（允许HTML，但你可能需要使用`htmlspecialchars_decode`函数解决） - `announcement`：string类型；版块公告（允许HTML，但你可能需要使用`htmlspecialchars_decode`函数解决） - `accesson`：int类型；是否开启权限控制；（*建议转换成bool类型*） - `orderby`：int类型；默认列表排序方式，其中：0 = 最后回复时间时间 `last_date`、1 = 发帖时间 `tid` - `create_date`：int类型；板块创建时间时间戳 - `icon`：int类型；板块是否有 icon，如果有，则这里为最后更新时间时间戳，如果没有，则为0 - `moduids`：string类型；版块的版主用户ID，最多10个，逗号分隔 - `seo_title`：string类型；该板块的 SEO 标题，如果设置会代替版块名称；为其他插件预留 - `seo_keywords`：string类型；该板块的 SEO 关键字；为其他插件预留 - `create_date_fmt`：string类型；板块创建时间，人类可读格式 - `icon_url`：string类型；板块图标地址 - `accesslist`：array类型；特定于该板块的权限控制。 - 它对应后台板块编辑页面里的“用户权限”复选框。 - 如果没有选中的话，accesslist是空白array，权限会与当前用户组设定一样 - 如果选中的话，会是无序数组，其中有： - `fid`：int类型；板块ID - `gid`：int类型；用户组ID - 可以用来与当前用户的`$gid`比对 - `allowread`：int类型；是否允许看帖（*建议转换成bool类型*） - `allowthread`：int类型；是否发主题贴（*建议转换成bool类型*） - `allowpost`：int类型；是否允许回帖（*建议转换成bool类型*） - `allowattach`：int类型；是否允许上传附件（*建议转换成bool类型*） - `allowdown`：int类型；是否允许下载附件（*建议转换成bool类型*） - `modlist`：array类型；版块的版主用户数组 - *详见header.inc.htm里的`$user`* **【代码实现】** ```html   <nav class="navbar fixed-top navbar-expand-lg navbar-light " id="sidenav-main"> <div class="container wider">  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>   <a class="navbar-brand pt-0" href="<?= $header['mobile_link'];?>">  <img loading="lazy" src="<?= $conf['logo_mobile_url'];?>" class="navbar-brand-img logo-2"> </a>   <ul class="nav align-items-center d-lg-none"> <?php if($user): ?>  <li class="nav-item dropdown">  <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  <div class="media align-items-center"> <span class="avatar avatar-sm rounded-circle">  <img loading="lazy" src="<?= $user['avatar_url'];?>"> </span> </div> </a>  <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">  <a class="dropdown-item" href="<?= url('my');?>">个人中心</a>  <a class="dropdown-item" href="<?= url('my-thread');?>">我的帖子</a> <a class="dropdown-item" href="<?= url('my-favorite');?>">我的收藏</a> <a class="dropdown-item" href="<?= url('my-credits');?>">我的积分</a> <div class="dropdown-divider"></div> <?php if($gid == 1) : ?>  <a class="dropdown-item" href="./admin/">管理后台</a> <?php endif; ?>   <a class="dropdown-item text-danger" href="<?= url('user-logout');?>"> <?= lang('logout');?> </a> </div> </li> <?php else:?>  <li class="nav-item"> <a class="nav-link" href="<?= url('user-login');?>" title="<?= lang('login');?>"> <span class="avatar avatar-sm rounded-circle bg-primary"> <i class="icon-user"></i> </span> </a> </li> <?php endif;?> </ul>  <section class="collapse navbar-collapse" id="sidenav-collapse-main">  <aside class="navbar-collapse-header d-md-none"> <div class="row"> <div class="col-6 collapse-brand">  <a href=".">  <img loading="lazy" src="<?= $conf['logo_mobile_url'];?>" class="logo-2"> </a> </div> <div class="col-6 collapse-close">  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav"> <span></span> <span></span> </button> </div> </div> </aside>  <form class="mt-4 mb-3 d-md-none" action="<?= url('search') ?>" method="get"> <div class="input-group input-group-rounded input-group-merge">  <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search" name="keyword">  <div class="input-group-prepend"> <div class="input-group-text"> <span class="icon-search"></span> </div> </div> </div> </form>  <ul class="navbar-nav ">   <li class="nav-item home" fid="0" data-active="fid-0"><a class="nav-link" href="."><i class="icon-home d-md-none"></i> <?= lang('index_page');?> </a></li>    <?php foreach($forumlist_show as $_forum) : ?>  <li class="nav-item" fid="<?= $_forum['fid'];?>" data-active="fid-<?= $_forum['fid'];?>"> <a class="nav-link" href="<?= url('forum-' . $_forum['fid']);?>"> <img src="<?= $_forum['icon_url'] ?>" class="avatar-1"> <?= $_forum['name'];?> </a> </li>  <?php endforeach; ?>  </ul>  <hr class="my-3">  <ul class="navbar-nav">  <?php if(empty($uid)) { ?>   <li class="nav-item"> <a class="nav-link" href="<?= url('user-login');?>"><i class="icon-user"></i> <?= lang('login');?> </a> </li>   <?php } else { ?>  <li class="nav-item dropdown">  <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="media align-items-center">  <img loading="lazy" src="<?= $user['avatar_url'];?>" class="mr-2 avatar-1">  <?= $user['username'];?> </div> </a>  <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">  <a class="dropdown-item" href="<?= url('my');?>">个人中心 </a>  <a class="dropdown-item" href="<?= url('my-thread');?>">我的帖子 </a> <a class="dropdown-item" href="<?= url('my-favorite');?>">我的收藏 </a> <a class="dropdown-item" href="<?= url('my-credits');?>">我的积分 </a> <div class="dropdown-divider"></div> <?php if($gid == 1) : ?>  <a class="dropdown-item" href="admin/">管理后台</a> <?php endif; ?>   <a class="dropdown-item text-danger" href="<?= url('user-logout');?>"> <?= lang('logout');?> </a> </div> </li> <?php } ?>  </ul> </section> </div> </nav>   ``` **【代码解释】** 1. **导航栏结构**：使用Bootstrap的`navbar`组件创建了一个固定在顶部的导航栏，包含了响应式设计。 2. **移动端适配**： - 为移动端添加了汉堡菜单按钮，点击可展开/折叠导航菜单 - 在移动端显示简化的用户菜单，仅包含头像或登录按钮 - 移动端专属的网站标志和关闭按钮 - 移动端专属的搜索框 3. **桌面端适配**： - 左侧显示论坛板块列表 - 右侧显示用户菜单 - 使用水平分隔线区分板块列表和用户菜单 4. **板块列表**： - 显示主页菜单项 - 遍历`$forumlist_show`数组，为每个板块创建一个菜单项 - 每个菜单项包含板块图标和名称 - 使用`data-active`属性标记当前活跃的板块，便于后续通过JavaScript添加高亮样式 5. **用户菜单**： - 根据用户登录状态显示不同内容： - 未登录：显示登录按钮 - 已登录：显示用户头像、用户名和下拉菜单 - 下拉菜单包含个人中心、我的帖子、我的收藏、我的积分等链接 - 管理员用户额外显示管理后台链接 - 包含登出链接 6. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 7. **性能优化**：使用`loading="lazy"`属性延迟加载图片，提高页面加载速度。 ##### footer.inc.htm **【修改内容简介】** 与header.inc.htm相对应，也改变了页面结构，并增加了谷歌Code Prettify来改善代码块的外观，以及一个动态给`body`元素添加“scrolled” class的辅助JS代码。 **【本文件内的变量】** - `$db`：Object类型；代表数据库连接，其中可能包括： - `conf`：array类型；数据库连接配置；**【禁止对外显示】** - `master`：array类型；主数据库数据库连接配置；**【禁止对外显示】** - `host`：string类型；数据库主机地址 - `user`：string类型；数据库用户名 - `password`：string类型；数据库密码 - `name`：string类型；数据库名称 - `tablepre`：string类型；数据库表的前缀 - `charset`：string类型；数据库的字符集 - `engine`：string类型；数据库表的引擎；每张表应该使用相同的引擎，但也说不定，因为有些插件会创建自己的表，选择自己认为合适的引擎 - `slaves`：array类型；从数据库数据库连接配置；**【禁止对外显示】** - 内容同上。 - <br /> > 我知道，你会觉得这个词不好听，但请注意，这个程序是在2020年10月1日（也就是GitHub更改所有新的Repository的默认分支名称从master改为main）之前发布的。我个人其实更喜欢用“servant”，因为*fate* - `rconf`：array类型；数据库连接配置；**【禁止对外显示】** - 内容同`$db[conf][master]`。 - `errno`：int类型；数据库错误码，如果没有错误是0 - `errstr`：string类型；数据库错误信息，如果没有错误则为空 - `sqls`：array类型；执行的SQL语句；**【禁止对外显示】** - `tablepre`：string类型；数据库表的前缀；**【禁止对外显示】** - `$starttime`：float类型；程序开始执行时间 - `$time`：int类型；现在时间时间戳 - `$ip`：string类型；当前用户IP地址 - `$useragent`：string类型；当前访客的User Agent值 - `$forumlist`：array类型；完整论坛板块列表 - *详见header\_nav.inc.htm里的`$_forum`* - `$forumarr`：array类型；用户可见的论坛板块简略数组，其中: - 键是板块ID，值是板块名称 - `$fid`：int类型；当前所在的论坛板块ID（用于板块、帖子详情、编辑帖子页面） - `$conf`：Xiuno BBS配置信息（全部页面） - *详见`conf/conf.php`文件* - `$static_version`：string类型；静态资源版本号（全部页面） - `$browser`：array类型；从User Agent中提取的用户浏览器信息数组，不建议完全相信 - `device`：string类型；用户可能使用的设备，取值范围为：`pc, mobile, pad` - `name`：string类型；浏览器名称，取值范围为：`chrome, ie, robot`等 - `version`：int类型；浏览器版本，注意可能为0 - <br /> > 为什么不建议完全相信？因为该变量的内容，也就是`get__browser`函数，是针对中国市场精心设计的。 - <br /> > 代码注释中提及“中国国情下的判断浏览器类型，简直就是五代十国，乱七八糟”，这里的“五代十国”是一种形象化的比喻，用于描述中国市场上浏览器类型多样、判断复杂的情况。 - <br /> > 互联网发展过程中，不同浏览器厂商采用不同的技术标准和内核，同时还存在多种兼容模式，这就使得开发者在判断用户使用的浏览器类型时面临诸多困难，就如同 “五代十国” 时期政治局势混乱、各方势力割据一样。 **【代码实现】** ```html  <?php $db = G('db'); $starttime = G('starttime'); $time = G('time'); $ip = G('ip'); $useragent = G('useragent'); $forumlist = G('forumlist'); $forumarr = G('forumarr'); $fid = G('fid'); $conf = G('conf'); $static_version = $conf['static_version']; ?>  <?php if(DEBUG): ?>  <details> <summary>debug_info</summary> <?php echo xn_debug_info(); ?> </details> <?php endif;?>  <?php include _include(APP_PATH.'view/htm/footer_nav.inc.htm');?>  </main> </div> <script> // 当用户滚动页面时触发'scroll'事件监听器 window.addEventListener('scroll', function () { /* 检查当前页面垂直方向滚动的距离。 window.scrollY 返回文档在当前视口之上已滚动的像素值。如果页面顶部在视口之上有任何一点被滚动出去（即scrollY > 0），则条件为真。 */ if (window.scrollY > 0) { // 如果上面的条件为真，则给document.body元素添加一个名为'scrolled'的class。 // 这个class通常用于改变页面顶部导航栏的样式等，比如固定导航栏或者改变其背景颜色等。 document.body.classList.add('scrolled'); } else { // 如果页面没有被向上滚动（即用户在页面的最顶端，scrollY == 0）， // 则移除之前可能添加的'scrolled' class，恢复到原始状态。 document.body.classList.remove('scrolled'); } }); </script>   <script src="lang/<?= $conf['lang'];?>/bbs.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/jquery-3.1.0.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/popper.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/bootstrap.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/xiuno.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/bootstrap-plugin.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/async.js<?= $static_version;?>"></script> <script src="<?= $conf['view_url'];?>js/form.js<?= $static_version;?>"></script> <script> var debug = DEBUG = <?= DEBUG; ?>; // 后端的调试模式常量穿透到前端 var url_rewrite_on = <?= $conf['url_rewrite_on'];?>; // 后端的伪静态状态穿透到前端 var forumarr = <?= xn_json_encode($forumarr);?>; // 后端的$forumarr变量（论坛板块列表数组）穿透到前端，并转换成JSON格式 var fid = <?= $fid;?>; // 后端的当前所在板块ID穿透到前端 var uid = <?= intval($uid);?>; // 后端的当前用户ID穿透到前端 var gid = <?= intval($gid);?>; // 后端的当前用户组ID穿透到前端 xn.options.water_image_url = '<?= $conf['logo_water_url'];?>'; // 后端设置的水印图片地址穿透到前端 </script> <script src="<?= $conf['view_url'];?>js/bbs.js<?= $static_version;?>"></script>  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/prettify/r298/prettify.min.js" type="application/javascript"></script> <script> // 当DOM内容完全加载且解析完毕后，触发'DOMContentLoaded'事件监听器。 // 这确保了JavaScript代码会在所有HTML元素可用之后执行。 document.addEventListener('DOMContentLoaded', function() { // 选择文档中所有的pre标签。这些标签通常用于显示预格式化的文本，比如代码块。 var preTags = document.querySelectorAll('pre'); // 遍历找到的所有<pre>标签，并为每个标签添加一个名为'prettyprint'的CSS类。 // 'prettyprint'类与Google Code Prettify等库一起使用，用于美化代码展示。 preTags.forEach(function(pre) { pre.classList.add('prettyprint'); }); /* 执行prettyPrint()函数。这个函数由Google Code Prettify库提供，用于自动检测和美化页面上带有'prettyprint'类的代码块。它会根据代码的语言特点应用不同的样式，使得代码更易于阅读。 */ prettyPrint(); }); </script>  </body>  </html>   <?= cron_run();?> ``` **【代码解释】** 1. **变量初始化**：获取页脚所需的全局变量，如数据库连接、执行时间、用户信息等。 2. **调试信息**：在调试模式下显示详细的调试信息。 3. **页脚导航**：通过`include _include(APP_PATH.'view/htm/footer_nav.inc.htm');`引入页脚导航内容。 4. **页面结构闭合**：闭合`main`和`div.main-content`标签，完成页面主体结构。 5. **滚动效果**：添加JavaScript代码，当用户滚动页面时，为`body`元素添加或移除`scrolled`类，用于实现导航栏的滚动效果。 6. **JavaScript引入**：引入Xiuno BBS所需的所有JavaScript文件，包括： - 语言文件 - jQuery - Popper.js（Bootstrap的依赖） - Bootstrap.js - Xiuno.js（核心功能） - 各种插件和工具脚本 7. **后端变量传递**：将后端的一些变量（如调试模式、伪静态状态、论坛板块列表等）传递到前端JavaScript中。 8. **代码美化**：引入Google Code Prettify库，并添加JavaScript代码自动为`pre`标签添加`prettyprint`类，实现代码块的语法高亮和美化。 9. **页面闭合**：闭合`body`和`html`标签。 10. **定时任务**：在页面末尾调用`cron_run()`函数，执行定时任务。 ##### footer\_nav.inc.htm **【修改内容简介】** 将原有的Xiuno BBS页脚部分修改成没有背景颜色、居中显示的样式。 **【本文件内的变量】** - `$db`：Object类型；代表数据库连接 - *详见footer.inc.htm里的`$db`* - `$starttime`：float类型；程序开始执行时间 **【代码实现】** ```html  <footer class="footer text-center small" id="footer">  <p>  自豪地采用 <a href="https://www.xiunobbs.cn/"><b>Xiuno BBS <spzan><?= $conf['version'];?></spzan></b></a>；Designed by <a href="https://www.creative-tim.com/">Creative Tim</a>。  </p> <p>本主题是《Xiuno BBS 开发实践教程》的一部分，与本主题随附的<a href="">《Xiuno BBS 开发实践教程 - 主题 - The Hard Way》</a>介绍了本主题的完整制作教程。</p> <p>   ⏱ <b><?= substr(microtime(1) - $starttime, 0, 5);?></b>  🛢 <b><?= count($db->sqls);?></b>  </p> </footer>  ``` **【代码解释】** 1. **页脚结构**：使用`<footer>`标签创建页脚区域，添加了`footer`、`text-center`和`small`类，实现居中显示和小字体效果。 2. **页脚内容**： - 显示Xiuno BBS版本信息和设计来源 - 显示主题相关的教程信息 - 显示页面加载时间和数据库查询次数，用于性能监控 3. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 4. **性能监控**：通过`substr(microtime(1) - $starttime, 0, 5)`计算页面加载时间，通过`count($db->sqls)`统计数据库查询次数，帮助管理员监控网站性能。 ##### forum.htm **【修改内容简介】** 配合thread\_list.inc.htm修改成单列风格（视觉效果清爽），将板块介绍移动到header.inc.htm的“header部分”。 **【本文件内的变量】** - `$active`：string类型；当前选中的大类别（如新帖、精华等） - `$orderby`：string类型；排序方式，对应get请求参数中的“orderby” - `$threadlist`：array类型；帖子列表，其中内容大致见`thread_list.inc.htm`里的`$_thread` ##### index.htm **【修改内容简介】** 配合thread\_list.inc.htm修改成单列风格（视觉效果清爽），将网站简介移动到header.inc.htm的“header部分”。 **【本文件内的变量】** - `$runtime`：array类型；论坛统计信息，可能包括： - `users`：int类型；用户总数 - `posts`：int类型；帖子总数（含回帖+主题帖） - `threads`：int类型；主题贴总数 - `todayposts`：int类型；今日范围内新发布的回帖数 - `todaythreads`：int类型；今日范围内新发布的主题帖数 - `onlines`：int类型；当前在线用户数（**注意：单个用户，在两个设备上登陆，算作两个用户**） - `cron_1_last_date`：int类型；定时任务1执行时间戳 - `cron_2_last_date`：int类型；定时任务2执行时间戳 - 有时，这些数字会不准确，具体原因未知 - `$threadlist`：array类型；帖子列表，见`forum.htm`中的`$threadlist` - `$active`：string类型；当前选中的大类别（如新帖、精华等） **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?>   <div class="main">  <section class="position-relative mb-3">  <ul class="nav nav-tabs header-tabs align-items-end justify-content-center">  <li class="nav-item"> <a class="nav-link <?= $active == 'default' ? 'active' : '';?>" href="./<?= url($route);?>"> <?= lang('new_thread');?> </a> </li>   </ul> </section>  <secion class="card-threadlist"> <div class="row threadlist mb-0">  <?php include _include(APP_PATH.'view/htm/thread_list.inc.htm');?>  </div> </secion>  <?php include _include(APP_PATH.'view/htm/thread_list_mod.inc.htm');?>   <nav class="my-3"> <ul class="pagination justify-content-center flex-wrap"> <?= $pagination; ?> </ul> </nav>  </div>   <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?>  <script> $('li[data-active="fid-0"]').addClass('active'); </script>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建主内容区域 `div.main` - 包含帖子筛选区域 - 包含帖子列表容器 - 包含帖子管理按钮 - 包含翻页按钮 - 引入页脚文件 `footer.inc.htm` 2. **帖子筛选**： - 提供默认的“新帖”筛选选项 - 使用 `$active` 变量来显示当前选中的筛选方式 3. **帖子列表**：通过 `include _include(APP_PATH.'view/htm/thread_list.inc.htm');` 引入帖子列表模板。 4. **导航栏高亮**：通过JavaScript代码 `$('li[data-active="fid-0"]').addClass('active');` 为主页的导航菜单项添加高亮样式。 5. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 6. **响应式设计**：使用与论坛板块页相同的响应式布局，确保在不同设备上都能正常显示。 ##### forum.htm **【修改内容简介】** 配合thread\_list.inc.htm修改成单列风格（视觉效果清爽），将板块介绍移动到header.inc.htm的“header部分”。 **【本文件内的变量】** - `$active`：string类型；当前选中的大类别（如新帖、精华等） - `$orderby`：string类型；排序方式，对应get请求参数中的“orderby” - `$threadlist`：array类型；帖子列表，其中内容大致见`thread_list.inc.htm`里的`$_thread` **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?>   <div class="main">  <?php if(empty($hide_breadcrumb)) { ?>  <ol class="breadcrumb d-none d-md-flex"> <li class="breadcrumb-item"><a href="./"><i class="icon-home" aria-hidden="true"></i></a></li> <li class="breadcrumb-item active"><a href="<?= url('forum-' . $fid);?>"> <?= $forum['name'];?> </a></li>  </ol> <?php } ?>  <section class="position-relative mb-3"> <div class="d-flex justify-content-between">  <ul class="nav nav-tabs header-tabs align-items-end">  <li class="nav-item"> <a class="nav-link <?= $active == 'default' ? 'active' : '';?>" href="<?= url('forum-' . $fid);?>"> <?= lang('new_thread');?> </a> </li>   </ul>  <div class="text-right small pt-1 card-header-dropdown">  <div class="btn-toolbar" role="toolbar"> <span class="text-white"> <?= lang('orderby');?>： </span> <div class="dropdown btn-group"> <a href="#" class="dropdown-toggle text-white" id="ordery_dropdown_menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <?= $orderby == 'tid' ? lang('thread_create_date') : lang('post_create_date');?>  </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="ordery_dropdown_menu"> <a class="dropdown-item" href="<?= url('forum-' . $fid . '-1', array('orderby'=>'tid') + $extra);?>"><i class="icon text-primary <?= $orderby == 'tid' ? 'icon-check' : '';?>"></i>  <?= lang('thread_create_date');?> </a> <a class="dropdown-item" href="<?= url('forum-' . $fid . '-1', array('orderby'=>'lastpid') + $extra);?>"><i class="icon text-primary <?= $orderby == 'lastpid' ? 'icon-check' : '';?>"></i>  <?= lang('post_create_date');?> </a>  </div> </div> </div> </div>  </div> </section>  <section class=" card-threadlist"> <div class="row threadlist mb-0">  <?php include _include(APP_PATH.'view/htm/thread_list.inc.htm');?>  </div> </section>  <?php include _include(APP_PATH.'view/htm/thread_list_mod.inc.htm');?>   <nav class="my-3"> <ul class="pagination justify-content-center flex-wrap"> <?= $pagination; ?> </ul> </nav>  </div>   <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?>  <script> $('li[data-active="fid-<?= $fid;?>"]').addClass('active'); </script>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建主内容区域 `div.main` - 包含面包屑导航（仅在非隐藏状态下显示） - 包含帖子筛选和排序区域 - 包含帖子列表容器 - 包含帖子管理按钮 - 包含翻页按钮 - 引入页脚文件 `footer.inc.htm` 2. **帖子筛选和排序**： - 提供默认的“新帖”筛选选项 - 提供排序下拉菜单，可按发帖时间或最后回复时间排序 - 使用 `$active` 和 `$orderby` 变量来显示当前选中的筛选和排序方式 3. **帖子列表**：通过 `include _include(APP_PATH.'view/htm/thread_list.inc.htm');` 引入帖子列表模板。 4. **导航栏高亮**：通过JavaScript代码 `$('li[data-active="fid-<?= $fid;?>"]').addClass('active');` 为当前板块的导航菜单项添加高亮样式。 5. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### thread\_list.inc.htm **【修改内容简介】** **完全重新设计了**。仿照常见的博客风格文章列表，设计了： - 头图 - 标题 - 可能存在的简介文字 - 作者名称与板块 - 发布日期、查看量、回帖量等 **【本文件内的变量】** - `$_thread`：单个帖子内容，其中大致包括： - `tid`：int类型；帖子ID - `fid`：int类型；帖子所属版块id - `top`：int类型；置顶级别，取值为：0 = 普通主题、1 = 板块置顶、3 = 全站置顶 - `uid`：int类型；发帖人用户id - `userip`：int类型；发帖时用户ip（使用`ip2long`）转换成数字 - `subject`：string类型；主题 - `create_date`：int类型；发帖时间 - `last_date`：int类型；最后回复时间 - `views`：int类型；查看次数, - `posts`：int类型；回帖数 - `images`：int类型；附件中包含的图片数 - `files`：int类型；附件中包含的文件数 - `mods`：int类型；预留：版主操作次数，如果 > 0, 则查询 mo dlog，显示版主的评分 - `closed`：int类型；帖子是否关闭/锁定；（建议转换成bool类型） - `firstpid`：int类型；首贴 pid；【**重要：这个PID表示帖子正文内容**】 - `lastuid`：int类型；最近参与的用户的用户id - `lastpid`：int类型；最后回复的回帖的PID - `create_date_fmt`：string类型；帖子创建时间，人类可读形式 - `last_date_fmt`：string类型；最后一个回帖创建时间，人类可读形式 - `user`：array类型；发帖人用户信息数组，等于`user_read($_thread['uid'])` - *详见header.inc.htm里的`$user`* - **【注意：这里面会包含密码等敏感信息，务必再次确认敏感信息是否已被去掉。如果没去掉的话，请务必去掉！】** - `username`：string类型；发帖人用户名 - `user_avatar_url`：string类型；发帖人用户头像地址 - `forumname`：string类型；该帖子所属板块名称 - `lastuid`：int类型；最后一个回帖的用户ID - `lastusername`：string类型；后一个回帖的用户名 - `url`：string类型；该帖子的网址 - `user_url`：string类型；该帖子发帖人的网址 - `top_class`：string类型；可以直接在HTML中输出的“该帖子的置顶等级class值” - `pages`：int类型；该帖子有多少页回帖 **【代码实现】** ```html   <?php /* 辅助函数【开始】 */ // 检查是否已经定义了catch_post_first_img函数，如果没有则定义 // 我们不能想当然的就认为这个函数还没被定义 if (!function_exists('catch_post_first_img')) { /** * 获取帖子第一张缩略图 * * @param string $content 帖子内容 * @return string|null 帖子第一张缩略图的网址 */ function catch_post_first_img($content) { // 使用正则表达式匹配<img>标签中的src属性，并提取出图片URL。 $output = preg_match_all('/<img.*?src=[\'"]([^\'"]+)[\'"].*>/iU', $content, $matches); // 如果没有找到任何匹配项，则返回NULL。 if (empty($output)) { $first_img = NULL; } else { // 否则，返回第一个匹配项（即帖子中的第一张图片）。 $first_img = $matches[1][0]; } return $first_img; } } // 检查帖子列表是否为空，如果不为空： if ($threadlist) { $have_allowtop = 0; // 遍历每个帖子。 foreach ($threadlist as &$_thread) { // 检查当前帖子是否允许置顶。 $_thread['allowtop'] = forum_access_mod($_thread['fid'], $gid, 'allowtop'); if ($_thread['allowtop']) $have_allowtop = 1; // 设置摘录长度为128个字符。 $_post_excerpt_length = 128; // 初始化封面图变量 $_post_message_image = NULL; // 读取帖子缓存并获取帖子内容。【重要：如果你不从缓存里读取帖子内容，则会让数据库读写次数加倍，会严重影响网站性能！】 $_post_message = post_read_cache($_thread['firstpid']); // 根据缓存内容选择内容格式——这里考虑到message_fmt是可以被删除的列，所以需要特别判断。 // 参考 https://www.yuque.com/xiand/xiunobbs/wnssos 和 https://www.yuque.com/xiand/xiunobbs/dq56yi $_post_message_full = isset($_post_message['message_fmt']) ? $_post_message['message_fmt'] : (isset($_post_message['message']) ? $_post_message['message'] : ''); // 去掉换行符以确保文本连续。 $_post_message_full = str_replace(PHP_EOL, "", $_post_message_full); // 替换某些短代码为省略号，避免显示这些短代码的内容。 // 其实xiuno bbs不存在短代码的概念，只是约定俗成使用相同的格式来表示特别功能区域，例如兔兔的插件会使用ttlogin表示“登陆可见内容”等等。 $_post_message_full = preg_replace("/\[(music|netdisk|thread=(.*)|url)\]/i", "[…]", $_post_message_full); // 单个短代码 $_post_message_full = preg_replace("/\[(login|reply|ttlogin|ttreply|tabs|tabs_pane(.*)|url)\](.*?)\[\/(login|reply|ttlogin|ttreply|tabs|tabs_pane(.*)|url)\]/i", "[…]", $_post_message_full); // 结对短代码 // 将[img]标签转换为标准的HTML <img>标签。 $_post_message_full = preg_replace_callback("/\[img\](.*?)\[\/img\]/is", function ($match) { $file_name = ""; if (!empty($match[1])) { // 提取图片文件名。 $start = strrpos($match[1], '/') + 1; $end = strrpos($match[1], '.') - ($start); $file_name = substr($match[1], $start, $end); } return '<img src="' . $match[1] . '" class="img-fluid" alt="' . $file_name . '">'; }, $_post_message_full); // 处理带有宽度和高度属性的[img]标签。 $_post_message_full = preg_replace_callback("/\[img width=(\d+),height=(\d+)\](.*?)\[\/img\]/is", function ($match) { $file_name = ""; if (!empty($match[3])) { $start = strrpos($match[3], '/') + 1; $end = strrpos($match[3], '.') - ($start); $file_name = substr($match[3], $start, $end); } return '<img src="' . $match[3] . '" class="img-fluid" alt="' . $file_name . '" style="width:' . $match[1] . 'px; height:' . $match[2] . 'px;">'; }, $_post_message_full); // 获取文章中的第一张图片。 $_post_message_image = catch_post_first_img($_post_message_full); // 如果摘录长度设置为-1，则使用全文作为摘录。 if ($_post_excerpt_length === -1) { if (mb_strlen($_post_message_full) > $_post_excerpt_length) { $_post_excerpt_has_showmore = true; $_thread['top_class'] .= ' has-showmore'; } $_post_message_excerpt = $_post_message_full; } else { // 否则，截取指定长度的文本作为摘录。 $_post_message_excerpt = strip_tags(mb_substr($_post_message_full, 0, $_post_excerpt_length)); // 如果截取后的文本长度达到最大值，则添加省略号。 if (mb_strlen($_post_message_excerpt) >= $_post_excerpt_length) { $_post_message_excerpt .= '…'; } } /* 辅助函数【结束】 */ ?> <article class="col-md-6 col-lg-4 thread tap <?= $_thread['top_class']; ?> " data-href="<?= url('thread-' . $_thread['tid']); ?>" data-tid="<?= $_thread['tid']; ?>"> <div class="card mb-3"> <?php if ($_post_message_image !== NULL): ?>  <a href="<?= url('thread-' . $_thread['tid']); ?>"> <img loading="lazy" class="card-img-top" src="<?= $_post_message_image ?>"> </a> <?php endif; ?>  <div class="card-body">  <h2 class="subject break-all">  <?php if ($_thread['top'] > 0) { ?>  <i class="icon-top-<?= $_thread['top']; ?>"></i> <?php } ?>    <a href="<?= url('thread-' . $_thread['tid']); ?>"> <?= $_thread['subject']; ?> </a>   <?php if ($_thread['files'] > 0) { ?>  <i class="icon small filetype other"></i> <?php } ?>   <?php if ($_thread['closed'] > 0) { ?>  <i class="icon-lock"></i> <?php } ?>  </h2>  <p class="m-0"> <?= $_post_message_excerpt ?> </p> </div>  <footer class="card-footer"> <div class="media">  <a href="<?= url('user-' . $_thread['uid']); ?>" tabindex="-1" class="ml-1 mt-1 mr-3"> <img class="avatar-3" src="<?= $_thread['user_avatar_url']; ?>"> </a>  <div class="media-body small line-height-2">  <div>   <a href="<?= url('user-' . $_thread['uid']); ?>" class="username mr-1 " uid="<?= $_thread['uid']; ?>"> <?= $_thread['username']; ?> </a>  <?php if ($route !== 'forum'): ?>  · <a href="<?= url('forum-' . $_thread['fid']) ?>"> <?= $_thread['forumname'] ?> </a> <?php endif; ?>  <?php if ($_thread['lastuid']) { ?>  <em class="text-muted d-none d-xl-inline"> <i class="icon-reply mx-1"></i>  <span class="username mr-1" uid="<?= $_thread['lastuid']; ?>"><?= $_thread['lastusername']; ?></span>  <time><?= $_thread['last_date_fmt']; ?></time> </em> <?php } ?>  </div>  <aside class="text-muted "> <?php if ($have_allowtop) { ?> <span class="mr-2"> <?php if ($_thread['allowtop']) { ?>  <input type="checkbox" name="modtid" value="<?= $_thread['tid']; ?>" <?= empty($mod_input_checked) ? '' : 'checked disabled'; ?> /> <?php } ?> </span> <?php } ?> <time class="date ">  <i class="icon-calendar-o"></i> <?= $_thread['create_date_fmt']; ?> </time>  <span class="ml-2"><i class="icon-eye"></i>  <?= $_thread['views']; ?> </span>   <span class="ml-2"><i class="icon-comment-o"></i>  <?= $_thread['posts']; ?> </span>  </aside> </div> </div> </footer> </div> </article> <?php } } else { ?> <article class="col-12"> <div class="card card-body"> <?= lang('none'); ?> </div> </article> <?php } ?>  ``` **【代码解释】** 1. **辅助函数**：定义了 `catch_post_first_img` 函数，用于从帖子内容中提取第一张图片作为封面图。 2. **帖子列表处理**： - 检查帖子列表是否为空 - 遍历每个帖子，处理置顶权限、封面图和摘要 - 从缓存中读取帖子内容，避免重复查询数据库 - 处理帖子内容中的短代码和图片标签 - 截取帖子内容作为摘要 3. **帖子卡片结构**： - 使用Bootstrap的`card`组件创建帖子卡片 - 顶部显示帖子封面图（如果有） - 中部显示帖子标题和摘要 - 底部显示帖子元信息，包括作者、发布板块、发布时间、查看量和回帖量 4. **响应式设计**：使用Bootstrap的网格系统（`col-md-6 col-lg-4`）实现响应式布局，在不同屏幕尺寸下显示不同数量的帖子卡片。 5. **置顶和状态标记**：根据帖子的置顶级别和状态显示相应的图标。 6. **管理功能**：为版主显示帖子管理复选框。 7. **空状态处理**：当帖子列表为空时，显示“无”的提示信息。 8. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 #### **次要文件内容** ##### message.htm **【修改内容简介】** 修改成了全屏风格。 **【本文件内的变量】** - `$code`：提示信息码，0为成功，1为用户出错，-1为服务器出错，可能有其他值 - `$message`：提示信息内容 ##### my\_thread.htm **【修改内容简介】** 配合thread\_list.inc.htm更改了展示方式。 **【本文件内的变量】** - `$threadlist`：array类型；帖子列表，见`forum.htm`中的`$threadlist` ##### post.htm **【修改内容简介】** 发帖/编辑帖子页面重新调整宽度。 **【本文件内的变量】** - `$form_title`：string类型；表单标题 - `$form_action`：string类型；表单action属性的值 - `$form_submit_txt`：string类型；表达提交按钮文字 - `$form_subject`：string类型；表单内的subject值（帖子标题） - `$form_message`：string类型；表单内的message值（帖子内容） - `$form_doctype`：int类型；表单内的doctype值 - `$isfirst`：int类型；是否为主题帖，1表示“是主题帖” - `$quotepid`：int类型；被引用的pid，0表示没有引用 - `$location`：string类型；在提交后，用户会到达的网址 - `$filelist`：array类型；附件列表 ##### thread.htm **【修改内容简介】** 修改成单列风格（视觉效果清爽），将帖子标题、作者等信息移动到header.inc.htm的“header部分”。 **【本文件内的变量】** - `$first`：array类型；楼主发布的内容，其中包含，详见`post_list.inc.htm`中的`$_post` - `$postlist`：array类型；回帖列表，详见`post_list.inc.htm`中的`$_post` **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?>   <div class="container"> <div class="main">  <?php if(empty($hide_breadcrumb)) { ?>  <ol class="breadcrumb d-none d-md-flex"> <li class="breadcrumb-item"> <a href="./" aria-label="<?= lang('index_page');?>"> <i class="icon-home"></i> </a> </li> <li class="breadcrumb-item"><a href="<?= url('forum-' . $fid);?>"> <?= $forum['name'];?> </a> </li> <li class="breadcrumb-item active"><a href="<?= url('thread-' . $tid);?" title="<?= lang('index_page');?> 返回主题第一页"> <?= $thread['subject'];?> </a> </li>  </ol> <?php } ?>   <article class="card card-thread shadow mb-3"> <div class="card-body"> <div class="message break-all" isfirst="1"> <?php if($page == 1) { ?>    <?= $first['message_fmt'];?>   <?= post_file_list_html($first['filelist']);?>  <?php } else { ?>   <p class="text-center"> <em> <a href="<?= url('thread-' . $tid);?>"> <?= lang('view_thread_message');?> </a> </em> </p>  <?php } ?> </div>   <section class="plugin d-flex justify-content-center mt-3">  </section>  </div> <aside class="card-footer"> <section class="d-flex flex-column flex-lg-row flex-wrap align-items-center justify-content-between"> <div class="">  <div class="d-none threadlist"> <input type="checkbox" name="modtid" value="<?= $thread['tid']; ?>" checked /> </div>  <?php include _include(APP_PATH.'view/htm/thread_list_mod.inc.htm');?> </div> <div>  <?php if($allowupdate || $first['allowupdate']) { ?>  <a href="<?= url('post-update-' . $thread['firstpid']);?>" class=" mr-2 post_update"> <i class="icon-edit"></i> <?= lang('edit');?> </a> <?php } ?> <?php if($allowdelete || $first['allowdelete']) { ?>  <a data-href="<?= url('post-delete-' . $thread['firstpid']);?>" href="javascript:void(0);" class="text-danger post_delete" isfirst="1"> <i class="icon-remove"></i> <?= lang('delete');?> </a> <?php } ?>  </div> </section> </aside> </article>    <section class="card-postlist">  <div class="card-postlist-title my-3"> <div class="d-flex flex-column align-items-center text-center">  <h2 class="h1"> <b> <?= lang('new_post');?> </b> <span class=" badge badge-primary "> <?= $thread['posts'];?> </span> </h2>   <div>   </div> </div> </div>  <section class="postlist"> <?php include _include(APP_PATH.'view/htm/post_list.inc.htm'); ?> <?php if(!empty($user)) { ?>  <aside class="card post newpost mb-3"> <div class="card-body"> <section class="d-flex align-items-start">  <a href="<?= url('user-' . $user['uid']);?" class="mr-3"> <img src="<?= $user['avatar_url'];?" class="avatar-3 rounded-circle avatar-md"> </a>  <div class="flex-grow-1 w-100"> <section class="d-flex justify-content-between align-items-center mb-2">  <header class="user-info">  <a href="<?= url('user-' . $user['uid']);?" class=" text-body"> <?= $user['username'];?> </a>  <small class="text-muted ml-2"> <span id="newfloor"><?= ($thread['posts'] + 2);?></span> <?= lang('floor');?> </small> </header> </section> <form action="<?= url('post-create-' . $tid . '-1');?>" method="post" id="quick_reply_form"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="return_html" value="1" /> <input type="hidden" name="quotepid" value="0" />  <div class="card-text mb-3"> <textarea class="form-control" placeholder="<?= lang('message');?" name="message" id="message" style="min-height: 100px"></textarea> </div>  <footer class="d-flex justify-content-between align-items-center">  <button type="submit" class="btn btn-primary " id="submit" data-loading-text="<?= lang('submiting');?>..."> <?= lang('post_create');?> </button>  <a class="text-muted small" href="<?= url("post-create-$tid");?" id="advanced_reply"> <i class="icon-mail-forward mr-1"></i> <?= lang('advanced_reply');?> </a> </footer> </form> </div> </section> </div> </aside> <?php } ?> </section> </section>   <?php if($pagination) { ?>  <nav> <ul class="pagination my-4 justify-content-center flex-wrap"> <?= $pagination; ?> </ul> </nav> <?php }?>  </div> </div>   <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?> <script> var jform = $('#quick_reply_form'); var jsubmit = $('#submit'); jform.on('submit', function () { jform.reset(); jsubmit.button('loading'); var postdata = jform.serialize(); $.xpost(jform.attr('action'), postdata, function (code, message) { if (code == 0) { var s = '<ul>' + message + '</ul>'; var jli = $(s).find('li'); jli.insertBefore($('.postlist > .post').last()); jsubmit.button('reset'); $('#message').val(''); // 楼层 +1 var jfloor = $('#newfloor'); jfloor.html(xn.intval(jfloor.html()) + 1); // 回复数 +1 var jposts = $('.posts'); jposts.html(xn.intval(jposts.html()) + 1); } else if (code < 0) { $.alert(message); jsubmit.button('reset'); } else { jform.find('[name="' + code + '"]').alert(message).focus(); jsubmit.button('reset'); } }); return false; }); // 缩放图片，适应屏幕大小。 function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); // 815 : 746; // 734 746 jmessagelist.each(function () { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); // 734 746 var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function () { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if (!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } //var percent = xn.min(100, xn.ceil((img_width / jmessage_width) * 100)); if (img_width > jmessage_width) { if (this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function () { //window.open(jimg.attr('src')); }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } // 对于超宽的表格，加上响应式 function resize_table() { $('div.message').each(function () { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function () { resize_image(); resize_table(); $(window).on('resize', resize_image); }); // 输入框自动伸缩 var jmessage = $('#message'); jmessage.on('focus', function () { if (jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '8rem'); }); jmessage.on('blur', function () { jmessage.t = setTimeout(function () { jmessage.css('height', '2.5rem'); }, 1000); }); $('li[data-active="fid-<?= $fid;?>"]').addClass('active'); </script> <?php if($thread['closed'] && ($gid == 0 || $gid > 5)) { ?>  <script> jmessage.val('<?= lang('thread_has_already_closed');?>').attr('readonly', 'readonly'); </script> <?php } ?>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建主内容区域 `div.main` - 包含面包屑导航 - 包含帖子内容区域 - 包含回帖区域 - 包含翻页按钮 - 引入页脚文件 `footer.inc.htm` 2. **帖子内容区域**： - 只在第一页显示帖子完整内容和附件列表 - 非第一页显示跳转到第一页的链接 - 包含插件预留区域 - 包含帖子管理按钮和编辑/删除按钮 3. **回帖区域**： - 显示回帖标题和回帖数量 - 通过 `include _include(APP_PATH.'view/htm/post_list.inc.htm');` 引入回帖列表 - 如果用户已登录，显示快速发布回帖框 4. **JavaScript功能**： - 处理快速回帖的提交 - 自动调整图片大小以适应屏幕 - 为超宽表格添加响应式包装 - 实现输入框的自动伸缩 - 为当前板块的导航菜单项添加高亮样式 - 如果帖子已关闭，禁用回帖输入框 5. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### post\_list.inc.htm **【修改内容简介】** 配合thread.htm进行外观微调。 **【本文件内的变量】** - `$_post`：array类型；回帖内容，其中大致包括： - `tid`：int类型；所属主题贴id；如果isfirst是0，则这里会有值，否则为0 - `pid`：int类型；帖子/回帖本身id - `uid`：int类型；发帖者用户id - `isfirst`：int类型；是否为首帖，与$thread\['firstpid'] 呼应；是1的话表示为主题贴，是0的话表示回帖 - `create_date`：int类型；发贴时间时间戳 - `userip`：int类型；发帖时用户ip（使用`ip2long`函数） - `images`：smallint类型；附件中包含的图片数，预留 - `files`：smallint类型；附件中包含的文件数，预留 - `doctype`：tinyint类型；message的内容类型，取值范围： - 0 = html - 在内部会使用`xn_html_safe`函数进行反XSS攻击过滤 - 1 = 纯文本 - 在内部会使用`xn_txt_to_html`函数完成HTML转化 - 2 = markdown - 预留，可以自行使用Parsedown库完成HTML转化 - 3 = ubb（BBCode） - 预留，可以使用其他库完成HTML转化 - `quotepid`：int类型；引用哪个 pid，如果没有引用的话为0，仅在isfirst为0时有效 - `message`：string类型；用户输入的原始帖子内容 - `message_fmt`：string类型；转成HTML之后的帖子内容 - `create_date_fmt`：类型；发贴时间，人类可读形式 - `username`：string类型；发帖者用户名 - `user_avatar_url`：string类型；发帖者用户头像网址 - `user`：array类型；详见`$user` - `floor`：类型；楼层序号 - `allowupdate`：int类型；是否允许更新帖子，1是允许（*建议转换成bool类型*） - `allowdelete`：int类型；是否允许删除帖子，1是允许（*建议转换成bool类型*） - `user_url`：string类型；发帖者用户网址 - `files`：int类型；附件数量 - `filelist`：array类型；附件列表，其中有： - `aid`：int类型；附件id - `tid`：int类型；对应的主题贴id - `pid`：int类型；对应的帖子id；如果tid存在的话，则pid为`$thread['firstpid']` - `uid`：int类型；附件上传者用户id - `filesize`：int类型；文件尺寸，单位字节 - `width`：int类型；图片宽度，如果宽度大于0则为图片 - `height`：int类型；图片高度 - `filename`：string类型；文件名称，更具体点说是“保存后的文件名”，不包含URL前缀`$conf['upload_url']`（会过滤，并且截断） - `orgfilename`：string类型；上传的原文件名（用户在设备上选择文件时的文件名） - `filetype`：string类型；文件类型，取值范围如下： - `video` = 'av','wmv','wav','wma','avi','rm','rmvb','mp4' - `music` = 'mp3','mp4' - `exe` = 'exe','bin' - `flash` = 'swf','fla','as' - `image` = 'gif','jpg','jpeg','png','bmp' - `office` = 'doc','xls','ppt','docx','xlsx','pptx' - `pdf` = 'pdf' - `text` = 'c','cpp','cc', 'txt' - `zip` = 'tar','zip','gz','rar','7z','bz' - `book` = 'chm' - `torrent` = 'bt','torrent' - `font` = 'ttf','font','fon' - `all` = 以上全部 - 以及隐藏默认值“other”，如果filetype是空白的话，会在`thread_list.inc.htm`中被处理成“other” - <br /> > 该值会在`thread_list.inc.htm`中的`$_thread['subject']`附件以图标形式显示，类似于`<i class="icon filetype image"></i>` - <br /> > 这些类型的定义在`conf/attach.conf.php`里，可自行修改。 - `create_date`：int类型；文件上传时间时间戳 - `comment`：string类型；文件注释，预留 - 可以作为存储元数据的地方，因为整个Xiuno BBS没有使用这个 - `downloads`：int类型；下载次数 - `credits`：int类型；需要的积分类型1（经验），预留 - `golds`：int类型；需要的积分类型2（金币），预留 - `rmbs`：int类型；需要的积分类型3（人民币），预留 - `isimage`：int类型；是否为图片（*建议转换成bool类型*） - create\_date\_fmt：string类型；文件上传时间，人类可读形式 - url：int类型；文件网址，等于`$conf['upload_url'].'attach/'.$attach['filename']` - `classname`：string类型；可以直接在HTML中输出的class值 **【代码实现】** ```html  <?php empty($allowupdate) AND $allowupdate = 0; empty($allowdelete) AND $allowdelete = 0; empty($allowpost) AND $allowpost = 0; ?>   <?php if($postlist) { foreach($postlist as $_post) { ?> <article class="card post " data-pid="<?= $_post['pid'];?>" data-uid="<?= $_post['uid'];?>"> <div class="card-body"> <div class="d-flex align-items-start">  <a href="<?= url('user-' . $_post['uid']);?" class="mr-3"> <img loading="lazy" src="<?= $_post['user_avatar_url'];?>" class="avatar-3 rounded-circle avatar-md"> </a>   <section class="flex-grow-1 w-100">  <header class="d-flex justify-content-between align-items-center mb-2">  <div>  <div class="user-info">  <a href="<?= url('user-' . $_post['uid']);?" class=" text-body"> <?= $_post['username'];?> </a>  <time class="small text-muted ml-2"> <?= $_post['create_date_fmt'];?> </time> </div>  </div>  <div>  <?php if($allowpost) { ?>  <a href="javascript:void(0)" data-tid="<?= $_post['tid'];?>" data-pid="<?= $_post['pid'];?>" class=" post_reply mr-3"><i class="icon-reply" title="<?= lang('quote');?>"></i> <span class="d-none d-xl-inline"> <?= lang('quote');?> </span></a> <?php } ?>   <?php if($allowupdate || $_post['allowupdate']) { ?>  <a href="<?= url(" post-update-$_post[pid]");?" class=" post_update mr-3"> <i class="icon-edit" title="<?= lang('edit');?>"></i> <span class="d-none d-xl-inline"> <?= lang('edit');?> </span> </a> <?php } ?>   <?php if($allowdelete || $_post['allowdelete']) { ?>  <a data-href="<?= url(" post-delete-$_post[pid]");?" data-confirm-text="<?= lang('confirm_delete');?" href="javascript:void(0);" class=" text-danger post_delete _confirm mr-3"><i class="icon-remove" title="<?= lang('delete');?>"></i> <span class="d-none d-xl-inline"> <?= lang('delete');?> </span> </a> <?php } ?>   <?php if($_post['floor']) { ?> <div class="badge badge-light"> # <?= $_post['floor'];?> </div> <?php } ?>  </div> </header>  <div class="post-content"> <?php if(!empty($_post['subject'])) { ?>  <h4 class="card-title mb-2"> <a href="<?= url('thread-' . $_post['tid']);?" class="text-body"> <?= $_post['subject'];?> </a> </h4> <?php } ?>  <div class="card-text mb-3"> <?= $_post['message_fmt'];?> </div> </div> <?php if(!empty($_post['filelist'])): ?>  <aside class="attachments mt-3 border-top pt-3"> <?= post_file_list_html($_post['filelist']);?> </aside> <?php endif; ?> </section> </div> </div> </article> <?php }} ?>   ``` **【代码解释】** 1. **变量初始化**：初始化`allowupdate`、`allowdelete`和`allowpost`变量，确保它们有默认值。 2. **回帖列表**：遍历`$postlist`数组，为每个回帖创建一个卡片。 3. **回帖卡片结构**： - 左侧显示用户头像 - 右侧显示回帖内容，包括： - 头部信息：用户名、发布时间和操作按钮（引用、编辑、删除） - 内容区域：回帖内容和附件列表（如果有） - 楼层标记 4. **操作按钮**：根据用户权限显示不同的操作按钮： - 引用按钮：允许用户引用该回帖 - 编辑按钮：允许用户编辑该回帖 - 删除按钮：允许用户删除该回帖 5. **附件列表**：如果回帖有附件，显示附件列表。 6. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 7. **性能优化**：使用`loading="lazy"`属性延迟加载头像图片，提高页面加载速度。 ##### message.htm **【修改内容简介】** 修改成了全屏风格。 **【本文件内的变量】** - `$code`：提示信息码，0为成功，1为用户出错，-1为服务器出错，可能有其他值 - `$message`：提示信息内容 **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?>  <div class="row"> <div class="col-lg-8 mx-auto"> <div class="card mt-4"> <div class="card-body"> <h4 class="card-title text-center mb-0"> <i class="icon-<?php echo $code == 0 ? 'ok' : 'warning-sign'; ?>"></i>  <?php echo is_array($message) ? print_r($message, 1) : $message;?>  </h4>  </div> </div> </div> </div>  <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建居中的卡片容器 - 显示提示信息和对应的图标 - 引入页脚文件 `footer.inc.htm` 2. **动态内容**： - 根据 `$code` 值显示不同的图标（成功或警告） - 显示 `$message` 内容，支持数组和字符串类型 3. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 4. **响应式设计**：使用Bootstrap的网格系统（`col-lg-8 mx-auto`）实现响应式布局，确保在不同屏幕尺寸下都能居中显示。 ##### my\_thread.htm **【修改内容简介】** 配合thread\_list.inc.htm更改了展示方式。 **【本文件内的变量】** - `$threadlist`：array类型；帖子列表，见`forum.htm`中的`$threadlist` **【代码实现】** ```html <template include="./view/htm/my_thread.template.htm"> <slot name="my_body"> <ul class="list-unstyled threadlist mb-0"> <?php include _include(APP_PATH.'view/htm/thread_list.inc.htm');?> </ul> <?php if($pagination) { ?> <nav><ul class="pagination justify-content-center flex-wrap"><?php echo $pagination; ?></ul></nav> <?php } ?> </slot> </template> <script> $('a[data-active="my-thread"]').addClass('active'); </script> ``` **【代码解释】** 1. **页面结构**： - 使用模板文件 `my_thread.template.htm` - 在 `my_body` 插槽中显示帖子列表 - 包含翻页按钮 2. **帖子列表**：通过 `include _include(APP_PATH.'view/htm/thread_list.inc.htm');` 引入帖子列表模板，与论坛板块页和主页使用相同的列表样式。 3. **导航高亮**：通过JavaScript代码 `$('a[data-active="my-thread"]').addClass('active');` 为“我的帖子”导航菜单项添加高亮样式。 4. **响应式设计**：使用与其他页面相同的响应式翻页按钮。 ##### post.htm **【修改内容简介】** 发帖/编辑帖子页面重新调整宽度。 **【本文件内的变量】** - `$form_title`：string类型；表单标题 - `$form_action`：string类型；表单action属性的值 - `$form_submit_txt`：string类型；表达提交按钮文字 - `$form_subject`：string类型；表单内的subject值（帖子标题） - `$form_message`：string类型；表单内的message值（帖子内容） - `$form_doctype`：int类型；表单内的doctype值 - `$isfirst`：int类型；是否为主题帖，1表示“是主题帖” - `$quotepid`：int类型；被引用的pid，0表示没有引用 - `$location`：string类型；在提交后，用户会到达的网址 - `$filelist`：array类型；附件列表 **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?> <?php // 公用一个模板 if($route == 'thread' && $action == 'create') { $form_title = lang('thread_create'); $form_action = url("thread-create"); $form_submit_txt = lang('thread_create'); $form_subject = ''; $form_message = ''; $form_doctype = 1; $isfirst = 1; $quotepid = 0; $location = url("forum-'+jfid.checked()+'"); $filelist = array(); } elseif($route == 'post' && $action == 'update') { $form_title = lang('post_update'); $form_action = url("post-update-$pid"); $form_submit_txt = lang('post_update'); $form_subject = $thread['subject']; $form_message = $post['message']; $form_doctype = $post['doctype']; $isfirst = $post['isfirst']; $quotepid = $post['quotepid']; $location = url("thread-$tid"); } elseif($route == 'post' && $action == 'create') { $form_title = lang('post_create'); $form_action = url("post-create-$tid-0"); $form_submit_txt = lang('post_create'); $form_subject = ''; $form_message = ''; $form_doctype = 1; $isfirst = 0; //$quotepid = 0; $location = url("thread-$tid"); $filelist = array(); } // hook post_start_init.htm $filelist += (array)_SESSION('tmp_files'); ?>  <div class="row"> <div class="col-lg-10 mx-auto"> <div class="card"> <div class="card-header"> <?php echo $form_title; ?> </div> <div class="card-body"> <form action="<?php echo $form_action;?>" method="post" id="form"> <input type="hidden" name="doctype" value="<?php echo $form_doctype;?>" /> <input type="hidden" name="quotepid" value="<?php echo $quotepid;?>" />  <?php if($isfirst) { ?> <div class="form-group">  <select class="custom-select mr-1 w-auto" name="fid"> <?php foreach ($forumlist_allowthread as $forum) { ?> <option value="<?php echo $forum['fid']; ?>"><?php echo $forum['name']; ?></option> <?php } ?> </select>  </div>  <div class="form-group"> <input type="text" class="form-control" placeholder="<?php echo lang('subject');?>" name="subject" value="<?php echo $form_subject;?>" id="subject"> </div>  <?php } ?> <div class="form-group"> <textarea class="form-control" placeholder="<?php echo lang('message');?>" name="message" id="message" style="height: 300px;"><?php echo $form_message;?></textarea> </div>  <div class="d-flex justify-content-between"> <div class="attachlist_parent"> <a class="small text-left" href="javascript:void(0)"> <label class="addattach" id="addattach"> <i class="icon-folder-open-o"></i> <?php echo lang('add_attach');?> <input type="file" multiple="multiple" class="invisible" /> </label> </a> <?php echo post_file_list_html($filelist, TRUE);?>  </div> <div class="text-right"> <button type="submit" class="btn btn-primary" id="submit" data-loading-text="<?php echo lang('submiting');?>..."> <?php echo $form_submit_txt;?> </button>  </div> </div>  </form> </div> </div> </div> </div>  <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?> <script> var jform = $('#form'); var jsubmit = $('#submit'); var jfid = jform.find('select[name="fid"]'); jform.on('submit', function() { jform.reset(); jsubmit.button('loading'); var postdata = jform.serialize(); $.xpost(jform.attr('action'), postdata, function(code, message) { if(code == 0) { $.alert(message); jsubmit.button(message).delay(1000).location('<?php echo $location;?>'); } else if(xn.is_number(code)) { alert(message); jsubmit.button('reset'); } else { $.alert(message); //jform.find('[name="'+code+'"]').alert(message).focus(); jsubmit.button('reset'); } }); return false; }); var jattachparent = $('.attachlist_parent'); $('#addattach').on('change', function(e) { var files = xn.get_files_from_event(e); if (!files) return; // 并发下会服务端 session 写入会有问题，由客户端控制改为串行 if (!jattachparent.find('.attachlist').length) { jattachparent.append('<fieldset class="fieldset"><legend><?php echo lang('uploaded_attach');?></legend><ul class="attachlist"><ul></fieldset>'); } var jprogress = jattachparent.find('.progress'); if(!jprogress.length) { jprogress = $('<div class="progress"><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div>').appendTo(jattachparent); } jprogressbar = jprogress.find('.progress-bar'); $.each_sync(files, function(i, callback) { var file = files[i]; xn.upload_file(file, xn.url('attach-create'), {is_image: 0}, function(code, message) { if (code != 0) return $.alert(message); // 把文件 append 到附件列表 var url = message.url; var filetype = message.filetype; var aid = message.aid; $('.attachlist').append('<li aid="' + aid + '"><a href="' + message.url + '" target="_blank"><i class="icon filetype ' + filetype + '"></i> ' + message.orgfilename + '</a> <a href="javascript:void(0);" class="delete ml-2"><i class="icon-remove"></i> <?php echo lang('delete');?></a></li>'); callback(); jprogress.hide(); }, function(percent) { percent = xn.intval(percent); jprogressbar.css('width', percent+'%'); jprogressbar.text(percent+'%'); jprogress.show(); console.log('progress:'+ percent); }); }); }); // 删除附件 jattachparent.on('click', 'a.delete', function() { var jlink = $(this); var jli = jlink.parents('li'); var aid = jli.attr('aid'); if(!window.confirm(lang.confirm_delete)) return false; $.xpost(xn.url('attach-delete-'+aid), function(code, message) { if(code != 0) return $.alert(message); jlink.parent().remove(); }); return false; }) jform.find('[name="fid"]').checked(<?php echo $fid;?>); $('li[data-active="fid-<?php echo $fid;?>"]').addClass('active'); </script>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建居中的卡片容器 - 包含表单元素：版块选择（仅主题帖）、标题输入（仅主题帖）、内容输入、附件上传 - 引入页脚文件 `footer.inc.htm` 2. **表单逻辑**： - 根据不同的路由和动作设置不同的表单参数 - 支持主题帖创建、回帖创建和帖子编辑三种场景 - 处理附件上传和删除 3. **JavaScript功能**： - 处理表单提交 - 处理附件上传，包括进度显示 - 处理附件删除 - 为当前板块的导航菜单项添加高亮样式 4. **响应式设计**：使用Bootstrap的网格系统（`col-lg-10 mx-auto`）实现响应式布局，确保在不同屏幕尺寸下都能居中显示。 5. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### user\_login.htm **【修改内容简介】** 配合新的header样式进行外观微调。 **【本文件内的变量】** - `$referer`：string类型；登录后跳转的URL **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?>  <div class="row"> <div class="col-lg-6 mx-auto"> <div class="card"> <div class="card-header"> <?php echo lang('user_login');?>  </div> <div class="card-body ajax_modal_body"> <form action="<?php echo url('user-login');?>" method="post" id="form"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-user icon-fw"></i></span> </div> <input type="text" class="form-control" placeholder="<?php echo lang('email');?> / <?php echo lang('username');?>" id="email" name="email"> <div class="invalid-feedback"></div> </div>  <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-lock icon-fw"></i></span> </div> <input type="password" class="form-control" placeholder="<?php echo lang('password');?>" id="password" name="password"> <div class="invalid-feedback"></div> </div>  <div class="form-group"> <button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="<?php echo lang('submiting');?>..."><?php echo lang('login');?></button> </div>  <div class="media"> <div>  </div> <div class="media-body text-right">  <a href="<?php echo url('user-create');?>" class="text-muted"><small><?php echo lang('user_create');?></small></a> <?php if(!empty($conf['user_resetpw_on'])) { ?> <a href="<?php echo url('user-resetpw');?>" class="text-muted ml-3"><small><?php echo lang('forgot_pw');?></small></a> <?php } ?>  </div> </div> </form> </div> </div>  </div> </div>  <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?> <script src="<?php echo $conf['view_url'];?>js/md5.js"></script> <script> var jform = $('#form'); var jsubmit = $('#submit'); var jemail = $('#email'); var jpassword = $('#password'); var referer = '<?php echo $referer;?>'; jform.on('submit', function() { jform.reset(); jsubmit.button('loading'); var postdata = jform.serializeObject(); postdata.password = $.md5(postdata.password); $.xpost(jform.attr('action'), postdata, function(code, message) { if(code == 0) { jsubmit.button(message).delay(1000).location(referer); } else if(xn.is_number(code)) { alert(message); jsubmit.button('reset'); } else { jform.find('[name="'+code+'"]').alert(message).focus(); jsubmit.button('reset'); } /* if(code == 0) { jsubmit.button(message).delay(1000).location(referer); } else if(code == 'email') { jemail.alert(message).focus(); jsubmit.button('reset'); } else if(code == 'password') { jpassword.alert(message).focus(); jsubmit.button('reset'); } else { alert(message); jsubmit.button('reset'); } */ }); return false; }); </script>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建居中的卡片容器 - 包含登录表单：用户名/邮箱输入、密码输入、登录按钮 - 包含注册和忘记密码链接 - 引入页脚文件 `footer.inc.htm` 2. **表单安全**：使用MD5加密密码后提交，提高安全性。 3. **JavaScript功能**： - 处理表单提交 - 显示加载状态 - 处理错误信息 - 登录成功后跳转到指定页面 4. **响应式设计**：使用Bootstrap的网格系统（`col-lg-6 mx-auto`）实现响应式布局，确保在不同屏幕尺寸下都能居中显示。 5. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### user\_create.htm **【修改内容简介】** 配合新的header样式进行外观微调。 **【本文件内的变量】** - `$conf`：array类型；论坛配置信息 **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?>  <div class="row"> <div class="col-lg-6 mx-auto">  <div class="card"> <div class="card-header"> <?php echo lang('user_create');?>  </div> <div class="card-body"> <form action="<?php echo url('user-create');?>" method="post" id="form"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-envelope icon-fw"></i></span> </div> <input type="email" class="form-control" placeholder="<?php echo lang('email');?>" name="email" id="email" required> </div>  <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-user icon-fw"></i></span> </div> <input type="text" class="form-control" placeholder="<?php echo lang('username');?>" name="username" id="username"> </div>  <div class="media"> <div class="media-body"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-lock icon-fw"></i></span> </div> <input type="password" class="form-control" placeholder="<?php echo lang('password');?>" name="password" id="password"> </div> </div> </div>  <?php if($conf['user_create_email_on']) { ?> <div class="media"> <div class="media-body"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-barcode icon-fw"></i></span> </div> <input type="text" class="form-control" placeholder="<?php echo lang('verify_code');?>" name="code" id="code"> </div> </div> <div class="align-self-center ml-1"> <button type="submit" class="btn btn-primary btn-sm ml-3 form-group" id="sendcode" data-loading-text="<?php echo lang('sending');?>..." action="<?php echo url('user-send_code-user_create');?>"><?php echo lang('send_verify_code');?></button> </div> </div> <?php } ?> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="<?php echo lang('submiting');?>..." <?php if($conf['user_create_email_on']) { ?>disabled<?php } ?>><?php echo lang('next_step');?></button> </div>  <div class="media"> <div>  </div> <div class="media-body text-right">  <a href="<?php echo url('user-login');?>" class="text-muted"><small><?php echo lang('user_login');?></small></a> <?php if(!empty($conf['user_resetpw_on'])) { ?> <a href="<?php echo url('user-resetpw');?>" class="text-muted ml-3"><small><?php echo lang('forgot_pw');?></small></a> <?php } ?>  </div> </div> </form> </div> </div>  </div> </div>  <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?> <script src="<?php echo $conf['view_url'];?>js/md5.js"></script> <script> var jform = $('#form'); var jsubmit = $('#submit'); var jsend = $('#sendcode'); var referer = '<?php echo http_referer();?>'; jsend.on('click', function() { jform.reset(); jsend.button('loading'); var postdata = jform.serialize(); $.xpost(jsend.attr('action'), postdata, function(code, message) { if(code == 0) { $('#code').focus(); var t = 60; // 倒计时 jsend.button('<?php echo lang('user_send_sucessfully');?> 60 '); jsubmit.button('reset'); // 倒计时，重新发送 var handler = setInterval(function() { jsend.button('<?php echo lang('user_send_sucessfully');?> '+(--t)+' '); if(t == 0) { clearInterval(handler); jsend.button('reset'); } }, 1000); } else if(code < 0) { $.alert(message, -1); jsend.button('reset'); } else { jform.find('[name="'+code+'"]').alert(message).focus(); jsend.button('reset'); } }); return false; }); jform.on('submit', function() { var postdata = jform.serializeObject(); jsubmit.button('loading'); postdata.password = $.md5(postdata.password); $.xpost(jform.attr('action'), postdata, function(code, message) { if(code == 0) { jsubmit.button(message).delay(1000).location(referer); } else if(xn.is_number(code)) { alert(message); jsubmit.button('reset'); } else { jform.find('[name="'+code+'"]').alert(message).focus(); jsubmit.button('reset'); } }); return false; }); </script>  ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建居中的卡片容器 - 包含注册表单：邮箱输入、用户名输入、密码输入 - 包含验证码输入（如果启用了邮箱验证） - 包含登录和忘记密码链接 - 引入页脚文件 `footer.inc.htm` 2. **表单安全**：使用MD5加密密码后提交，提高安全性。 3. **JavaScript功能**： - 处理表单提交 - 处理验证码发送和倒计时 - 显示加载状态 - 处理错误信息 - 注册成功后跳转到指定页面 4. **响应式设计**：使用Bootstrap的网格系统（`col-lg-6 mx-auto`）实现响应式布局，确保在不同屏幕尺寸下都能居中显示。 5. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### user\_resetpw\.htm **【修改内容简介】** 配合新的header样式进行外观微调。 **【本文件内的变量】** - `$conf`：array类型；论坛配置信息 **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?> <div class="row"> <div class="col-lg-6 mx-auto"> <div class="card"> <div class="card-header"> <?php echo lang('user_resetpw');?> </div> <div class="card-body"> <form action="<?php echo url('user-resetpw');?>" method="post" id="form">  <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-envelope icon-fw"></i></span> </div> <input type="text" class="form-control" placeholder="<?php echo lang('email');?>" name="email" id="email"> <div class="invalid-feedback"></div> </div>   <div class="media"> <div class="media-body"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-key icon-fw"></i></span> </div> <input type="text" class="form-control" placeholder="<?php echo lang('verify_code');?>" name="code" id="code"> </div> </div> <div class="ml-1 mt-1"> <button type="submit" class="btn btn-primary btn-sm ml-3" id="send" data-loading-text="<?php echo lang('sending');?>..." action="<?php echo url('user-send_code-user_resetpw');?>"><?php echo lang('send_verify_code');?></button> </div> </div>  <button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="<?php echo lang('submiting');?>..." <?php if($conf['user_create_email_on']) { ?>disabled<?php } ?>><?php echo lang('next_step');?></button> </form> </div> </div> </div> </div> <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?> <script> var jform = $('#form'); var jsubmit = $('#submit'); var jsend = $('#send'); jsend.on('click', function() { jform.reset(); jsend.button('loading'); var postdata = jform.serialize(); $.xpost(jsend.attr('action'), postdata, function(code, message) { if(code == 0) { $.alert(message); $('#code').focus(); var t = 60; // 倒计时 jsend.button('<?php echo lang('user_send_sucessfully');?> 60 '); jsubmit.button('reset'); // 倒计时，重新发送 var handler = setInterval(function() { jsend.button('<?php echo lang('user_send_sucessfully');?> '+(--t)+' '); if(t == 0) { clearInterval(handler); jsend.button('reset'); } }, 1000); } else if(code < 0) { $.alert(message); jsend.button('reset'); } else { jform.find('[name="'+code+'"]').alert(message).focus(); jsend.button('reset'); } }); return false; }); jform.on('submit', function() { jform.reset(); jsubmit.button('loading'); var postdata = jform.serialize(); $.xpost(jform.attr('action'), postdata, function(code, message) { if(code == 0) { $.alert(message); jsubmit.button(message).delay(1000).location(xn.url('user-resetpw_complete')); } else if(xn.is_number(code)) { alert(message); jsubmit.button('reset'); } else { jform.find('[name="'+code+'"]').alert(message).focus(); jsubmit.button('reset'); } }); return false; }); </script> ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建居中的卡片容器 - 包含密码重置表单：邮箱输入、验证码输入、发送验证码按钮 - 引入页脚文件 `footer.inc.htm` 2. **JavaScript功能**： - 处理验证码发送和倒计时 - 处理表单提交 - 显示加载状态 - 处理错误信息 - 提交成功后跳转到密码重置完成页面 3. **响应式设计**：使用Bootstrap的网格系统（`col-lg-6 mx-auto`）实现响应式布局，确保在不同屏幕尺寸下都能居中显示。 4. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### user\_resetpw\_complete.htm **【修改内容简介】** 配合新的header样式进行外观微调。 **【本文件内的变量】** - `$email`：string类型；用户邮箱 - `$conf`：array类型；论坛配置信息 **【代码实现】** ```html <?php include _include(APP_PATH.'view/htm/header.inc.htm');?> <div class="row"> <div class="col-lg-6 mx-auto"> <div class="card"> <div class="card-header"><?php echo lang('user_resetpw');?></div>  <div class="card-body"> <form action="<?php echo url('user-resetpw_complete');?>" method="post" id="form"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-envelope icon-fw"></i></span> </div> <input type="text" class="form-control" placeholder="<?php echo lang('email');?>" name="email" id="email" value="<?php echo $email;?>" disabled> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-lock icon-fw"></i></span> </div> <input type="password" class="form-control" placeholder="<?php echo lang('password_new');?>" id="password" name="password"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="icon icon-lock icon-fw"></i></span> </div> <input type="password" class="form-control" placeholder="<?php echo lang('password_new_repeat');?>" id="password2"> </div> <p> <button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="<?php echo lang('submiting');?>..." <?php if(!$conf['user_resetpw_on']) { ?>disabled<?php } ?>><?php echo lang('next_step');?></button> </p> </form> </div> </div> </div> </div> <?php include _include(APP_PATH.'view/htm/footer.inc.htm');?> <script src="<?php echo $conf['view_url'];?>js/md5.js"></script> <script> var jform = $('#form'); var jsubmit = $('#submit'); var jpassword = $('#password'); var jpassword2 = $('#password2'); jform.on('submit', function() { jform.reset(); jsubmit.button('loading'); if(!jpassword.val()) { jpassword.focus(); $.alert('<?php echo lang('please_input_password');?>'); jsubmit.button('reset'); return false; } if(jpassword.val() != jpassword2.val()) { jpassword2.focus(); $.alert('<?php echo lang('repeat_password_incorrect');?>'); jsubmit.button('reset'); return false; } var postdata = jform.serializeObject(); postdata.password = $.md5(postdata.password); $.xpost(jform.attr('action'), postdata, function(code, message) { if(code == 0) { $.alert(message); jsubmit.button(message).delay(1000).location(xn.url('user-login')); } else if(xn.is_number(code)) { alert(message); jsubmit.button('reset'); } else { jform.find('[name="'+code+'"]').alert(message).focus(); jsubmit.button('reset'); } }); return false; }); </script> ``` **【代码解释】** 1. **页面结构**： - 引入头部文件 `header.inc.htm` - 创建居中的卡片容器 - 包含密码重置完成表单：邮箱显示（禁用）、新密码输入、确认新密码输入 - 引入页脚文件 `footer.inc.htm` 2. **表单验证**： - 检查密码是否为空 - 检查两次输入的密码是否一致 3. **表单安全**：使用MD5加密密码后提交，提高安全性。 4. **JavaScript功能**： - 处理表单提交 - 显示加载状态 - 处理错误信息 - 提交成功后跳转到登录页面 5. **响应式设计**：使用Bootstrap的网格系统（`col-lg-6 mx-auto`）实现响应式布局，确保在不同屏幕尺寸下都能居中显示。 6. **Hook支持**：在关键位置添加了Hook点，方便插件进行扩展。 ##### user\_thread.htm **【修改内容简介】** 配合thread\_list.inc.htm更改了展示方式。 **【本文件内的变量】** - `$threadlist`：array类型；帖子列表，见`forum.htm`中的`$threadlist` ### 注意事项原版Xiuno BBS喜欢这样的写法： ```html <a href="<?php echo url("thread-$_thread[tid]"); ?>">...</a> ``` 我完全不赞成你这样写。因为： - 使用双引号包含PHP变量（特别是`$_thread[tid]`这种形式）可能会导致解析问题或被误解为常量而非数组键名 - 虽然在双引号里面这样不会出错，但万一你没有使用双引号呢？我希望你使用更规范的方式写，例如： ```html <a href="<?php echo url('thread-' . $_thread['tid']); ?>">...</a> ``` 因为： - 明确使用单引号包裹字符串字面量，并且正确引用数组元素（如$\_thread\['tid']），这有助于避免因误解或误用而导致的错误。 *** 我个人在整个主题中使用了`<?=`而不是`<?php echo`是有其合理性的，因为： - 简洁：`<?=`是`<?php echo`的简写形式，它可以使你的代码更加**简洁**和易于阅读。例如，`<?= $hello ?>`比`<?php echo $hello; ?>`要简洁得多。 - 效率：虽然从性能角度来看，使用`<?=`与`<?php echo`之间**完全没有差异**，但是你仅需敲击五次键盘（`shift`, `<`, `?`, `(松开shift)`, `=`, `空格`）而不是十次，**间接提升效率**。（假设你的编辑器能智能帮你补全另一半，我的VSCode可以） - 无需担心兼容性：自PHP 5.4.0起，`<?=`标记总是可用的，无论`php.ini`中的`short_open_tag`设置如何。这意味着**你可以安全地使用这种简写方式**而不用担心服务器配置问题。 - 虽然`<?（不带 =) ` 短标签是被废弃了，但`<?=`没有废弃，后者实为 **PHP 社区官方推荐的现代语法**。 > 仅当需兼容 PHP ≤5.3 的史前环境（当前全球占比 <0.1%）时，`<?=` 才可能因 `short_open_tag=Off` 失效，但此情况在 2023 年后可忽略不计。 ## 恭喜你！恭喜你已经迈出了创建个性化Xiuno BBS主题的重要一步！通过这份详尽的指南，你不仅学习了如何利用Overwrite机制来定制你的BBS站点外观，还了解了如何确保这些改动与现有的插件和功能兼容。希望你能将这里学到的知识应用到实践中，创造出既美观又实用的在线社区。不要害怕遇到挑战，每一个难题都是提升技能的机会。当你最终完成这个项目时，你会发现所有的努力都是值得的。不过，记住，一个好的社区不仅仅在于它的外观，更在于它能为成员**提供有价值的内容**和友好的交流环境。如果你在开发过程中遇到了任何问题或需要进一步的帮助，记得身边有一个可靠的伙伴——AI助手随时准备为你解答疑惑、提供建议。祝你在编程之旅中一切顺利，享受构建自己独特“数字空间”的乐趣吧！