30 déc. 2017 15:37:00

Créer un thème

Vous souhaitez probablement vous séparer de ce thème tout moche. Voici comment créer votre propre thème.

Fichier page.html

Tout d'abord, vous devez avoir créé un projet. Si ceci n'est pas déjà fait, cette page vous guidera pas à pas. Maintenant, rendez-vous dans le répertoire de votre projet et créez un dossier appelé theme (s'il est déjà créé, supprimez-le et recréez-le).

Dans le dossier du theme, vous devez posséder un fichier appelé page.html. Le contenu de ce fichier sera appliqué sur chaque page de votre projet (situées dans le dossier content et possédant l'extension de fichier .md). Souvenez-vous : SkyDocs utilise jtwig pour formatter votre contenu HTML. Donc par exemple, si page.html contient :

<!DOCTYPE html>
<html>
	<head>
		<title>{{ page.getTitle() }} | {{ project.getName() }}</title>
	</head>
	<body>
		<p>Voici le contenu de ma page nommée "{{ page.getTitle() }}" :</p>
		{{ page.getContent() }}
	</body>
</html>

Quand vous construirez votre projet, ceci sera placé sur chaque page MarkDown. Vous avez beaucoup d'autres fonctions disponibles :

Fonction	Description
`{{ project.getName() }}`	Retourne le nom de votre projet comme configuré dans plugin.yml.
`{{ project.getDescription() }}`	Retourne la description de votre projet comme configuré dans plugin.yml.
`{{ project.getURL() }}`	Retourne l'adresse URL de votre projet comme configuré dans plugin.yml.
`{{ project.getDefaultLanguage() }}`	Retourne la language par défaut de votre projet comme configuré dans plugin.yml.
`{{ project.getLunrSeach()() }}`	Retourne si oui ou non la recherche lunr doit être activée comme configuré dans plugin.yml.
`{{ project.isDefaultOrderAlphabetical() }}`	Retourne si oui ou non l'ordre alphabétique est l'ordre par défaut pour les pages comme configuré dans plugin.yml.
`{{ project.getPages() }}`	Retourne une liste itérable des pages de votre projet.
`{{ project.getPages(language) }}`	Retourne une liste itérable des pages de votre projet qui sont écrites dans la langue spécifiée.
`{{ project.getMenuHTMLByLanguage(language) }}`	Retourne le contenu HTML du menu correspondant au language (langue) spécifiée. Ce contenu ne sera pas parsé avec jtwig.
`{{ project.getField(key) }}`	Retourne la valeur contenue dans project.yml correspondante à la key (clé) spécifiée (par exemple si vous souhaitez le nom du projet, utilisez `{{ project.getField("project_name") }}`).

Fonction	Description
`{{ page.getTitle() }}`	Retourne le titre de la page (configuré dans l'en-tête du fichier MarkDown).
`{{ page.getLanguage() }}`	Retourne la lange de la page (configuré dans l'en-tête du fichier MarkDown).
`{{ page.getContent() }}`	Retourne le contenu de la page (une fois converti en HTML).
`{{ page.getRawContent() }}`	Retourne le contenu de la page.
`{{ page.getRootRelativeURL() }}`	Retourne une chaîne de caractères représentant l'adresse de la racine de votre site WEB relative à la page. Ainsi, si la page est située à `/en/creating-theme.html`, cette méthode renverra `../`.
`{{ page.getPageRelativeURL() }}`	Retourne l'URL de la page.
`{{ page.getMenu() }}`	Retourne le menu relatif à cette page. Ce contenu sera parsé, vous pouvez donc utiliser les variables jtwig.
`{{ page.getLastModificationTime() }}`	Retourne la dernière date de modification de la page formatée grâce à la langue du système.
`{{ page.getLastModificationTime(format) }}`	Retourne la dernière date de modification de la page formated avec votre format. Veuillez accéder à cette page pour connaître les différentes options de format. Par exemple, `{{ page.getLastModificationTime("yyyy-MM-dd") }}` peut afficher 2012-12-21.
`{{ page.getLastModificationTimeForLocale(locale) }}`	Retourne la dernière date de modification de la page formatée avec la langue spécifiée. Si la langue spécifiée n'est pas valide, celle du système sera utilisée.
`{{ page.getRawLastModificationTime() }}`	Retourne la dernière date de modification de la page en millisecondes.
`{{ page.hasPreviousPage() }}`	Vérifie si la page à une page précédente. La valeur sera true si vous avez mis une valeur à `previous` dans l'en-tête de la page ou si vous avez activé l'ordre alphabétique par défaut pour les pages.
`{{ page.getPreviousPage() }}`	Retourne la page précédente de la page (configuré dans l'en-tête du fichier MarkDown ou automatiquement mis si vous avez activé l'ordre alphabétique par défaut pour les pages).
`{{ page.hasNextPage() }}`	Vérifie si la page à une page suivante. La valeur sera true si vous avez mis une valeur à `next` dans l'en-tête de la page ou si vous avez activé l'ordre alphabétique par défaut pour les pages.
`{{ page.getNextPage() }}`	Retourne la page suivante de la page (configuré dans l'en-tête du fichier MarkDown ou automatiquement mis si vous avez activé l'ordre alphabétique par défaut pour les pages).
`{{ page.getField(key) }}`	Retourne la valeur contenue dans l'en-tête correspondante à la key (clé) spécifiée (par exemple si vous souhaitez la langue de la page, utilisez `{{ page.getField("language") }}`).

Fonction	Description
`{{ include_file("file.html") }}`	Inclut le fichier file.html situé dans le dossier theme. Par exemple, `{{ include_file("test.html") }}` va ajouter le contenu du fichier test.html.

Les variables generator_name, generator_version et generator_website sont également disponibles.

Répertoire assets

Si vous souhaitez ajouter du style CSS styles ou des images, vous allez devoir créer un dossier assets dans le répertoire du thème. Une fois créé, ajoutez ce que vous souhaitez dedans : Scripts JS, du CSS et des images, etc...

Le dossier sera copié à la racine du répertoire build.

Previous Next