Javascript Functions
The following functions are available on all pages
phonemos_setLanguage(lang: string): void
Override the language the page is displayed in. When the function is called then the page will reload in the specified language and the language of the user will be set to this language (via a cookie)
CSS Classes
The following CSS classes are globally available and can be targeted in you custom CSS:
Component Layouts
Documentation in progress, please add if you figure out how to style something
Default Layout
When you don’t customize the layout (HTML) then the following will be used. If you use a custom HTML then this does not apply
Classname | Element | Used at |
|---|---|---|
phonemos_root | div | The root div of the page |
phonemos_content | div | The content section of the page (see picture) |
phoenmos_navigation | aside | Content to the right that contains the navigation tree |
phonemos_pageTitle | h1 | Title of the Phonemos Page |
phonemos_titleContainer | div | Container of the phonemos_pageTitle if this is a page with an image |
phonemos_titleImage | div (containing an img) | Title image for the page (inside phonemos_titleContainer) |
phonemos_pageContent | article | Content of the Phonemos Page (the rendered wiki content) |
phonemos_search | div | Container for the search box and result (see content.searchBox below) |
phonemos_search_query | div (contains input) | The input field (search query) |
phonemos_search_loading_spinner | div (with an i) | Spinner that can be shown when results are loaded/updated |
phonemos_search_result | div (contains a ul) | Container for the search result |
HTML Content
The HTML can be customized using a Handlebars template. See the Handlebars guide for detailed information.
You have to provide the complete HTML (starting with <!DOCTYPE html> and <html …
The following placeholders can be used (but don’t have to be used):
Name | Type | Description |
|---|---|---|
content.main | HTML (use with {{{content.main}}}) | The main content, namely the actual content of the wikipage (without the title) |
content.titleImageLong | HTML (use with {{{content.titleImageLong}}}) | The title including an image (if present). The image is cropped to a flat long format (like in Phonemos itself).
|
content.titleImageSquare | HTML (use with {{{content.titleImageSquare}}}) | The title including an image (if present). The image is cropped to a square format.
|
content.pageTree | HTML (use with {{{content.pageTree}}} | All pages in the topic as a tree structure. |
content.tableOfContents | HTML (use with {{{content.tableOfContents}}} | The table of contents of the current page (can e.g. be displayed in a popup or to the right) |
content.searchBox | HTML (use with {{{content.searchBox}}} | A search input field that will full-text search across the topic |
title | String | The title of the page. Typically used in head/title and in h1 |
contentLanguage | String (e.g. de) | Language of the content. Use as <html lang={{contentLanguage}}> |
stylesheetHrefs | Array of String | Links to stylesheets, e.g. the one from the theme itself. Usage (in head): 1
2
3
{{#each stylesheetHrefs}}
<link rel="stylesheet" type="text/css" href="{{this}}" />
{{/each}} |
Defaults
To make the styling life a bit easier the following default CSS can be used:
|
|
|---|---|
/_assets/default.wikipage.css | Default styling of the wikipage content. |
/_assets/default.layout.css | Probably will not be used in most cases. Contains the css necessary for the default layout as described under CSS. |