# Flatboard主题机制explained
Flatboard的主题机制比Hook机制更加复杂。我也不知道Fred为什么要这么写。
## Flatboard是怎么输出HTML的
> 以下内容基于默认的“Bootstrap”主题编写。省略了一些Hook。
绝大多数页面（如`index.php` `view.php` `edit.php`等）引入了`header.php`和`footer.php`，顺序为：
1. **header.php**
- *调用`init.php` 加载必要的常量、变量、类库等。*
- 定义了`$out`数组，包含了：
- `self`：当前页面ID
- `subtitle`：页面名称
- `content`：页面内容
- 同时启动输出缓冲区
- 之后再也没管这个输出缓冲区
2. **页面本身**如`index.php`、`view.php`等
- 调用对应的模板文件，如`lastposts.tpl.php`、`viewForum.tpl.php`等
- 还好，这些模板文件相对本文所述的这几个模板文件更易懂，就不再赘述了。
3. **footer.php**
- 在这里会判断`$out['self']`是什么值，决定调用什么基础模板
- `feed`：**RSS订阅**- 调用`feed.tpl.php`
- **feed.tpl.php**
- 在这里直接输出XML
- `auth`：**登录页面**- 调用`login.tpl.php`
- **login.tpl.php**这个页面没有用到`header.tpl.php`和`footer.tpl.php`，所以得重新写HTML。包括以下内容：
1. html标签，需要写明语言`lang="<?php echo $config['lang']?>"`
1. head标签
1. meta标签，注意description为`<?php echo Util::Description()?>`
2. title标签，内容为`<?php echo $config['title']?> - <?php echo $out['subtitle']?>`，如果觉得有必要，可以对调两个变量
3. base标签，href为`<?php echo $out['baseURL']?>`
4. CSS样式表链接
5. favicon链接
6. ATOM Feeds链接，包含主题和回复
2. body标签
1. a标签，用于回到主页
- img标签，用于显示网站LOGO
2. h1标签，内容为`<?php echo $out['subtitle']?>`
3. section标签
- 登录表单
- `config`：**后台设置页面**- 调用`dashboard.tpl.php`
- **dashboard.tpl.php**这个页面引入了新的CSS。在这里可以引入主题的CSS而不用额外添加CSS。包括以下内容：
- `其他情况`：**前台页面**- 调用`main.tpl.php`
- **main.tpl.php***重头戏来啦！*这个文件掌管大多数前台可见的页面。包括以下内容：
1. 首先调用`header.tpl.php`
- **header.tpl.php**输出页面头部内容。包括以下内容：
1. html标签，需要写明语言`lang="<?php echo $config['lang']?>"`
1. head标签
1. meta标签，注意description为`<?php echo Util::Description()?>`
2. title标签，内容为`<?php echo $config['title']?> - <?php echo $out['subtitle']?>`，如果觉得有必要，可以对调两个变量
3. base标签，href为`<?php echo $out['baseURL']?>`
4. CSS样式表链接
5. favicon链接
6. ATOM Feeds链接，包含主题和回复
2. body标签
1. 导航栏（header标签）
- 左侧（导航栏链接）
- 网站名称
- 博客
- 论坛
- 搜索
- 插件菜单钩子
- 右侧（用户相关链接）
- 如果是“管理员/工作人员”
- 配置/登出
- 如果是“普通用户”
- 登录/登出
2. 登录模态框（仅在未登录时显示），内含登录表单
2. *jumbotron区域* `<div class="jumbotron">`
- 判断“现在是否在主页，并且填写了announcement `if (!$config['announcement']=='' && $cur=='home')`”：
- 如果为true，则输出announcement的内容。
- `</div>`
- 判断“现在是否在浏览论坛版块页面 `if ($cur ==='viewForum')`”：
- 如果为true，则输出板块图标、板块名称、板块介绍等信息。
- `</div>`
3. *页面主体区域* `<main role="main">`
- 判断“现在是否不在浏览话题或博客或普通页面`if ($cur !=='viewTopic' && $cur !=='blog' && $cur !==$gPage)`”
- 如果为true，则调用`sidebar.tpl.php`
- **sidebar.tpl.php**包括以下内容：
1. aside标签
1. 判断“如果登录了的话`if($sessionTrip!='')`”：
- 如果为true，则再判断“现在是否在访问论坛版块页面 if($cur=='viewForum')”
- 如果为true，则输出“发帖按钮”
- 否则（在其他页面），输出“发帖弹窗按钮”
- 否则，输出“登录弹窗按钮”
2. 论坛版块列表，ul标签，引入`categories.tpl.php`
- **categories.tpl.php**包括以下内容：
1. li标签
- 论坛板块链接，包含链接、图标、名称
3. 论坛统计数据
1. 发帖数量
2. 回复数量
3. 前两个加起来的总数量
4. 判断“常量TIMESTAMP是否存在`if (TIMESTAMP)`”
- 如果为true，则显示加载时长
4. RSS订阅链接
- **输出`$out['content']`里的内容**（但不是所有的东西都要放进`$out['content']`里哦）
- `</main>`
4. 最后调用了`footer.tpl.php`
- **footer.tpl.php**包括以下内容：
1. footer元素
- 页脚自定义文字`<?php echo $config['footer_text']?> | <?php echo $lang['powered']?>`
- Flatboard版本号
2. 调用`select_topic.tpl.php`
- **select_topic.tpl.php**包括以下内容：
1. 模态框
1. 下拉列表，用于选择要添加主题的论坛
1. 下拉列表的第一个选项为“论坛”，其他选项为论坛名称
2. 当选择一个论坛时，页面将跳转到“add.php/topic/论坛ID”
3. 引入JS文件
4. `</body>`
5. `</html>`
--------------------
# Flatboard theme mechanism explained
The theme mechanism of Flatboard is more complex than the hook mechanism. I don't know why Fred wrote this in this way.
## How does Flatboard output HTML
> The following is based on the default "Bootstrap" theme. Some hooks are omitted.
Most pages (such as`index.php`,`view.php`,`edit.php`, etc.) included `header.php` and `footer.php` in order:
1. **header.php**
- * Call`init.php`to load necessary constants, variables, class libraries, etc. *
- Defines the '$ out 'array, which contains:
- 'self': current page ID
- 'subtitle': page name
- 'content': page content
- Start the output buffer at the same time
- never mind this output buffer again
2. **The page itself**such as'index.php ',' view.php ', etc
- Call the corresponding template file, such as'lastposts.tpl.php ',' viewForum.tpl.php ', etc
- Fortunately, these template files are easier to understand than the template files described in this article, so I won't go into details.
3. **footer.php**
- Here it will determine what value `$out ['self']` is and decide what base template to call
- `feed`:**RSS feeds**- include `feed.tpl.php`
- **feed.tpl.php**
- Output XML directly
- `auth`:**login page**- include `login.tpl.php`
- **login.tpl.php**This page does not use'header.tpl.php 'and'footer.tpl.php', so the HTML has to be rewritten. Include the following:
1. html tag, you need to state the language `lang="<?php echo $config ['lang']?>`
1. head tag
1. meta tags, note that the description is `<?php echo Util ::De script ion ()?>`
2. title tag, the content is `<?php echo $config ['title ']?> - <?php echo $out [' subtitle ']?>`, you can swap the two variables if necessary
3. base tag, href is `<?php echo $out ['baseURL']?>`
4. CSS stylesheet links
5. favicon links
6. ATOM Feeds links with topics and replies
2. body tag
1.A tag (hyperlink) for returning to the home page
- img tag, used to display website LOGO
2. h1 tag with the content '<?php echo $out [' subtitle ']?>'
3. section tag
- Login form
- `config`:**background settings page**- include `dashboard.tpl.php`
- **dashboard.tpl.php** This page introduces new CSS. Here you can introduce CSS for themes without adding additional CSS. Include the following:
- `Other cases`:**foreground page**- include `main.tpl.php`
- **main.tpl.php*** Here comes the big deal! * This file handles most foreground visible pages. Includes the following:
1. First include `header.tpl.php`
- **header.tpl.php**Output page header content. Include the following:
1. html tag, you need to state the language'lang = "<?php echo $config ['lang']?> '
1. head label
1. meta tag, note that the description is `<?php echo Util ::De script ion ()?>`
2. title tag, the content is `<?php echo $config ['title ']?> - <?php echo $out ['subtitle']?>`, if necessary, you can swap the two variables
3. base tag, href is `<?php echo $out ['baseURL']?>`
4. CSS stylesheet links
5. favicon links
6. ATOM Feeds links with topics and replies
2. body tag
1. Navigation bar (header tag)
- Left (navigation link)
- website name
- Blog
- Forum
- search
- Plugin menu hook
- Right (user related links)
- If it is "admin/worker"
- Config/Logout
- If it is "normal user"
- Login/Logout
2. Login modal box (only displayed when not logged in), containing the login form
2. *jumbotron area* `<div class = "jumbotron">`
- Determine "whether it is now on the homepage, and fill in the announcement `if (! $config ['announcement ']=='' && $ cur ==' home ')`:
- If true, output the contents of the announcement.
- '</div>'
- Determine "whether you are currently browsing the forum section page'if ($cur === 'viewForum') '":
- If true, output information such as plate icon, plate name, plate introduction, etc.
- '</div>'
3. *Page body area* `<main role="main">`
- Determine "if you are not currently browsing topics or blogs or normal pages `if ($cur! == 'viewTopic' & & $cur! == 'blog' & & $cur! == $gPage)` "
- If true, include `sidebar.tpl.php`
- **sidebar.tpl.php** includes the following:
1. aside tag
1. Determine "if logged in `if ($sessionTrip !='')`"：
- If true, then determine "whether you are currently visiting the forum section page `if ($cur == 'viewForum')` "
- if true, output "Add Topic button"
- Otherwise (on other pages), output "Add Topic modal button"
- Otherwise, output "Login modal button"
2. Forum section list, ul tag, include `categorys.tpl.php`
- **categorys.tpl.php** includes the following:
1. li tag
- Forum section link, including link, icon, name
3. Forum Stats
1. Number of posts
2. Number of replies
3. The total number of the first two combined
4. Determine "Whether the constant TIMESTAMP exists`if (TIMESTAMP) `"
- If true, display the load time
4. RSS feed link
- **Output the content in `$out ['content']`** (but not everything must be put in `$out ['content']`)
- '</main>'
4. Finally include `footer.tpl.php`
- **footer.tpl.php** includes the following:
1. footer element
- footer custom text `<?php echo $config['footer_text']?> | <?php echo $lang['powered']?> `
- Flatboard version number
2. Call `select_topic.tpl.php.`
- **select_topic tpl.php** includes the following:
1. Modal box
1. Drop-down list to select the forum to add a topic to
1. The first option in the drop-down list is "Forum", and the other options are the forum name
2. When selecting a forum, the page will jump to "add.php/topic/forum ID"
3. Import JS files
4. `</body>'
5. `</html>'