docsify this
v1.9.16: Merge pull request #161 from hibbitts-design
Mit dieser Open-Source-Web-App, die mit Magical Documentation Site Generator DOCSIFY erstellt wird, können Sie Online-Markdown-Dateien als Webseiten veröffentlichen, ohne Ihre eigene Website einzurichten.
Schauen Sie sich an, was docSify dies tun kann, indem Sie diese Readme-Datei als Webseite mit einer optionalen Seitenleiste ansehen, die Überschriften bis zu 4 Ebenen enthält!
Abbildung 1. DocSify-this.net-Webseitenbauer.
Haben Sie docSify ausprobiert? Teilen Sie Ihr Feedback zu DocSify-This mit
DocSify-dies bietet eine einfache Möglichkeit, Inhalte in verschiedenen Kontexten anzuzeigen und zu teilen, ohne dass eine Website eingerichtet oder erstellt wird. Indem Sie Ihre Markdown -Dateien auf GitHub oder Codeberg hosten, können Sie auch die Versionskontrolle (die Möglichkeit, Änderungen zu verfolgen und umzukehren) und die Zusammenarbeit zu ermöglichen.
Mit DocSify-das können Sie:
DocSify-Dies ist eine angepasste Dokumentation, die im folgenden Format über URL-Parameter über URL-Parameter konfiguriert ist, die zum Rendern von Remote-Markdown-Dateien konfiguriert sind:
https://docsify-this.net?basePath=URLpath&homepage=filename.md
Der Parameter Basepath DocSify ist der URL -Pfad, der die RAW -Kennzeichnungsdatei enthält. Wenn die Datei mit dem erwarteten Standard -Readme.md bezeichnet wird, ist kein anderer Parameter erforderlich, andernfalls muss der Parameter Homepage DocSify auch in den Namen der Datei zum Rendern eingestellt werden. Ein Beispiel docsify-dis url wäre: https://docsify-this.net/?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-this-one-page-article/main&homepage=hom
DocSify-Dies kann Dateien von jedem Ort rendern, an dem der Inhalt einer Markdown-Datei in einem Webbrowser angezeigt wird, einschließlich:
Um eine Datei, die in einem öffentlichen Github -Repository gespeichert ist, direkt zu rendern, wenn Sie den oben genannten Webseiten -Builder nicht verwenden, müssen Sie die URL der Rohquellen dieser Datei (dh Raw.githubuSercontent.com) verwenden, indem Sie beim Anzeigen einer Datei auf die RAW -Schaltfläche tippen. Es ist auch möglich, eine Datei in einem privaten Github -Repository zu rendern, indem Github -Seiten in diesem Repository aktiviert und dann die GitHub -Seiten URL dieser Datei verwendet wird (dh Benutzername.github.io).
Das Erscheinungsbild von gerenderten Markdown -Dateien kann durch optionale URL -Parameter und einen kleinen Satz verfügbarer CSS -Klassen in Quell -Markdown -Dateien angepasst werden. Zusätzlich zur Unterstützung des Standard -Markdowns sind die Diagramme für die Einbettung, H5P, Latex und Meerjungfrau enthalten. Optional kann die Seitenanmerkungen mit Hypothäden aktiviert werden.
Auf der Suche nach einer allgemeinen Einführung in das Veröffentlichen mit DocSify-This? Schauen Sie sich Markdown Publishing mit DocSify-This an.
Ich bin nur durch die Tatsache überwältigt, dass Sie eine (Markdown-Datei) URL in DocSify-This einfügen und dann eine URL zurück für eine Webseite erhalten ... fertig! Nehmen Sie die URL und gehen Sie. Es ist so nahtlos.
-J. Groom, Reclaim Today Episode 39 (Mitbegründer, Reclaim Hosting)
Ich habe DocSify-dies für meinen Graduate Publishing Production-Kurs verwendet, teilweise, um neue Modelle im Markdown Publishing zu erkunden, aber teilweise auch für zahme Leinwand, die ich umständlich und umständlich finde. Wenn Sie alle meine Kursnotizen als einfache Textdateien behalten und diese über GitHub und DocSify bereitstellen-ist das einfach und macht meine Kursentwicklung zu einem Kinderspiel. Außerdem halte ich alle meine Materialien lokal und kann sie wiederverwenden, ohne auf Leinwand angewiesen zu sein.
- J. Maxwell (Direktor und Associate Professor im Verlagsprogramm an der Simon Fraser University)
Das beste Werkzeug, das ich seit Jahren gefunden habe - dies ist eine dieser Kreationen, die einfach richtig gemacht werden, bis ins Kern.
- D. Malawey (Multidisziplinärlaborkoordinator, Texas A & M University)
DocSify-das hat meine WordPress-Themen erheblich verbessert, indem es in der Lage ist, nahtlos in die Schnittstelle eingebettet zu werden. Dies wiederum hat mich dazu gebracht, bessere Dokumente zu schreiben! Ich habe kaum die Oberfläche dessen, was docSify als einfach zu bedienendes Web-Publishing-Tool bewirken kann, zerkratzt.
- A. Levine aka Cogdog (Independent Bildungstechnologe)
DocSify-das wurde als Finalist in der Kategorie Open Infrastructure für die 2024 Open Education Awards for Excellence anerkannt.
Das visuelle Erscheinungsbild einer Online-Markdown-Datei, die als Webseite von DocSify angezeigt wird, kann dies auf zwei Arten geändert werden:
Zum Beispiel zur Anzeige der Markdown-Datei unter https://raw.githubuSercontent.com/hibbittts-design/docsify-this-one-page-article/home.md mit einer docsify-Seitenleiste mit Überschriften bis zu 3 Ebenen, der DocSify-this url ist:
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&sidebar=true&maxLevel=3Und hier ist, wie docSify-this.net die gleiche URL anzeigt:
Die von DocSify-this.net angezeigte Webseite zeigt die Markdown-Datei mit einer Seitenleiste an, die Überschriften bis zu 3 Ebenen enthält, wie in der DOCSIFY-URL angegeben.
Erfahren Sie mehr über die folgenden grundlegenden Dokumentationsparameter, die bei der Kombination von URL-Parametern und Online-Markdown-Dateien mit einer Reihe von docSify---Markdown-Vorlagen möglich sind.
Grundlegende URL -Parameter (im Standard -Webseitenbauer enthalten)
Legen Sie einen benutzerdefinierten Titel auf der Registerkarte Browser für Ihre Webseiten mit dem optionalen Browser-TAB-Ditle- Parameter fest, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/paulhibbitts/demo-grav-open-matter-course-hub/pages/04.resources&homepage-Note. codiert, also "meine Seite" wäre "meine%20 -Seite".
Zeigen Sie einen "diese Seite bearbeiten" -Link an (Standardspeicherort befindet sich unten auf Seite) mit dem optionalen Bearbeitungs-Link- Parameter, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starte R-Kit/Main & edit-link = https: //github.com/hibbittts-design/docsify-open-publishing-starter-kit/blob/main/readme.md
Ändern Sie den Standardtext für einen Link "diese Seite bearbeiten" mit dem optionalen Parameter "Bearbeiten-Link-Text" , zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-coursestarter-kit/main&edit-li nk = https: //github.com/hibbittts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-text=view%20as%20markdown Bitte beachten Sie, dass Sie Text mit Leerzeichen verwenden, die sie codiert werden müssen.
Ändern Sie den Speicherort des Links "Diese Seite bearbeiten" unten auf den Seiten, um mit dem optionalen Parameter "Bearbeitungs-Link-Top" die oberen Seiten zu sein, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-coursestarter-kit/main&toc = true & edit-link = https: //github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-top=true
Legen Sie eine benutzerdefinierte Schriftart für Ihre Webseiten mit dem optionalen Parameter der Schriftfamilie ein, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-coursestarter-kit/main/docs&homepage=resources.md&font-family=helveticaInicaIncaShelveticaIcaIncaIncaIncaInticaIcaInicaIncaIncaIncaIncaIncaIncaIncaS-Sserfs. Dieser Parameter kann besonders wertvoll sein, wenn versucht wird, die visuelle Präsentation eingebetteter Inhalte mit Ihrer Zielplattform besser zu entsprechen. Bitte beachten Sie, dass sie Schriftarten mit Räumen in ihren Namen verwenden müssen, die sie codiert werden müssen, also wäre "Courier New" "Courier%20New".
Legen Sie eine benutzerdefinierte Schriftgröße für Ihre Webseiten mit dem optionalen Parameter der Schriftgröße fest, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&font-Ssize=1. Dieser Parameter kann besonders wertvoll sein, wenn versucht wird, die visuelle Präsentation eingebetteter Inhalte mit Ihrer Zielplattform besser zu entsprechen. Bitte beachten Sie, dass die Schriftgröße in REM -Einheiten festgelegt ist.
Legen Sie für Ihre Webseiten ein benutzerdefiniertes Header -Schriftgewicht (Standard sind 400 - regulär) mit dem optionalen Parameter des Headergewichts , zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&header-weight=600.
Ausblenden Sie die Credits, die normalerweise am Ende jedes angezeigten Dokuments angezeigt werden-diese Seite mit dem optionalen Parameter für ausblenden Credits , zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&hide-credits=trus=trus.
Aktivieren Sie die Seitenanmerkungen mit Hypothes .
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&hypothes=trus.
Legen Sie eine benutzerdefinierte Zeilenhöhe für Ihre Webseiten mit dem optionalen Parameter zur Zeilenhöhe ein, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&line-hight=1.5.
Legen Sie eine benutzerdefinierte Farbe für alle Links fest, die mit dem serienmäßigen hexadezimalen Format ohne das Symbol "#" mit dem optionalen Link-Color- Parameter definiert ist, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-color=cc0000.
Setzen Sie die maximale Header -Ebene der docsify -Seitenleiste mit dem optionalen MaxLevel -Dokumentationsparameter, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Introduction.md&sideBar=true&maxe&Maxvel velvel=3
Zeigen Sie eine docsify -Seitenleiste mit dem optionalen Sidebar -Parameter an, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-coursestarter-kit/main&sidebar=true
Zeigen Sie beispielsweise ein Inhaltsverzeichnis mit dem optionalen TOC -Parameter an:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Inroduction.md&toc=strus
Stellen Sie die Seitenüberschriftenstufen (dh H1, H2 usw.) fest, um in das Inhaltsverzeichnis der Seite mit dem optionalen TOC-Headings -Parameter enthalten zu sein, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishingstarter-kit/main/docs&homepage=Introduction.md&toc= -&toc=s&toc=h1
Verwenden Sie ein weniger breites Inhaltsverzeichnis mit dem optionalen Toc-Narrow- Parameter, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Inroduction.md&toc-narrow=tru. Dieser Parameter kann besonders wertvoll sein, wenn es in Inhalte einbettet, wenn ein kleinerer Bildschirmbereich wahrscheinlich ist.
Aktivieren Sie das Bildzoom (auf Seitenbilder tippen, um sie zu vergrößern) mit dem optionalen Zoom-Images- Parameter docsify, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/paulhibbitts/docsify-this-markdown-content-demo/main&zoom-images=true. Um Bilder auszuschließen, verwenden Sie  .
Die folgenden zusätzlichen URL-Parameter stehen zur Verwendung in docSify-diese-URLs zur Verfügung und sind im erweiterten Webseitenbauer enthalten, sofern nicht anders angegeben.
Ergänzende URL -Parameter (im erweiterten Webseitenbauer enthalten)
Zeigen Sie eine docSify -benutzerdefinierte Abdeckung mit dem optionalen Deckungsparameter an, zum Beispiel:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=home.md&coverpage=_coverpage.md
Legen Sie eine benutzerdefinierte Farbe für die Abdeckung mit dem optionalen Abdeckpage-Farbenparameter fest:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishingstarter-kit/main/docs&homepage=home.md&coverpage=_coverpage.md&coverpagedcoverpage.mds.md&coverpagedcoverpage
Legen Sie eine benutzerdefinierte Farbe für die Abdeckung im Dunklen Modus mit dem optionalen Parameter für den Deckungs-Farben-Dark-Modus ein, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=home .MD & Dark-Mode = True & Link-Color = CC0000 & Link-Color-Dark-Mode = ff9e9e & coverpage = _coverpage.md & coverpage-color = CC0000 & Coverpage-Color-Dark-Mode = 4D0000
Schalten Sie das hell/dunkle Thema automatisch auf der Präferenz auf System-OS-Ebene auf, z. B.:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Inroduction.md&dark-moding
Ändern Sie das Standard-Emoji für einen Link "diese Seite bearbeiten" mit dem optionalen Parameter "Bearbeiten-Link-emoji" (nicht im erweiterten Webseiten-Builder enthalten), zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main&edit-link=https://git hub.com/hibbittts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-text=view%20on%20github&edit-link-emoji=:file_Folder:
Aktivieren Sie das faule Laden von Bildern durch Browser mit dem parameter optionalen faulen Last-Images (nicht im erweiterten Webseitenbauer enthalten), zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Introduction. Zum Beispiel durch die docSify -Seitenleiste usw.
Legen Sie eine benutzerdefinierte Farbe für alle Links im Dunkelmodus ein, die mit dem serienmäßigen hexadezimalen Format ohne das Symbol "#" mit dem optionalen Parameter für link-color-Dark-Modus definiert sind, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course- Starter-kit/main/docs & homepage = ressourcen.md & link-color = cc0000 & dark-mode = true & link-color-dark-mode = ff9e9e.
Legen Sie eine benutzerdefinierte Schwebefarbe für alle Links fest, die mit dem optionalen Link-Hover-Color-Parameter mit dem Symbol '#' mit dem seriptalen Link-Hover- Farbparameter definiert ist, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-hover-color=cc0000000000000000000000000000000000000000000000000000000000000000.
Legen Sie eine benutzerdefinierte Schwebefarbe für alle Links im Dark-Modus ein, die mit dem serienmäßigen hexadezimalen Format ohne das Symbol "#" mit dem optionalen Parameter für link-hover-Farbtark-Dark-Modus definiert sind, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-sta rter-kit/main/docs & homepage = ressourcen.md & link-color = cc0000 & dark-mode = true & link-hover-color-dark-mode = ff9e9e.
Legen Sie eine benutzerdefinierte Textdekoration für alle Links mit dem Parameter Optional Link-Text Decoration fest, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-tecoration=none
Legen Sie eine benutzerdefinierte Schwebetextdekoration für alle Links mit dem Parameter Optional Link-Text-Decoration-Hover , zum Beispiel:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-text-decoration-hover=underline
Sie können ein benutzerdefiniertes Favicon aus der Bilddatei festlegen, die aus dem optionalen LoadFavicon -Parameter übergeben wurden, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/paulhibbitts/docsify-this-markdown-content-demo/main&loadfavicon=open-access.png
Laden Sie eine docsify -Fußzeile aus der Markdown -Datei in das aktuelle Verzeichnis, das mit dem optionalen Loadfoterer -Dokument -Parameter übergeben wurde, zum Beispiel: https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Inroduction.md&loader=_foter.md
Laden Sie eine docSify -benutzerdefinierte Navigation aus der Markdown -Datei, die mit dem optionalen Parameter für loadNavbar docsify übergeben wurde, z. B.:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-open-publishing-starter-kit/main/docs&homepage=Introduction.md&lapbar=_navbard
Laden Sie eine docSify -benutzerdefinierte Seitenleiste aus der Markdown -Datei, die mit dem optionalen LoadSideBar -Parameter docsify übergeben wurde, z. B.:
https://docsify-this.net/?basepath=https://raw.githubuSercontent.com/paulhibbitts/docsify-this-cmpt-363-222--Site/main&homepage=home.md&side bar=struepar=_SIDEBARDSIDE
Zeigen Sie ein Logo -Image für die Website in einer benutzerdefinierten Seitenleiste (dh Datei 'logo.png) mit dem optionalen Parameter Logo DocSify an, z. B.:
https://docsify-this.net/?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-this-multiple-page-course- Site/Main & homepage = home.md & sidebar = true & loadsideBar = _sideBar.md & loadNavbar = _navbar.md & name = cpt-363 & logo =/bilder/logo.png Der vollständige Ordnerpfad und der Dateiname müssen bereitgestellt werden. Ein Website -Name muss ebenfalls angegeben werden und wird als ALT -Text für das Logo verwendet.
Fucken Sie die Navigationselemente mit dem optionalen Parameter mergenavbar docsify zusammen in der Seitenleiste auf kleineren Bildschirmen zusammen, zum Beispiel: https://docsify-this.net/?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-this-multiple-page-cours e-site/main & homepage = home.md & sidebar = true & lastsideBar = _sideBar.md & loadNavbar = _navbar.md & mergenavbar = true & name = cpt-363
Zeigen Sie den Namen für die Website in einer docsify benutzerdefinierten Seitenleiste (dh Datei '_sidebar.md) mit dem optionalen Namen docSify -Parameter an, zum Beispiel:
https://docsify-this.net/?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-this-multiple-page-co. urse-site/main & homepage = home.md & sidebar = true & loadsideBar = _sideBar.md & loadNavbar = _navbar.md & search = true & name = cpt-363 Wenn dieser Parameter bereitgestellt wird, wird er automatisch als Browser -Registerkarte verwendet.
Legen Sie einen benutzerdefinierten Seitentitel ganz oben auf Ihren Webseiten mit dem optionalen Parameter "Page-Title" fest, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/paulhibbitts/demo-grav-open-matter-course-hub/master/pages/04.resources&homepage.matter-course-hub/pages/04.resources&homepage.mds-course-hub/pages/pages/04.resources&homepage.mds-course-hub/page "Meine Seite" wäre "meine%20page".
Paginierungsschaltflächen im Seitenbereich des Seiteninhalts (docsify benutzerdefinierte Seitenleiste erforderlich) mit dem optionalen Paginationsparameter , zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-this-multiple-page-cour SE-Site/Main & homepage = home.md & sidebar = true & lastsideBar = _sidebar.md & loadNavbar = _navbar.md & such = true & pagination = true
Aktivieren Sie das DOCSIFY -Such -Plugin (das derzeit Übereinstimmungen für Text und Markup enthält) auf mehreren Seiten -Sites, einschließlich einer benutzerdefinierten Seitenleiste mit dem optionalen Suchkästchen -DOCSIFY -Parameter, zum Beispiel:
https://docsify-this.net?basepath=https://raw.githubuSercontent.com/hibbittts-design/docsify-this-multiple-pag E-Course-Site/Main & homepage = home.md & sidebar = true & loadsideBar = _sideBar.md & loadNavbar = _navbar.md & searchbox = true
Legen Sie die maximale automatische Inhaltsverzeichnis -Header -Ebenen in docSify benutzerdefinierter Seitenleiste (dh Datei '_sideBar.md) mit dem optionalen Parameter SubmaxLevel DocSify fest:
https://docsify-this.net/?basepath=https://raw.githubuSercontent.com/paulhibbitts/docsify-this-cmpt-363-22--Site/main&homepage=home.md&sbar=trusdiadbar=_sidesidesidesidesidesidesidesidesidesidesidesideside-Side-Side-Side-Side-Side-Side-Side-Side-Side-Side-Di-und Side-Side-Side-Diad-Di-Side-Di-Side-Di-Side-Di-Side-Datei-Di-Datei -ieben-Di-und--und Side-Sideside-Site-Diadbar-Seite
Verwenden Sie die SVG-Version von fantastischen Icons anstelle von Web-Schriftarten mit dem optionalen SVG-ICons -Parameter (nicht im erweiterten Webseiten-Builder enthalten), zum Beispiel:
https://v2.preview.docsify-this.net/?basepath=https://raw.githubuSercontent.com/hibbittts-nsign/docsify-this-lms-content-pages/main&homepage=chedule.md&svg-content=tru
Inhalt in Leinwand einbetten
Beispiel für Iframe-Code, einschließlich URL-Parametern, um den Inhalt von Dokumentation und Canvas nahtlos übereinstimmen:
< p > < iframe style =" overflow: hidden; border: 0px #ffffff none; background: #ffffff; " src =" https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true " width =" 800px " height =" 1400px " allowfullscreen =" allowfullscreen " > </ iframe > </ p >Wenn eine Bildlaufleiste vorhanden ist, möchten Sie möglicherweise Ihren Iframe-Code neu aufmelden und den Wert "Höhe" anpassen.
Wie füge ich eine externe URL als Modulelement hinzu?
Modul External Link Beispiel mit Seiteninhaltstabelle:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363/main/docs/222&homepage=week-02.md&toc-narrow=true&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true Erstellen eines benutzerdefinierten Links in Ihrer Kursnavigation mithilfe des Redirect -Tools
URL -Feldbeispiel umleiten:
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=trueIframe (zum Einbetten von Inhalten in Seiten)
Externes Tool (zum Hinzufügen eines Links zu Kursnavigation oder Elementen)
Während Sie nur mit DocSify in Gang setzen müssen, ist dies eine grundlegende Markdown-Datei, aber einige Vorlagen können Sie verwenden, die zeigen, was mit Markdown, Bildern, URL-Parametern und sogar einigen HTML-Snippets möglich ist!
Um diese Vorlagen zu verwenden, werden Sie im Allgemeinen Folgendes ausführen (Vorlage spezifische Anweisungen sind in jeder Vorlage enthalten):
Melden Sie sich bei GitHub an oder erstellen Sie ein Konto, wenn Sie noch keine haben.
Tippen Sie auf diese Vorlage im ausgewählten Vorlagen-Repository (Green Green-Schaltfläche) und wählen Sie dann ein neues Repository erstellen
Wählen Sie den Namen für Ihr neues Repository aus und tippen Sie dann auf das Repository erstellen , um die Vorlagendateien in Ihr eigenes Github -Konto zu kopieren
Sehen Sie sich eine inbegriffene Markdown -Datei an, z. B. Home.md , und kopieren Sie ihre URL.
Gehen Sie zu https://docsify-this.net und fügen Sie die kopierte URL in das Feld Markdown-Datei-URL ein
Wählen Sie die gewünschten Seitenoptionen aus (z. B. SideBar docsify -Seitenleiste) und tippen Sie auf die Schaltfläche "Veröffentlichen", um Ihre Markdown -Datei als Webseite zum Freigeben oder Einbetten anzuzeigen
Um eine Datei in GitHub zu bearbeiten, tippen Sie beim Anzeigen der Datei auf das Bleistiftsymbol (Bearbeitendatei) im oberen Recht, nehmen Sie Ihre Änderungen vor und tippen Sie dann auf die Schaltfläche für die Festungsänderung ..., um diese Änderungen zu speichern.
Eine einseitige Article Home.md-Datei, angezeigt von docSify-this als a:
Ein-Seiten-Kurs-Home.md-Datei von docsify-this als A angezeigt:
Datei mit mehreren Seiten Site Home.md, einschließlich der Verwendung des Markdown-CSS-Klassen header-image-full-width , der von DocSify angezeigt wird-dies als:
Mehrfachseiten öffnen Sie Publishing Site Home.md-Datei, einschließlich der Verwendung einer docsify benutzerdefinierten Seitenleistendatei, die von docSify-dh is as: angezeigt wird:
Datei mit mehreren Seitenstudien-Site Home.md, einschließlich der Verwendung einer benutzerdefinierten Sidebar-Datei und einer docsify benutzerdefinierten Navi-Datei, die von docSify-dh is as angezeigt wird:
Beispielseiten, einschließlich der Verwendung der font-family , font-size und hide-credits URL-Parameter für nahtlose Inhalt, die sich in das Canvas LMS einbetten, wie von docSify-this angezeigt:
Sehen Sie sich ein Beispiel an, die LMVAS-LMS-Site mit docSify-This-Inhalten unter https://canvas.sfu.ca/courses/76692 ansehen.
DocSify-This.net Open und Collaborative Workflow mit GitHub-Markdown-Dateien.
DocSify-this.net Workflow mit Webserver-Markdown-Dateien.
Bei Verwendung von docSify-this zum Anzeigen von Markdown-Dateien in GIT-basierten Diensten wie Github oder Codeberg können Sie (Klondateien) auf Ihrem Desktop herunterladen, um örtliche Bearbeitung zu erhalten und dann Änderungen zu den Online-Dateien hochzuladen (Push).
Um beispielsweise GitHub -Markdown -Dateien auf Ihrem Desktop zu bearbeiten, werden Sie Folgendes erstellen:
Erfahren Sie mehr über den Einstieg mit Github Desktop.
Die folgenden CSS -Klassen sind verfügbar, wenn Sie Ihren eigenen Markdown -Inhalt erstellen.
< div class =" accordion " >
< details >
< summary > Topic One </ summary >
Topic one details here.
</ details >
< details >
< summary > Topic Two </ summary >
Topic two details here.
</ details >
</ div > < span class =' badge ' > Tue Jun 12th 11:59pm PDT </ span > < span class =' badge ' style =' --badge-bg-color: #0164db; ' > Tue Jun 12th 11:59pm PDT </ span > < span class =' badge ' style =' --badge-bg-color: #e7c500; --badge-text-color: #000; ' > Tue Jun 12th 11:59pm PDT </ span > < span class =' badge ' > [Tue May 16 2:30pm PT](https://www.timeanddate.com/worldclock/fixedtime.html?msg=CMPT-363+Blackboard+Mini-lectures+and+Activities&iso=20220516T1430&p1=256&ah=1&am=50) </ span > Auf großen Bildschirmen bis zu einer Höhe von 250px auf großen Bildschirmen beschnitten, auf kleinen Bildschirmen.
![ UX - User Experience ] ( images/12650723674_d5c85af332_k.jpg ' :class=banner-image ') Auf hohen Bildschirmen, 175px auf kleinen Bildschirmen, auf Höhe von 350 PX geschnitten.
![ UX - User Experience ] ( images/12650723674_d5c85af332_k.jpg ' :class=banner-tall-image ') [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button ') < a class =" button " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button-rounded ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button-rounded ') < a class =" button-rounded " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button-secondary ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button ') < a class =" button-secondary " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button-secondary-rounded ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button-secondary-rounded ') < a class =" button-secondary-rounded " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > Für verknüpfte Artikelvorschau, eingebettete Folien/Videos usw. usw.
< a class =" embedly-card " data-card-controls =" 0 " data-card-align =" left " href =" https://blog.prototypr.io/defining-usability-e7bf42e8abd0 " > Defining usability </ a > Vorgeschlagene Breite von 1200px bis 2000px.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image-fade ') Die vorgeschlagene Breite von 1200px bis 2000px, und die Anzeige des Inhaltsverzeichnisses ist nicht verfügbar.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image-fade-full-width ') Die vorgeschlagene Größe von 1200 Px bis 2000px Breite und 400px bis 600px Höhe, und die Anzeige des Inhaltsverzeichnisses ist nicht verfügbar.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image ') Skalieren Bilder auf %.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-75 ') Skalieren Sie Bilder mit Rand bis %.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-75-border ') ![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-border ') ![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-border-rounded ') [ GitHub ] ( https://github.com/hibbitts-design/docsify-this ' :class=navpill ') [ : fab fa-github fa-fw : GitHub ] ( https://github.com/hibbitts-design/docsify-this ' :class=navpill ') < a class =" navpill " href =" https://github.com " target =" _blank " > < i class =" fab fa-github fa-fw " > </ i > GitHub </ a > Machen Sie rohe HTML -Bilder, die die Größenabmessungen ansprechen.
< img src =" https://raw.githubusercontent.com/hibbitts-design/publishing-with-docsify-this/main/images/docsify-this-web-page-builder.jpg " width =" 910 " height =" 682 " class =" responsive image-border " alt =" Docsify-This Web Page Builder " > < div class =" row " >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
</ div > < div class =" row reverse-columns " >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
</ div > < div class =" row " >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
< div class =" column-right " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
</ div > < div class =" video-container-4by3 " > < div class =" video-container-16by9 " > < iframe width =" 560 " height =" 315 " src =" https://www.youtube.com/embed/lJIrF4YjHfQ " > </ iframe > </ div > Automatisch zu allen IFrames mit den Quelldomänen 'youtube.com' oder 'docs.google.com' hinzugefügt.
< div class =" video-container-16by9 " > < iframe width =" 560 " height =" 315 " src =" https://www.youtube.com/embed/lJIrF4YjHfQ " > </ iframe > </ div > Zusätzlich zu den von docSify unterstützten Markdown-CSS-Klassen können Sie auch Ihre eigenen benutzerdefinierten Klassen in Ihren angezeigten Markdown-Dateien definieren, z. B.:
CSS in der Markdown -Datei:
<style >
. markdown-section . mybutton , . markdown-section . mybutton : hover {
cursor : pointer;
color : # CC0000 ;
height : auto;
display : inline-block;
border : 2 px solid # CC0000 ;
border-radius : 4 rem ;
margin : 2 px 0 px 2 px 0 px ;
padding : 8 px 18 px 8 px 18 px ;
line-height : 1.2 rem ;
background-color : white;
font-family : -apple-system , "Segoe UI" , "Helvetica Neue" , sans-serif;
font-weight : bold;
text-decoration : none;
}
< / style >Markdown:
[ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=mybutton ') DocSify-das wurde so konzipiert, dass sie eine oder mehrere remote gehostete Markdown-Dateien schnell und einfach anzeigen. Für eine stärkere Anpassung des Dateiwechsels und zur Gewährleistung einer konsistenten Verfügbarkeit, auch wenn die öffentliche Dokumentation nicht mehr verfügbar war, können Sie Ihre eigene Instanz von DocSify-this hosten.
To host your own instance on GitHub Pages, which also supports the option of a custom domain, fork or clone the Docsify-This repository to your GitHub account. Then, enable GitHub Pages using the /docs folder.
You can also have an instance of Docsify-This run on Codeberg such as https://docsify-this.codeberg.page by creating a new repository called pages , then choosing paulhibbitts/docsify-this-app in the template dropdown menu, choosing the Git Content (Default Branch) option and then tapping the Create Repository button.
Alternatively, you can upload the files in the Docsify-This /docs folder into a newly created Codeberg repository and then manually enable Codeberg Pages. An example Docsify-This instance running on Codeberg is available at https://codeberg.org/paulhibbitts/docsify-this-app, which uses a Branch renamed to pages .
If you want to run Docsify-This on your own Websever, create a destination folder on your server and then copy the files within the Docsify-This folder /docs to your newly created server folder. You could also use this docs folder as a custom domain root.
A more future-friendly setup would be to fork the Docsify-This repository (to support getting upstream updates) and use a GitHub Action such as FTP-Deploy to deploy all changed repository files to a webserver.
You can limit the domains which remote files can be rendered from by locating the line var allowedDomains = ''; within the index.html file and include your list of allowed domains separated by commas, for example var allowedDomains = 'codeberg.org,raw.githubusercontent.com,hibbittsdesign.org'; .
If you want to further customize and control the presentation of your Markdown content, especially when rendering multiple page sites, you can install your own Docsify Open Publishing Starter Kit (that this hosted web app is based on) and store all Markdown files within that site. You can learn more about the capabilities of Docsify itself at Docsify.js.org.
Looking for some help with getting a Docsify custom-This instance up and running for your organization? Paul provides a range of professional services related to Docsify-This - contact him to learn more.
The display of Font Awesome Free icons within Markdown content is supported with the following format:
: fas fa-home fa-fw :
The above Markdown is equivalent to the HTML markup <i class="fas fa-home fa-fw" aria-hidden="true"></i> .
When using the above shortcode for Font Awesome icons, it is assumed to be for decorative purposes, and so for improved accessibility an aria-hidden="true" attribute is automatically added to the icon. For semantic purposes, it is recommended you refer to the Font Awesome Icons and Accessibility guidelines.
The following style prefixes are available with Docsify-This:
GitHub Training Manual Working Locally with Git Markdown file, displayed by Docsify-This as a:
Easy Markdown to Github Pages linked set of Markdown files, displayed by Docsify-This as:
A Collection of GitHub Markdown files used as course content within an SFU CMPT-363 Canvas LMS site.
A Collection of GitHub Markdown files with inline CSS used as a multiple page SFU CMPT-363 course site with SFU visual branding and the Docsify Search plugin enabled, multiple page SFU CMPT-363 course site with SFU visual branding and website logo, and an example single Markdown file with default visual styling for embeddeding.
GitHub Markdown Content Demo file, displayed by Docsify-This as a Web Page with 'Edit this Page' link using the new GitHub.dev web editor (currently in Beta).
GitHub Markdown Content Demo file, displayed by Docsify-This as a Web Page with 'View raw Markdown' link.
Codeberg Markdown Content Demo file, displayed by Docsify-This as a Web Page with 'View raw Markdown' link.
GitHub's LaTeX Support Examples Markdown file, displayed by Docsify-This as a Web Page with an 'Edit this Page' link.
Mermaid-Docsify Example GitHub Markdown file, displayed by Docsify-This as a Web Page with an 'Edit this Page' link.
Docsify-This Multi-language Site Template, displayed by Docsify-This as a:
Docsify-This Simple Visual Portfolio Template (based on Notion Portfolio Template), displayed by Docsify-This as a:
Docsify-This Visual Portfolio Template (based on Notion Portfolio Template), displayed by Docsify-This as a:
A simple Markdown Student Portfolio Starter Template (based on Markdown Student Portfolio Template by Justin Thoreson) which is viewable on both GitHub and with Docsify-This.net, displayed by Docsify-This as:
Introduction to Docsify–This
Introductory, beginner to intermediate.
An introduction of Markdown publishing using the open source project Docsify–This.
Self-Publishing with Docsify–This
Intermediate, with a mix of basic and advanced aspects.
An overview to self-publishing with Markdown using the open source project Docsify–This, with a focus on digital literacy.
Use a page inspector to identify the font family and font size used in the platform you are embedding Docsify-This content in, and then pass that font family using the font-family (encoded, where spaces are replaced with '%20') and font-size (REM units) URL parameters to Docsify-This. For example, to match fonts with the Canvas LMS:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=topics.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1
If you want to include a Page Table of Contents with embedded Docsify-This content, but the destination platform screen area is not very wide, you might want to try the optional toc-narrow display option. For example, to use a narrower Table of Contents area that includes a smaller screen breakpoint: https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363/main/docs/222&homepage=week-01.md&toc-narrow=true
Using Prismjs code blocks with syntax highlighting is supported for the languages included with Docsify and as well Bash, Go, Java, Kotlin, PHP, Python and Swift. To embed a code block use the Markdown standard of triple backticks and start the block with the name of the language, for example to embed a block of Javascript code with syntax highlight the following would be used:
```javascript
function test() {
console.log("Hello world!");
}
`` `
Which would then appear as:
function test ( ) {
console . log ( "Hello world!" ) ;
} The content of external Markdown files can be embedded into Docisfy-This web pages with the following:
[ included Markdown from same source location ] ( example.md ' :include ') [ included Markdown from URL ] ( https://raw.githubusercontent.com/paulhibbitts/Markdown-File-Tests/main/itworks.md ' :include ')For additional examples of including external content, view Docsify Embeded Files.
WikiLinks format for links and images are supported, as also found in the desktop editor Obsidian and other platforms.
The display of AsciiDoc files ('.adoc' extension) via DownDoc is possible by manually passing the relevant filenames within a Docsify-This URL (not available in the Docisfy-This.net Web Page Builder), for example: https://docsify-this.net/?basePath=https://raw.githubusercontent.com/asciidoctor/asciidoctor-pdf/main/examples&homepage=basic-example.adoc&edit-link=https://github.com/asciidoctor/asciidoctor-pdf/blob/main/examples/basic-example.adoc
You can support the display of AsciiDoc files in the Web Page Builder of your own instance of Docsify-This by locating the function getAllowedFileExtensions() within the index.html file and add the file extension '.adoc' to the return statement, for example return ".md,.adoc"; .
The display of HedgeDoc files containing basic Markdown (as well as Mermaid and MathJax elements) is possible by manually using 'download' for the homepage URL parameter within a Docsify-This URL (not available in the Docisfy-This.net Web Page Builder), for example: https://docsify-this.net/?basePath=https://demo.hedgedoc.org/crN3ispNQdejWkUXXIXYQA&homepage=download
Here is an additional example, using the HedgeDoc file https://demo.hedgedoc.org/oisWMy9ZS36PE6TvYhJC4A?both (seen in split-screen view) and and rendered as a web page by Docsify-This https://docsify-this.net/?basePath=https://demo.hedgedoc.org&homepage=oisWMy9ZS36PE6TvYhJC4A/download&edit-link=https://demo.hedgedoc.org/oisWMy9ZS36PE6TvYhJC4A?both&toc=true&edit-link-text=Edit%20this%20Page%20in%20HedgeDoc
You can support HedgeDoc URLs (eg https://demo.hedgedoc.org/ip4SRxZYTEKa6JHr62XTiA) in the Web Page Builder of your own instance of Docsify-This by locating the line var hedgedocInstances = ''; within the index.html file and include your HedgeDoc instances separated by commas, for example var hedgedocInstances = 'demo.hedgedoc.org'; . Try out a demo instance of Docsify-This with support for demo.hedgedoc.org files at https://hibbitts-design.github.io/hedgedoc-docsify-this.
You can use camel case instead of hyphens for the names of Docsify-This URL parameters if prefered. Zum Beispiel, https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage= home.md&toc=true&toc-headings=h2,h3&edit-link=https://github.com/hibbitts-design/docsify-this-one-page-article/blob/main/home.md Und https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage =home.md&toc=true&tocHeadings=h2,h3&editLink=https://github.com/hibbitts-design/docsify-this-one-page-article/blob/main/home.md are equilivent.
To use the new GitHub.dev web editor (currently in Beta) for 'Edit this Page' links, change github.com to github.dev for GitHub.com files entered into the Web Page Builder Markdown File URL field.
There are multiple ways to get a raw Markdown file available online, here are three options to help you get started:
GitHub or Codeberg:
Gist (GitHub Gists):
.md (eg myfile.md )Personal or Organizational Website:
Some text editors, such as Microsoft Visual Studio (including the online GitHub.dev web editor), have the ability to link your own CSS so Markdown previews are more visually accurate. If your editor supports this ability, the below CSS files can be used.
Docsify-This (based on the Docsify Open Publishing Starter Kit) CSS:
https://docsify-this.net/assets/css/editor.css
FontAwesome CSS:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
Enhanced Previews with Microsoft Visual Studio
For an even closer visual representation of your Docsify-This pages in Microsoft Visual Studio, do the following:
docs folderTIP: If you change the VSCode setting for Workbench › Editor: Show Tabs to single then the docsify preview area will remain in place as you edit multiple Markdown files.
You can load custom default settings in the Docsify-This Web Page Builder using URL parameters. This ability is especially helpful for Docsify-This online sessions, workshops, or when users collaborate and assist one another. Along with the standard Docsify-This URL parameters, the Web Page Builder also offers the following specific parameters:
https://docsify-this.net/?url-field=https://codeberg.org/paulhibbitts/docsify-this-one-page-course/src/branch/main/home.mdhttps://docsify-this.net/?url-field=empty You can even just type docsify-this.net? in front of an online Markdown file URL that you are viewing (such as files hosted on GitHub, Codeberg, or raw source files) to instantly set up the Docsify-This Web Page Builder with that file. Once the Web Page Builder loads, press the Return key — no need to leave the keyboard — to see Docsify-This display the Markdown file as a web page! For example, https://docsify-this.net?https://github.com/hibbitts-design/docsify-this-one-page-course/blob/main/home.md .
https://docsify-this.net/?url-field=https://codeberg.org/paulhibbitts/docsify-this-one-page-course/src/branch/main/home.md&edit-link-checkbox=truehttps://docsify-this.net/?show-page-options=truehttps://docsify-this.net/?advanced=true For example, the following URL will display the Advanced Web Page Builder, with the Markdown file URL set to https://github.com/hibbitts-design/docsify-this-multiple-page-course-site/blob/main/home.md , the site name 'CPT-363' along with a Docsify custom Sidebar and Navbar to be included: https://docsify-this.net/?url-field=https://github.com/hibbitts-design/docsify-this-multiple-page-course-site/blob/main/home.md&sidebar=true&loadSidebar=true&loadNavbar=true&name=CPT-363
The quickest way to create such a shareable URL is to use the Docsify-This Web Page Builder to generate a Docisfy-This web page URL, and then replace the URL parameter basepath with url-field using the full path of the source Markdown file URL. For example, the URL https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&sidebar=true&maxLevel=3 would be changed to https://docsify-this.net/?url-field=https://github.com/hibbitts-design/docsify-this-one-page-article/blob/main/home.md&homepage=home.md&sidebar=true&maxLevel=3.
The provided basePath parameter and/or optional homepage parameter may not be correct, verify that these items lead to accessible content. This error message may also result from a Cross-Origin Resource Sharing (CORS) policy, which restricts resources on a web page to be requested from another domain. If possible, relocate files to a domain that supports cross-origin requests or alternatively if the domain in question is under your control explore re-configuring CORS related settings. You can confirm the cause of the 404 message by viewing the errors displayed in the Browser Javascript Console.
When displaying GitHub Markdown files, the branch name is assumed to be main , and other paths will likely cause a 404 file not found message. When displaying Codeberg Markdown files, the path is assumed to contain /src/branch/main and other paths will likely cause a 404 file not found message.
Due to not being able to update Navbar or custom Sidebar links before page rendering, 'Edit this Page' links cannot be automatically updated to their correct target pages. Manually pass a URL pointing to the Git Repository using the URL parameter edit-link as a workaround, for example https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-site/main&homepage=home .md&loadNavbar=_navbar&edit-link=https://github.com/hibbitts-design/docsify-this-multiple-page-site&edit-link-text=GitHub%20Repository Und https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/docsify-this-cmpt-363-222-site/main&homepage=home.md&loadNavbar=_navbar.m d&sidebar=true&loadSidebar=_sidebar.md&edit-link=https://github.com/paulhibbitts/docsify-this-cmpt-363-222-site/tree/main&edit-link-text=GitHub%20Repository
Docsify is likely displaying the last cached version. To ensure the most recent version of a file is loaded, do a hard refresh of your Browser cache.
The most likely cause for embedded images in Markdown not being displayed as expected is the use of relative paths (ie  ) - review image paths and ensure the full path to each image is used (ie  ). Likewise, if images in HTML are not being displayed as expected the likely cause is again the use of relative paths (ie <img src="images/filename.jpg" alt="Alt Text"> ) - use absolute URLs for HTML image sources (ie <img src="https://raw.githubusercontent.com/user/repository/main/images/filename.jpg" alt="Alt Text"> ).
Due to iframe cross-domain issues embedded content may not be able to be displayed. Use the included rich media embed service embed.ly as a workaround.
For example, the following iFrame HTML:
< iframe src =" https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/embed?start=false&loop=false&delayms=3000 " frameborder =" 0 " width = 780 " height="585" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" > </ iframe >Would be changed to:
< a class =" embedly-card " data-card-controls =" 0 " data-card-align =" left " data-card-width =" 100% " href =" https://docs.google.com/presentation/d/1BLaaOTsGxDmNcAhg6pdx3hl9IvI8NErg8Oe5ceh83fw/edit?usp=sharing " > Grav and Docsify Slides Placeholder </ a > When displaying a Docsify Sidebar or custom Sidebar, it is expected that page header levels start with a H1 level header.
When the search field is enabled in a Docsify custom Sidebar, only pages listed and linked in the Sidebar will be indexed for the search. Any pages linked in an optional Navbar will not be included in searches.
Docsify-This (as with Docsify itself) will only execute the first script included in a Markdown page, as described in the Docsify documentation.
Have you tried out Docsify-This? Share your feedback about Docsify-This
By leveraging his extensive UX design expertise and systems-oriented approach, Paul helps teams and individuals utilize open content in a range of education and publication settings, especially in connection with his Markdown-based Docsify and Grav CMS open-source projects. Professional services include user experience and workflow consulting, premium support subscriptions, workshops, and custom development. Sound of interest? Send a note to [email protected].
This open source project is by Paul Hibbitts of HibbittsDesign.org.
??♂️Special Thanks
Beau Shaw for his Remote Docsify example.
Alan Levine for the inspiration of a consolidated ReadMe collection.
