Replies: 3 comments
-
Erste Versuche mit dem Hugo-Lecture Example Material sind ganz hoffnungsvoll verlaufen. Mit der Konfiguration `index.html`<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css"
/>
</head>
<body>
<div id="app"></div>
<script>
// Enter the URL of your own GitHub Repository in between the two quotes below
var gitLinkRepoURL = '';
// Customize the text for your Edit this Page on GitHub link between the two quotes below
var editThisPageLinkText = 'Edit this Page';
// Set standalone to true to permanently hide the Sidebar and Navbar
var standalone = false;
// Set ToC to true to permanently show page Table of Contents (Sidebar and Navbar must also be hidden)
var ToC = true;
// Set navbar to true to permanently override the hiding of the Navbar when displaying as standalone
var navbar = true;
// Set footer to true to permanently show the Footer ('_footer.md)
var footer = false;
window.$docsify = {
// GENERAL SETTINGS
// -----------------------------------------------------------------
name: 'Pandoc Lecture',
homepage: 'readme.md',
// Relative path enabled
relativePath: true,
// SIDEBAR NAVIGATION
// -----------------------------------------------------------------
auto2top: true,
maxLevel: 3,
// Set subMaxLevel to 0 to remove automatic display of page table of contents (TOC) in Sidebar
subMaxLevel: 3,
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html> kann der Inhalt des Ordner einfach gepackt und im HTML-Lernmodul entpackt werden. Keine weiteren Einstellungen nötig (insbesondere muss nicht erst noch der Pfad im HTML-Lernmodul im ILIAS bestimmt und irgendwo eingetragen werden), die Geschwindigkeit ist ebenfalls ok. Es werden scheinbar alle Markdown-Bausteine wie auch bei Hugo unterstützt. |
Beta Was this translation helpful? Give feedback.
-
Es geht sogar noch besser: Im `index.html` kann einfach auf das Repo verwiesen werden:<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css"
/>
</head>
<body>
<div id="app"></div>
<script>
// Enter the URL of your own GitHub Repository in between the two quotes below
var gitLinkRepoURL = '';
// Customize the text for your Edit this Page on GitHub link between the two quotes below
var editThisPageLinkText = 'Edit this Page';
// Set standalone to true to permanently hide the Sidebar and Navbar
var standalone = false;
// Set ToC to true to permanently show page Table of Contents (Sidebar and Navbar must also be hidden)
var ToC = true;
// Set navbar to true to permanently override the hiding of the Navbar when displaying as standalone
var navbar = true;
// Set footer to true to permanently show the Footer ('_footer.md)
var footer = false;
window.$docsify = {
// GENERAL SETTINGS
// -----------------------------------------------------------------
name: 'Pandoc Lecture (Remote Test)',
// Even can load files from other repo
basePath: 'https://raw.githubusercontent.com/Artificial-Intelligence-HSBI-TDU/KI-Vorlesung/master/',
homepage: 'readme.md',
// Relative path enabled
relativePath: true,
// SIDEBAR NAVIGATION
// -----------------------------------------------------------------
auto2top: true,
maxLevel: 3,
// Set subMaxLevel to 0 to remove automatic display of page table of contents (TOC) in Sidebar
subMaxLevel: 3,
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html> Dann muss nur noch das Die relevanten Einstellungen sind:
|
Beta Was this translation helpful? Give feedback.
-
Was fehlt noch?
Automatische Theme-Anpassung mit den Default-Themes: <!-- Themes (light + dark) -->
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" /> |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
docsify scheint eine ansehnliche Alternative zu Hugo und mdBook und LiaScript zu sein. Ausgehend von einer Startseite (festes
index.html
) im Repo, die als GH-Page o.ä. geladen/deployed wird, wird der restliche Content dynamisch gerendert und angezeigt. Es gibt verschiedene Themes, Markdown und Code-Highlighting und sogar einen Offline-Modus als PWA?! Könnte ein spannendes Projekt sein.Wird beispielsweise im Kurs Artificial Intelligence for Beginners und für die Doku von PyRight von Microsoft eingesetzt.
Edit: Bei näherer Betrachtung müssen die Markdownfiles auch deployed werden. D.h. nach jeder Änderung im Repo muss das Lernmodul im ILIAS genau wie bei dem Hugo-Ansatz aktualisiert werden. Man spart sich aber den Build-Schritt und kann zusätzlich direkt mit für Menschen gedachten Ordnerstrukturen und Dateinamen arbeiten (dieser Teil des Pre-Processing für Hguo würde auch entfallen).Tatsächlich kann man perbasePath
auf ein Repo verweisen und dann werden die Inhalt dynamisch von dort gezogen.Edit: Aktuell gibt es auch https://docsify-this.netlify.app/, d.h. das funktioniert analog zu Lia-Script - man muss nicht mal eine
index.html
ins ILIAS stellen, sondern nur noch einen Link. Das funktioniert out-of-the-box sogar mit automatischer Anpassung auf Light-/Dark-Mode und Vergrößern von Bildern per Klick wie in Relearn und math. Formeln! Vorteil LiaScript: zusätzlich SC/MC-Aufgaben. Nachteil LiaScript: Proprietäres Format für Einstellungen, Light-/Dark-Mode geht nur manuell, Unterschied Folien-Skript-Book-Version nicht wirklich klar in Safari. Test mit dem KI-Kurs-Material.Edit: Könnte man ggf. auch https://htmlpreview.github.io/ nutzen?
Beta Was this translation helpful? Give feedback.
All reactions