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.
0 replies
-
|
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.
0 replies
-
|
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.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 perbasePathauf 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.htmlins 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