Flatboard theme mechanism explained [WIP But mostly done]
Flatboard theme mechanism explained [WIP But mostly done]
Tillreetree@fc7e1f5a Saturday 10th June 2023, 02:46:34The following is still being written, using Markdown syntax.
If I have time, I will continue to update and write about each of the theme files.
Look at the crazy indentations!
If I have time, I will continue to update and write about each of the theme files.
# 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.
## Minimum requirements for the production of themes:
- Make a copy of the Bootstrap theme
- Modify header.tpl.php, main.tpl.php, footer.tpl.php
## 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 (it's different from `$cur`)
- 'subtitle': page name
- 'content': page content
- Start the output buffer at the same time
2. **The page itself** such as `index.php`,`view.php`, etc
- Call the corresponding template file, like `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`😽*backend (config, settings) page**- include `dashboard.tpl.php`
- **dashboard.tpl.php** This page includes new CSS. Here you can include CSS for your theme without adding additional CSS. Include the following:
- WIP
- `Other cases`😽*foreground page**- include `main.tpl.php`
- **main.tpl.php** *Here comes the big deal!* This file handles most frontend 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 tag
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>'
## Template files quick rundown
| File name | purpose | where to call (category) | where to call (file) | which files to call | how to output | available primary variables (etc means there are more secondary variables) | Remarks | |
|----------------------------|-------------------------------------------------------|--------------------------|----------------------|-------------------------------|------------------|-------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|---|
| add_topic.tpl.php | Add topic | Unknown | | | | | | |
| banned.tpl.php | Banned Alert Page | Core | lib/User.lib.php | | Direct | | | |
| blog.tpl.php | Blog page | Core | blog.php | | $out['content'] | $topicEntry，$tag，$author，$content，$forumEntry，$forumID，etc | | |
| categories.tpl.php | Forum section list | Theme | header.tpl.php | | echo | $forumEntry ，$key，$forum，etc | | |
| dashboard.tpl.php | Backend Dashboard page | Core | footer.php | | Direct | $assets ，$notes，$lang，$config，$out，$cur | | |
| feed.tpl.php | RSS Feed Page | Core | footer.php | | Direct | $config ，$out | | |
| footer.tpl.php | bottom of website | Theme | main.tpl.php | select_topic.tpl.php | Direct | $lang，$config，$out | | |
| forum.tpl.php | Forum section overview page | Core | index.php | | $out['content'] | $forumEntry，$controlStr，$privateforums，$topic，$topicEntry，$lastTopic，$replyEntry，$lastReply，etc | | |
| header.tpl.php | Head of website | Theme | main.tpl.php | categories.tpl.php | Direct | $destination，$css，$config，$out，$lang，$cur，etc | | |
| lastposts.tpl.php | Home (Latest Topic Page) (Topic List) | Core | index.php | | $out['content'] | $lang，$tag，$tagReply，$replyEntry，$topicEntry，$forumEntry，$topic，$reply，$tagMix，$privateforums | | |
| login.tpl.php | login page | Core | footer.php | | Direct | $lang，$config，$out | | |
| main.tpl.php | Website main body part | Core | footer.php | header.tpl.php，footer.tpl.php | Direct | $gPage，$config，$cur，$forumEntry，$out | | |
| private_viewForum.tpl.php | Alert page for private forums | Unknown | | | $out['content'] | $topic，$tag，$topicEntry，$forumEntry，$config，$lastedited | | |
| replyFormCollapse.tpl.php | reply form | Core | view.php | | $out['content'] | $user，$username，$h1，$h2，$d，$s，$file_path，$file_html，$dots，$pic，$identity，$avatar，$welcomeBack，$sessionTrip，$sessionMail | | |
| search.tpl.php | Search page | Core | search.php | | $out['content'] | $tagsOption | | |
| select_topic.tpl.php | Select witch forum to post (modal) | Core | footer.php | | Direct | $forums，$forumEntry，etc | | |
| sidebar.tpl.php | Website sidebar | Theme | main.tpl.php | categories.tpl.php | Direct | $sessionTrip，$cur，$lang，etc | | |
| viewForum.tpl.php | Viewing forum (list of topics) | Core | view.php | | $out['content'] | $topic，$topicEntry ，$tag，$forumEntry，$lastReply，$lastedited，etc | | |
| viewReply.tpl.php | View replies (reply list) (including publisher modal) | Core | view.php | | $out['content'] | $reply，$replyEntry，$lastReplyEdited，$topicEntry，$report | | |
| viewSuggestedTopic.tpl.php | View recommended topics (list of topics) | Core | view.php | | $out['content'] | $topic，$topicEntry ，$tagSuggest，$forumEntry，$lastReply，$lastedited，etc | The tag variable becomes tagSuggest | |
| viewTopic.tpl.php | View topic (including publisher modal) | Core | view.php | | $out['content'] | $topic，$topicEntry ，$tag，$forumEntry，$lastedited，$report，etc | In the source code it looks like this: require THEME_DIR . $config['theme'] . DS . $cur . '.tpl.php'; | |
| | | | | | | | | |
| | | | | | | | | |
Look at the crazy indentations!
Last modified by Tillreetree@fc7e1f5a on Friday 16th June 2023, 02:36:00
Replies 15
I have to say that this template mechanism is complicated and confusing. From head (header.php) to toe (footer.php), to anything in between ($out), nested layer by layer, are we making lasagna?
Last modified by Tillreetree@fc7e1f5a on Saturday 10th June 2023, 03:34:00
Haha, I like lasagna, that is how my brain feels when I look at someone else's work.
Software engineer, creates plugins for Flatboard, checks source codes, and answers any software errors questions and contributes on the GitHub page as well
Flatboard is however based on the best known css framework... Bootstrap
Some exemples => https://startbootstrap.com/themes
Some exemples => https://startbootstrap.com/themes
Last modified by Fred on Saturday 10th June 2023, 22:01:00
- Before ask a question, read the documentation.
- 🎉 Featured as #1 product of the day on Product Hunt
- Please like in alternativeto.net 👍🏻
- ╰☆╮Flatboard╰☆╮ is a open source and community contributions are essential to project success!
- <TextField>, my new CMS project designed by a passionate developer, for developers!
- My last project Fast⚡︎CMS, a Flat-File cms.
- I am currently busy 😫.
Minimum requirements for making themes:
- Make a copy of the Bootstrap theme
- Modify header.tpl.php, main.tpl.php, footer.tpl.php
- As for the other files, as long as you are still using the Bootstrap framework, you can leave them untouched
Last modified by Tillreetree@fc7e1f5a on Sunday 11th June 2023, 02:26:00
Suggested Topics
4082f536
started Edit / Delete Rules?
General Questions
Fred
started Ask your signature or avatar
Open Bar
AlexanderLiebrecht
started solved Something went wrong when updating
General Questions
Fan#17562
started solved Modify own post?
General Questions