Difference between revisions of "Template:ContentTemplate"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | <!-- Based on | + | # Template\:ContentTemplateModern |
| − | < | + | |
| − | + | A responsive, modern, div-based replacement for the table-layout content page template. | |
| − | + | ||
| − | + | --- | |
| − | + | ||
| − | {{SectionTemplate|title={{{sections_title}}}|content={{{sections_content}}}}} | + | ## Template Source (paste this on the template page) |
| − | + | ||
| − | + | ```wikitext | |
| − | {{SectionTemplate|title={{{about_title}}}|content={{{about_content}}}}} | + | <!-- Modern, responsive content layout (div + flexbox) --> |
| − | {{SectionTemplate|title={{{featured_title}}}|content={{{featured_content}}}}} | + | <!-- Based on Paradox-style layout, but using semantic wrappers and CSS classes --> |
| − | {{SectionTemplate|title={{{news_title}}}|content={{{news_content}}}}} | + | |
| − | | | + | {{HeaderTemplate|welcome={{{welcome|}}}|blurb={{{blurb|}}}}} |
| − | {{{ | + | |
| − | |} | + | <div class="cpage" role="presentation"> |
| + | <div class="cpage__left"> | ||
| + | {{SectionTemplate | ||
| + | |title = {{{sections_title|Sections}}} | ||
| + | |content = {{{sections_content|}}} | ||
| + | }} | ||
| + | </div> | ||
| + | |||
| + | <main class="cpage__main" role="main"> | ||
| + | {{#if:{{{about_content|}}}| | ||
| + | {{SectionTemplate|title={{{about_title|About}}}|content={{{about_content}}}}} | ||
| + | |}} | ||
| + | |||
| + | {{#if:{{{featured_content|}}}| | ||
| + | {{SectionTemplate|title={{{featured_title|Featured}}}|content={{{featured_content}}}}} | ||
| + | |}} | ||
| + | |||
| + | {{#if:{{{news_content|}}}| | ||
| + | {{SectionTemplate|title={{{news_title|News}}}|content={{{news_content}}}}} | ||
| + | |}} | ||
| + | </main> | ||
| + | |||
| + | {{#if:{{{image_content|}}}| | ||
| + | <aside class="cpage__aside" role="complementary"> | ||
| + | {{{image_content}}} | ||
| + | </aside> | ||
| + | |}} | ||
| + | </div> | ||
| + | |||
| + | <!-- Optional magic words (default hidden). Set |show_toc=yes or |show_section_edit=yes to enable. --> | ||
| + | {{#ifeq:{{{show_toc|no}}}|yes||__NOTOC__}} | ||
| + | {{#ifeq:{{{show_section_edit|no}}}|yes||__NOEDITSECTION__}} | ||
| − | |||
| − | |||
<noinclude>[[Category:Templates]]</noinclude> | <noinclude>[[Category:Templates]]</noinclude> | ||
| + | ``` | ||
| + | |||
| + | --- | ||
| + | |||
| + | ## CSS (add to `MediaWiki:Common.css`) | ||
| + | |||
| + | ```css | ||
| + | /* Content page modern layout */ | ||
| + | .cpage { | ||
| + | display: flex; | ||
| + | align-items: flex-start; | ||
| + | gap: 1rem; /* space between columns */ | ||
| + | } | ||
| + | .cpage__left { | ||
| + | flex: 0 0 320px; /* fixed left column width */ | ||
| + | min-width: 260px; | ||
| + | } | ||
| + | .cpage__main { | ||
| + | flex: 1 1 auto; /* fluid middle column */ | ||
| + | min-width: 0; /* allow content to shrink without overflow */ | ||
| + | } | ||
| + | .cpage__aside { | ||
| + | flex: 0 0 320px; /* optional right column */ | ||
| + | min-width: 260px; | ||
| + | } | ||
| + | |||
| + | /* Responsive: stack on narrower screens */ | ||
| + | @media (max-width: 1024px) { | ||
| + | .cpage { | ||
| + | flex-direction: column; | ||
| + | } | ||
| + | .cpage__left, | ||
| + | .cpage__aside { | ||
| + | flex: 1 1 auto; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* Optional: quick polish hooks if SectionTemplate renders headings/content blocks */ | ||
| + | .cpage .section { | ||
| + | /* If your SectionTemplate emits a .section wrapper, you can style it here */ | ||
| + | } | ||
| + | ``` | ||
| + | |||
| + | --- | ||
| + | |||
| + | ## Parameters | ||
| + | |||
| + | * `welcome` — passed through to `HeaderTemplate`. | ||
| + | * `blurb` — passed through to `HeaderTemplate`. | ||
| + | * `sections_title` — left column heading (default: `Sections`). | ||
| + | * `sections_content` — left column content (lists, nav, links). | ||
| + | * `about_title` / `about_content` — optional; renders only if `about_content` is non-empty. | ||
| + | * `featured_title` / `featured_content` — optional; renders only if `featured_content` is non-empty. | ||
| + | * `news_title` / `news_content` — optional; renders only if `news_content` is non-empty. | ||
| + | * `image_content` — optional; renders a right-side `<aside>` only when provided. | ||
| + | * `show_toc` — set `yes` to show TOC; default hides it. | ||
| + | * `show_section_edit` — set `yes` to show section edit links; default hides them. | ||
| + | |||
| + | --- | ||
| + | |||
| + | ## Usage Example | ||
| + | |||
| + | ```wikitext | ||
| + | {{ContentTemplateModern | ||
| + | | welcome = Welcome to the Holdfast Knowledge Base | ||
| + | | blurb = Authoritative guides for maps, classes, modding, and updates. | ||
| + | |||
| + | | sections_title = Quick Links | ||
| + | | sections_content = | ||
| + | * [[Maps Index]] | ||
| + | * [[Classes Overview]] | ||
| + | * [[Modding: Getting Started]] | ||
| + | * [[Patch Notes]] | ||
| + | |||
| + | | about_title = About This Site | ||
| + | | about_content = This is the official community-maintained resource for Holdfast. | ||
| + | |||
| + | | featured_title = Featured Guides | ||
| + | | featured_content = | ||
| + | ; New Map Authoring Pipeline | ||
| + | : A start-to-finish guide on building performant terrains. | ||
| + | ; Server Admin Toolkit | ||
| + | : Scripts, troubleshooting, and best practices. | ||
| + | |||
| + | | news_title = Latest News | ||
| + | | news_content = {{NewsFeed limit=5}} <!-- or manual bullets --> | ||
| + | |||
| + | | image_content = | ||
| + | <div class="thumb tright"> | ||
| + | [[File:Holdfast_Banner.png|400px|alt=Holdfast banner]] | ||
| + | <div class="thumbcaption">Community spotlight: September maps</div> | ||
| + | </div> | ||
| + | |||
| + | | show_toc = no | ||
| + | | show_section_edit = no | ||
| + | }} | ||
| + | ``` | ||
| + | |||
| + | --- | ||
| + | |||
| + | ## Notes | ||
| + | |||
| + | * The right column and any middle sections are **conditional**—they won’t render if their `*_content` param is empty. | ||
| + | * All widths are controllable in CSS. If you want a narrower left column, change the `.cpage__left` `flex-basis`. | ||
| + | * Keep headings in `SectionTemplate` semantic (`<h2>`, `<h3>`) for accessibility. | ||
Revision as of 08:40, 18 September 2025
- Template\:ContentTemplateModern
A responsive, modern, div-based replacement for the table-layout content page template.
---
- Template Source (paste this on the template page)
```wikitext
Sections
<main class="cpage__main" role="main">
</main>
```
---
- CSS (add to `MediaWiki:Common.css`)
```css /* Content page modern layout */ .cpage {
display: flex; align-items: flex-start; gap: 1rem; /* space between columns */
} .cpage__left {
flex: 0 0 320px; /* fixed left column width */ min-width: 260px;
} .cpage__main {
flex: 1 1 auto; /* fluid middle column */ min-width: 0; /* allow content to shrink without overflow */
} .cpage__aside {
flex: 0 0 320px; /* optional right column */ min-width: 260px;
}
/* Responsive: stack on narrower screens */ @media (max-width: 1024px) {
.cpage {
flex-direction: column;
}
.cpage__left,
.cpage__aside {
flex: 1 1 auto;
}
}
/* Optional: quick polish hooks if SectionTemplate renders headings/content blocks */ .cpage .section {
/* If your SectionTemplate emits a .section wrapper, you can style it here */
} ```
---
- Parameters
- `welcome` — passed through to `HeaderTemplate`.
- `blurb` — passed through to `HeaderTemplate`.
- `sections_title` — left column heading (default: `Sections`).
- `sections_content` — left column content (lists, nav, links).
- `about_title` / `about_content` — optional; renders only if `about_content` is non-empty.
- `featured_title` / `featured_content` — optional; renders only if `featured_content` is non-empty.
- `news_title` / `news_content` — optional; renders only if `news_content` is non-empty.
- `image_content` — optional; renders a right-side `<aside>` only when provided.
- `show_toc` — set `yes` to show TOC; default hides it.
- `show_section_edit` — set `yes` to show section edit links; default hides them.
---
- Usage Example
```wikitext Template:ContentTemplateModern ```
---
- Notes
- The right column and any middle sections are **conditional**—they won’t render if their `*_content` param is empty.
- All widths are controllable in CSS. If you want a narrower left column, change the `.cpage__left` `flex-basis`.
- Keep headings in `SectionTemplate` semantic (`
`, `
`) for accessibility.