Creating your theme
You probably want to get rid of this ugly default template. Here's how to create your own template.
page.html file
First, you need to have created a project. If you don't know how to create your project, please check this page. Then in your project's directory, create a folder named theme (if it is already created, then delete it and re-create it).
In the theme directory, you must have a file called page.html. This file's content will be applied to each page of your project (located in the contents directory, with the .md file extension). Remember : SkyDocs uses jtwig to format your HTML content. So for instance, if page.html contains :
<!DOCTYPE html>
<html>
<head>
<title>{{ page.getTitle() }} | {{ project.getName() }}</title>
</head>
<body>
<p>Here's the content of the page called "{{ page.getTitle() }}" :</p>
{{ page.getContent() }}
</body>
</html>
Then, when you build your project, this will be placed on each MarkDown page. You have a lot of other available functions :
| Function | Description |
|---|---|
{{ project.getName() }} | Returns your project's name as configured in the project.yml. |
{{ project.getDescription() }} | Returns the description of your project as configured in the project.yml. |
{{ project.getURL() }} | Returns the URL address of your project as configured in the project.yml. |
{{ project.getDefaultLanguage() }} | Returns your project's default language as configured in the project.yml. |
{{ project.hasLunrSeach() }} | Returns if lunr search should be enabled for this project as configured in the plugin.yml. |
{{ project.isDefaultOrderAlphabetical() }} | Returns whether the alphabetical order is the default page order as configured in the plugin.yml. |
{{ project.getPages() }} | Returns an iterable list of your project pages. |
{{ project.getPages(language) }} | Returns an iterable list of project pages that are written in the specified language. |
{{ project.getMenuHTMLByLanguage(language) }} | Returns the HTML content of the menu corresponding to the specified language. This content will not be parsed using jtwig. |
{{ project.getField(key) }} | Returns the field located in project.yml corresponding to the key (for example if you want the project's name, use {{ project.getField("project_name") }}). |
| Function | Description |
|---|---|
{{ page.getTitle() }} | Gets the title of a page (configured in the MarkDown file header). |
{{ page.getLanguage() }} | Gets the language of a page (configured in the MarkDown file header). |
{{ page.getContent() }} | Gets the content of a page (once converted in HTML). |
{{ page.getRawContent() }} | Gets the content of a page. |
{{ page.getRootRelativeURL() }} | Gets a string that represents your website root address relative to a page. For instance, if the page is located at /en/creating-theme.html, this method will return ../. |
{{ page.getPageRelativeURL() }} | Gets the relative URL of a page. |
{{ page.getMenu() }} | Gets the menu relative to a page. The content will be parsed, therefore you can use jtwig variables. |
{{ page.getLastModificationTime() }} | Gets the last modification time of a page formatted with system's default locale. |
{{ page.getLastModificationTime(format) }} | Gets the last modification time of a page formatted with your format. Please check this page to know available formatting options. For example, {{ page.getLastModificationTime("yyyy-MM-dd") }} can output 2012-12-21. |
{{ page.getLastModificationTimeForLocale(locale) }} | Gets the last modification time of a page formatted with the specified locale. If the specified locale is not valid, the system's default locale will be used instead. |
{{ page.getRawLastModificationTime() }} | Gets the last modification time of a page in milliseconds. |
{{ page.hasPreviousPage() }} | Checks if a page has a previous page. This will be true if you have set a value to the previous header key or if you have enabled the alphabetical order as the default order for pages (there must be a page before though). |
{{ page.getPreviousPage() }} | Gets the previous page of a page (configured in the MarkDown file header or automatically set if you have enabled the alphabetical order as the default order for pages). |
{{ page.hasNextPage() }} | Checks if a page has a next page. This will be true if you have set a value to the next header key or if you have enabled the alphabetical order as the default order for pages (there must be a page after though). |
{{ page.getNextPage() }} | Gets the next page of a page (configured in the MarkDown file header or automatically set if you have enabled the alphabetical order as the default order for pages). |
{{ page.getField(key) }} | Gets the field located in the header corresponding to the key (for example if you want the page's language, use {{ page.getField("language") }}). |
| Function | Description |
|---|---|
{{ include_file("file.html") }} | Includes the file file.html located in the theme directory. For instance, {{ include_file("test.html") }} will add the content of test.html. |
The variables generator_name, generator_version and generator_website are also available.
Assets directory
If you want to add some CSS styles or images, you will have to create a directory named assets in the theme folder. Once created, put everything you want in it : JS Scripts, some CSS and images, etc...
This directory will be copied at the root of the build folder.