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 :

FunctionDescription
{{ 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") }}).
FunctionDescription
{{ 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") }}).
FunctionDescription
{{ 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.

Dec 30, 2017 3:37:24 PM