<- Vuepress
vuepress - individuelle Anpassungen im HTML Head
gloable Anpassung
Globale Ergänzungen von Metadaten im <head> können in der Konfigurationsdatei .vuepress/config.js vorgenommen werden.
Die Einträge werden auf jeder Seite im Projekt ergänzt.
Siehe : https://v0.vuepress.vuejs.org/config/#head
Beispiel: Einstellungen für das favicon, eines Scripts im HEAD und einer Metainformation:
<head>
<link rel="icon" href="/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="https://static.estos.com/p/v2/estos-components.js"></script>
</head>
2
3
4
5
Die Einträge für den HEAD-Bereich für alle Webseiten, wird in der zentralen config.js vorgenommen:
module.exports = {
head: [
['link', { rel: 'icon', href: '/favicon.ico' }],
['meta', {name: "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.0"}],
['script', {src: 'https://static.estos.com/p/v2/estos-components.js'}]
]
}
2
3
4
5
6
7
Info
Die Notation im json für den HTML Head entspricht dabei [tagName, { attrName: attrValue }, innerHTML?].
Das Beispielscript:
<script>
function meineFunktion() {
document.getElementById("testid").innerHTML = "Textbeispiel";
}
</script>
2
3
4
5
wird somit wie folgt eingefügt:
module.exports = {
head: [
['script', { }, function meineFunktion() {document.getElementById("testid").innerHTML = "Textbeispiel";}]
]
}
2
3
4
5
Hiermit wird die Javascript-Funktion meineFunktion() im HTML HEAD aller Vuepress Seiten eingefügt.
individuell je Seite
Individuell je Seite erfolgt die Einstellungen im YAML-Kopf der jeweiligen Markdownseite.
Beispiel:
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</head>
2
3
4
Werden wie folgt im Kopf der jeweiligen Markdown-Datei ergänzt:
---
meta:
- http-equiv: cache-control
content: no-cache
- http-equiv: expires
content: 0
---
2
3
4
5
6
7