docsify this
v1.9.16: Merge pull request #161 from hibbitts-design
這個由Magical Documentation網站生成器Docsify構建的開源Web應用程序使您可以在不設置自己的網站的情況下將在線Markdown文件發佈為網頁。
查看DOCSIFY-通過將此讀數文件視為帶有可選側欄的網頁，該文件可以執行的操作，該網頁最多包含4個級別的標題！
圖1。 DOCSIFY-THIS.NET網頁構建器。
您是否嘗試過文檔？分享您有關文檔的反饋 -
DOCSIFY-這提供了一種在各種上下文中顯示和共享標記內容的簡便方法，而無需網站設置或構建過程。通過在Github或Codeberg上託管您的Markdown文件，您還可以利用版本控制（跟踪和反向更改的能力）並啟用協作。
使用Docsify-您可以：
docsify-這是一個自定義的Docsify開放發布啟動套件網站，該網站配置為通過以下格式通過URL參數渲染遠程標記文件：
https://docsify-this.net?basePath=URLpath&homepage=filename.md
basepath docsify參數是包含原始源標記文件呈現的URL路徑。如果文件被命名為預期的默認deftme.md ，則無需其他參數，否則還必須將主頁DOCSIFY參數設置為文件的名稱以呈現。 docsify-this url的一個示例是：https：//docsify-this.net/?basepath=https://raw.githubusercorcontent.com/hibbitts-design/docign/docsign/docsign-this-this-one-one-page-page-arpe-page-article/main article/main-main時間＆homepage=home.md =
docsify-可以從可以在Web瀏覽器中查看Markdown文件的內容的任何地方渲染文件，包括：
要直接渲染一個不使用上述網頁構建器的公共github存儲庫中存儲的文件，您需要在查看文件時點擊原始按鈕，以使用該文件的原始源URL（即raw.githubusercontent.com）。也可以通過激活該存儲庫中的github頁面，然後使用該文件的github頁面URL（即USERNAME.GITHUB.IO）來渲染存儲在私有github存儲庫中的文件。
可以通過可選的URL參數和源標記文件中的一小部分可用CSS類來自定義渲染的標記文件的外觀。除了支持標準降標，還包括嵌入。可選地，可以啟用帶有假設的頁面註釋。
尋找與Docsify一起出版的總體介紹 - 這是嗎？與Docsify-查看Markdown發布。
我只是因為您將（Markdown File）URL放入DOCSIFY的事實而感到震驚 - 然後您將一個URL返回到網頁上……完成了！拿起URL走。它是如此無縫。
- J. Groom，《今日收回》第39集（聯合創始人，收回託管）
我一直在使用Docsify-這是我的畢業生出版生產課程，部分是為了探索Markdown Publishing中的新模型，但也部分地探索了Tame Canvas，我覺得這很尷尬而笨拙。將我所有的課程記錄作為純文本文件，並通過github和docsify部署它們 - 這很容易，這使我的課程開髮變得輕而易舉。另外，我將所有材料保留在本地，並且可以使用它們重複使用它們而不依賴帆布。
- J. Maxwell（西蒙·弗雷澤大學（Simon Fraser University）出版計劃的主任兼副教授）
我幾年來找到的最好的工具 - 這是剛剛完成的作品之一，一直到核心。
- D. Malawey（得克薩斯州農工大學的多學科實驗室協調員）
DOCSIFY-通過我在GitHub存儲庫中使用的相同文檔中無縫地嵌入界面，這顯著改善了我的WordPress主題。反過來，這使我寫了更好的文檔！我幾乎沒有刮過Docsify的表面 - 這可以作為一種易於使用的Web發布工具。
- A. Levine又名Cogdog（獨立教育技術專家）
Docsify-這一被認為是2024年開放式教育獎的公開基礎設施類別的決賽入圍者 - 感謝所有Docsify.js.org維護者和貢獻者，以及通過Docsify-this-this-this-this-this-this-this-thissify-thisify-thisify-thies-docsify和其他開放的出版商，教育者和創作者與世界其他地區共享他們的開放內容。
Docsify以網頁顯示的在線宣傳文件的視覺外觀可以通過兩種方式更改：
例如，顯示位於https://raw.githubusercontent.com/ibbitts-design/docsign/docsify-this-one-one-page-article/main/main/home.md，帶有DOCSIFY側欄，包括標題最高3個級別，Docsify-This url is：：
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&sidebar=true&maxLevel=3這是docsify-this.net顯示相同URL的方式：
由Docsify-this.net顯示的網頁，顯示帶有最多3個級別的側欄的標記文件，如docsify-this URL所指定的。
了解有關下面的每個URL參數的更多信息，並在將URL參數和在線Markdown文件與一組現成的Docsify-this Markdown模板結合時，發現可能發生什麼。
基本URL參數（包括標準網頁構建器中）
例如，使用可選的瀏覽器標題標題參數在瀏覽器選項卡上為您的網頁設置自定義標題，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/demo-grav-open-mater-master-master/master/master/pages/04.resources時間“我的頁面”將是“我的％20頁”。
顯示一個“編輯此頁面”鏈接（默認位置是頁面底部），例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course-starte r-kit/main＆edit-link = https：//github.com/hibbitts-design/docsigy-open-publishing-starter-kit/blob/main/main/readme.md
用可選的編輯鏈接文本參數更改“編輯此頁面”鏈接的默認文本，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-course-course-starter-kit/main-main&edit-li nk = https：//github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/main/readme.md&edit-link-text = view%20as%20as%20markdown請注意，要使用必須對其進行編碼的空間使用文本，因此“查看為Markdown”將是“查看％20AS％20markdown”。
將“編輯此頁面”鏈接的位置從頁面的底部更改為頁面的頂部，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course-starter-kit-kit/main&toc = true＆edit-link = https：//github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/main/readme.md&edit-link-top=true
例如，使用可選的字體家庭參數為您的網頁設置自定義字體，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsify-open-course-course-kit/main/main/main/main/docs&homepage= resources.md時間當試圖更好地匹配嵌入式內容的視覺呈現與目標平台時，此參數可能特別有價值。請注意，必須使用其名稱中的空間字體來編碼，因此“快遞新”將是“ Courier％20new”。
使用可選的字體大小參數為網頁設置自定義字體大小，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course-starter-kit/main/main/main/main/docs&homepage= resources = resources.md&font&font-size-size=1。當試圖更好地匹配嵌入式內容的視覺呈現與目標平台時，此參數可能特別有價值。請注意，字體尺寸設置為REM單元。
使用可選的標頭重量參數為您的網頁設置自定義標頭字體重量（默認為400-常規）：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-course-course-kit/main/main/main/main/docs&homepage= resources.md&header-weight-weight-weight = reight = reight = reight = 600。
隱藏通常在每個顯示的文檔的底部顯示的信用，例如可選的隱藏信用證參數，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course-course-kit/main/main/main/main/docs&homepage= resources.md&hide-cristit-credits=true。
用假設啟用頁面註釋，例如可選假設參數，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsify-open-course-starter-kit/main/main/main/main/docs&homepage= resources.md&hypothesisississistosis=true=true。
例如，使用可選的行高參數為您的網頁設置自定義行高度，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsify-open-course-course-kit/main/main/main/main/docs&homepage= resources.md&line-lin.lin.lin.lin.-height-height-height-height-height = 1.5。
為所有鏈接設置自定義顏色，使用標準的十六進制格式定義，沒有“＃”符號，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-course-kit/main/main/main/main/docs&homepage= resources.md&link-color = rink-color = recccccccucccccccc0000 0000。
使用可選的maxlevel docsify參數設置DOCSIFY側欄的最大標題級別，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-publish-publishing-starter-kit/main/main/main/docs&homepage=Introdcuction .mdtroduction.md&sidebarcartrue = truetrue = trueplue&maxleclelculcul=3
例如，顯示具有可選側欄參數的Docsify側邊欄，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course-course-starter-kit/main＆sidebar = true
以可選的TOC參數顯示頁面的目錄，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-publish-publishing-publishing-starter-kit/main/main/main/docs&homepage= introduction.md&toc=true
將頁面標題級別（即H1，H2等）設置為以：例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-publish--publisher-publisher-kit/main/main/main/docs&homepage一下
例如，使用可選的TOC-Narrow參數的內容表不那麼寬，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/ibbitts-design/docsign/docsigh-open-publish-publisher-publisher--kit/main/main/main/docs&homepage= introduction.md&toc-narrow=true = true。當嵌入可能較小的屏幕區域的內容時，此參數可能特別有價值。
啟用圖像Zoom（敲擊頁面圖像以放大它們），並使用可選的Zoom-images docsify參數，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/paulhibbitts/docsify-this-markdown-content-content-demo/main--main＆zoom-image-images-images = true。要排除圖像，請使用 。
以下其他URL參數可用於DOCSIFY-此URL，除非另有說明，否則將包含在“高級網頁構建器”中。
補充URL參數（包括在高級網頁構建器中）
以可選的封面參數顯示Docsify自定義封面，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-publish-publisher-publishing-starter-kit/main/main/main/docs&homepage=homepage = home.md =
使用可選的封面色彩參數為封面設置自定義顏色，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-publish-publisher-publishter-kit/main/main/main/docs&homepage=homepage=home.md = home.md&coverpage=_cove=_coverpage.mdcage.md = 00
以可選的封面色彩模式參數為黑模式設置封面的自定義顏色，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsife-publish-publishing-publishing-starter-kit/main/main/main/docs&homepage=home .md＆dark-mode = true＆link-color = cc0000＆link-color-dark-mode = ff9e9e＆coverpage = _coverpage.md＆coverpage-color = cc0000＆coverpage-copage-color-dark-dark-mode = 4d0000
根據系統OS級偏好自動切換燈/深色主題，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-publish-publish--publisher-publisher-kit/main/main/main/docs&homepage= introduction.mdardarduction.mdardard.mdpark-modetrue=true
使用可選的編輯鏈接 - emoji參數（不包含在高級網頁構建器中）的“編輯此頁面”鏈接的默認表情符號，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/ibbitts-design/docsign/docsify-open-course-course-kit-kit/main＆edit-link-link = https://git hub.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-text = view%20ON%20ON%20Github&edit-link-emoji =：file_folder：file_folder：file_folder：
使用可選的lazy-load-load-images參數（不包括在高級網頁構建器中），啟用瀏覽器對圖像的懶惰加載，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsigh-docsife-docsife-open-publisher-publisher-publish--kit/main/main/main/docs&homepage一下Docsify側邊欄等的示例。
在黑暗模式下為所有鏈接設置自定義顏色，使用標準的十六進制格式定義，而沒有“＃”符號，並使用可選的鏈接彩色彩色模式參數來定義：例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course--course-啟動器-KIT/MAIN/DOCS＆HOMEPAGE = Resources.md＆link-color = cc0000＆dark-mode = true＆link-color-dark-mode = ff9e9e。
為所有鏈接設置自定義的懸停顏色，使用標準的十六進制格式定義，沒有“＃”符號，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-pen-course-kit/main/main/main/main/docs&homepage= resources = resources.md&link-hover-colorcccccccccccccccccccccccccccccccccccccccccccccccccced0000 00。
在黑暗模式下為所有鏈接設置自定義懸停顏色，使用標準的十六進制格式定義，沒有“＃”符號，並使用可選的鏈接懸掛式顏色 - 彩色模式參數來定義：例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-course-sta rter-kit/main/docs＆homepage = resources.md＆link-color = cc0000＆dark-mode = true＆link-hover-hover-hover-polor-dark-mode = ff9e9e。
使用可選的鏈接文本數據參數設置自定義文本裝飾，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-course-course-kit/main/main/main/main/docs&homepage= resources = resources.md&link-text-decterx-decortast-decortast-decortast-decorate=none
用可選的鏈接 - 文本 - 刪除參數為所有鏈接設置自定義懸停文本裝飾，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/ibbitts-design/docsign/docsife-open-course-course-starter-kit/main/main/main/main/docs&homepage= resources = resources.md&link-text-decterx-decorts-decortal-hover-ports-hovertlineline
您可以從可選的LoadFavicon參數傳遞的圖像文件中設置自定義favicon，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-docsify-this-markdown-content-content-demo/main＆loadfavicon = favicon = open-access.png
從當前目錄中加載Docsify頁腳，並以可選的LoadFooter Docsify參數傳遞。 https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-open-publish-publisher-publishing-starter-kit/main/main/main/docs&homepage= introduction.md時間fototer = _footer=_md
從可選的loadNavbar docsify參數傳遞的降價文件中加載文檔自定義納維托。
https://docsify-this.net?basepath = https://raw.githubusercortent.com/ibbitts-design/docsign/docsify-open-publish-publishing-publisher--kit/main/main/main/docs&homepage= introdcuction = introduction.md&lofarodnavbar = _navbar = _navbar.md
從可選的LoadSidebar Docsify參數中加載文檔自定義側欄，例如：
https://docsify-this.net/?basepath = https://raw.githubusercontent.com/paulhibbitts/docsify-docsify-docsify-this-cmpt-363-222222222-site/main時間＆homepage=homepage=home.home.md&md&md&sidebar =
例如，在Docsify自定義側欄（IE文件'logo.png）中顯示帶有可選徽標DOCSIFY參數的徽標圖像：
https://docsify-this.net/?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsign/docsife-multiph-multiple-page-course-course- site/main＆homepage = home.md＆sidebar = true＆loadsidebar = _sidebar.md＆loadnavbar = _navbar.md＆name = cpt-363＆logo =/images/logo.png必須提供完整的文件夾路徑和文件名。還必須提供網站名稱，並將用作徽標的Alt文本。
將Navbar項目合併到較小屏幕上的側邊欄頂部，例如： https://docsify-this.net/?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsign/docsify-this-multiple-page-cours e-Site/main＆homePage = home.md＆sidebar = true＆loadsidebar = _sidebar.md＆loadNavbar = _navbar.md＆mergenavbar = true＆name＆name = cpt-363
在DOCSIFY自定義側欄（即文件'_SIDEBAR.MD）中顯示網站的名稱，例如：
https://docsify-this.net/?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsife-this-multiple-page-co URSE SITE/MAIN＆HOMEPAGE = HOME.MD＆SINDBAR = true＆loadsidebar = _sidebar.md＆loadNavbar = _navbar.md＆Search＆Search = true＆name = cpt-363當提供此參數時，它也將自動用作瀏覽器選項卡標題。
使用可選頁面標題參數設置自定義頁面標題，例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/paulhibbitts/demo-grav-open-mater-master-master/master/master/master/pages/04.4.Resrces時間將是“我的％20頁”。
在頁面內容區域中顯示分頁按鈕（DOCSIFY SUXIFY SIDEBAR需要），例如：
https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsign/docsify-this-multiple-page-cour se-site/main＆homepage = home.md＆sidebar = true＆loadsidebar = _sidebar.md＆loadnavbar = _navbar.md＆search＆search = true＆pagination = true
在多個頁面站點上啟用DOCSIFY搜索插件（當前包括文本和標記的匹配），包括帶有可選搜索框DOCSIFY參數的自定義側欄，例如：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsign/docsify-this-multiple-pag e course sition/main＆homepage = home.md＆sidebar = true＆loadsidebar = _sidebar.md＆loadNavbar = _navbar.md＆searchbox = true
將最大自動表目錄標頭級別設置在DOCSIFY自定義側欄（IE文件'_SIDEBAR.MD）中，例如：例如：
https://docsify-this.net/?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-docsify-docsify-this-cmpt-363-222222222-site/main時間＆homepage = homepage =
使用可選的SVG-ICONS參數（不包含在高級網頁構建器中）的SVG版本，而不是Web字體，例如：
https://v2.preview.docsify-this.net/?basepath = https://raw.githubusercontent.com/ibbitts-design/docsign/docsign/docsign-docsife-this-this-this-lms-content-pages/main--content-pages/main-main＆main＆homepage=schedule.md&ssvg--iconsterue.md&sontetrue
在畫布中嵌入內容
iframe代碼示例，包括將URL參數無縫匹配docsify-此內容與畫布：
< 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 >如果存在滾動條，則可能需要重新編輯您的iFrame代碼並調整“高度”值。
如何添加外部URL作為模塊項目？
模塊外部鏈接示例，帶有頁面的目錄：
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使用重定向工具在課程中創建自定義鏈接
重定向URL字段示例：
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（用於在頁面中嵌入內容）
外部工具（用於將課程導航或元素添加鏈接）
雖然您需要使用DocSify-這是一個基本的Markdown文件，但以下是一些模板，您可以使用這些模板，以顯示Markdown，Image，URL參數，甚至幾個HTML片段！
要使用這些模板，您通常會執行以下操作（每個模板中都包含特定說明）：
登錄到GitHub，或創建一個帳戶，如果您還沒有一個帳戶。
點擊在選定的模板存儲庫中使用此模板（右上綠色按鈕），然後選擇創建一個新的存儲庫
選擇新存儲庫的名稱以包含文件，然後點擊創建存儲庫以將模板文件複製到您自己的github帳戶
查看隨附的標記文件，例如home.md ，然後復制其URL。
轉到https://docsify-this.net，然後將復制的URL粘貼到Markdown文件URL字段中
選擇所需的頁面選項（例如DOCSIFY SINDBAR），然後點擊發布作為網頁按鈕，以將您的標記文件視為用於共享或嵌入的網頁
要在github中編輯文件，請在查看文件時點擊右上方的鉛筆圖標（編輯文件），進行更改，然後點擊提交更改...按鈕以保存這些更改。
一頁文章home.md文件由docsify-顯示為：
一頁課程home.md文件由docsify-顯示為：
多頁網站home.md文件，包括使用docsify-顯示的Markdown CSS類header-image-full-width的使用。
多頁打開發佈網站home.md文件，包括使用DOCSIFY自定義側欄文件，由Docsify-顯示為：
多頁課程站點home.md文件，包括使用Docsify自定義側欄文件和Docsify自定義Navbar文件，該文件顯示為：
示例頁面，包括使用font-family ， font-size和hide-credits URL參數，用於嵌入帆布LMS中的無縫內容，如docsify-this：
使用docsify-tht https://canvas.sfu.ca/courses/76692使用docsify-tht thistify-查看示例canvas lms網站。
docsify-this.net使用github markdown文件打開和協作工作流程。
使用Web服務器標記文件docsify-this.net工作流程。
使用DOCSIFY-在基於GIT的服務（例如GitHub或Codeberg）上顯示的Markdown文件時，您可以將（clone）文件下載到桌面上以進行本地編輯，然後上傳（pusp）更改回到在線文件。
例如，要在桌面上編輯github markdown文件，請執行以下操作：
了解有關使用GitHub桌面入門的更多信息。
在創作自己的Markdown內容時，可用以下CSS類可用。
< 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 > 在大屏幕上裁剪到250px的高度，小屏幕上的125px。
![ UX - User Experience ] ( images/12650723674_d5c85af332_k.jpg ' :class=banner-image ') 在大屏幕上裁剪至350px的高度，小屏幕上的175px。
![ 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 > 對於鏈接的文章預覽，嵌入式幻燈片/視頻等。
< a class =" embedly-card " data-card-controls =" 0 " data-card-align =" left " href =" https://blog.prototypr.io/defining-usability-e7bf42e8abd0 " > Defining usability </ a > 建議的寬度為1200px至2000px。
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image-fade ') 建議的寬度為1200px至2000px，並且目錄的展示不可用。
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image-fade-full-width ') 建議的尺寸為1200px至2000px寬度和400px至600px的高度，目錄的顯示不可用。
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image ') 將圖像縮放到％。
![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-75 ') 將圖像與邊界為％。
![ 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 > 製作原始的HTML圖像，其中包含大小尺寸響應的尺寸。
< 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 > 自動將其添加到所有IFRAMES中，使用源域'youtube.com'或'docs.google.com'。
< div class =" video-container-16by9 " > < iframe width =" 560 " height =" 315 " src =" https://www.youtube.com/embed/lJIrF4YjHfQ " > </ iframe > </ div > 除了DOCSIFY支持的Markdown CSS類外，您還可以在顯示的Markdown文件中定義自己的自定義類，例如：
Markdown文件中的CSS：
<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 >降價：
[ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=mybutton ') DOCSIFY-此設計旨在快速，輕鬆地顯示一個或多個遠程託管的Markdown文件。為了更大的自定義文件渲染並確保一致的可用性，即使不再可用的公共docsify-this.net實例，您也可以託管自己的docsify-timsify-實例。
要在GitHub頁面上託管您自己的實例，該頁面也支持自定義域的選項，請分叉或克隆DOCSIFY-此存儲庫到您的GitHub帳戶。然後，使用/docs文件夾啟用github頁面。
您還可以通過在Codeberg上運行的DocSify-實例，例如https://docsify-this.codeberg.page，通過創建一個名為pages的新存儲庫，然後選擇Paulhibbitts/docsify-this-this-app中的the template下拉菜單中的APP，然後選擇git內容（default Branch）選項（然後選擇Repos path repository ）。
另外，您可以將文件上傳到docsify-this /docs文件夾中的新創建的Codeberg存儲庫中，然後手動啟用Codeberg頁面。在Codeberg上運行的示例docsify-可以在https://codeberg.org/paulhibbitts/docsify-this-app上獲得，該實例使用將分支重命名為pages 。
如果要運行DOCSIFY-這是在您自己的WebSever上，請在服務器上創建一個目標文件夾，然後將docsify-此文件夾/docs中的文件複製到您新創建的服務器文件夾。您也可以將此docs文件夾用作自定義域根。
一個更友好的設置將是為docsify- this存儲庫提供（支持獲取上游更新），並使用github操作（例如ftp-deploy）將所有更改的存儲庫文件部署到WebServer。
您可以通過找到var allowedDomains = '';在index.html文件中，包括您的逗號分隔的允許域的列表，例如var allowedDomains = 'codeberg.org,raw.githubusercontent.com,hibbittsdesign.org'; 。
如果您想進一步自定義和控制Markdown內容的顯示，尤其是在渲染多個頁面站點時，可以安裝自己的Docsify Open Publisthing Starter啟動器套件（該託管Web應用程序基於基於）並將所有Markdown文件存儲在該站點中。您可以在docsify.js.org上了解有關Docsify自身功能的更多信息。
尋求一些幫助以獲取Docssify custom-using-this實例啟動並為您的組織運行嗎？ Paul提供了一系列與Docsify有關的專業服務 - 這與他聯繫以了解更多信息。
以下格式支持Markdown內容中字體Awesome免費圖標的顯示：
： fas fa-home fa-fw ：
上面的降價等效於HTML標記<i class="fas fa-home fa-fw" aria-hidden="true"></i> 。
當使用上述快捷碼用於字體Awesome圖標時，假定它是用於裝飾目的的，因此為了改善可訪問性aria-hidden="true"屬性會自動添加到圖標中。出於語義目的，建議您參考字體很棒的圖標和可訪問性指南。
Docsify可以使用以下樣式前綴 - 這是：
GITHUB培訓手冊與git markdown文件本地合作，由Docsify顯示為：
輕鬆地降低到github頁面鏈接的Markdown文件集，由DOCSIFY顯示 - 此幅度為：
SFU CMPT-363 Canvas LMS網站中用作課程內容的GitHub Markdown文件的集合。
GitHub Markdown文件的集合使用內聯CSS用作多個頁面SFU CMPT-363課程網站，帶有SFU Visual品牌，並啟用了docSify搜索插件，多個頁面SFU CMPT-363課程網站，帶有SFU Visual Branding和網站徽標，以及帶有expault Visual Styfip的示例MARKDOWN FILE，帶有默認的Visual Styfling。
GitHub Markdown Content Demo File，由DocSify-顯示為網頁，使用新的github.dev Web編輯器（當前在beta中）。
GitHub Markdown Content Demo File，由Docsify-顯示為“查看RAW MARKDOWN”鏈接的網頁。
Codeberg Markdown Content Demo文件，由Docsify-顯示為具有“查看RAW MARCDOWN”鏈接的網頁。
GitHub的乳膠支持示例Markdown文件，由DOCSIFY顯示 - 該網頁帶有“編輯此頁面”鏈接。
Mermaid-docsify示例github markdown文件，由docsify-顯示為帶有“編輯此頁面”鏈接的網頁。
docsify-此多語言站點模板，由docsify-顯示為：
DOCSIFY-此簡單的Visual Portfolio模板（基於Intion Portfolio模板），由DOCSIFY-顯示為：
docsify-此視覺投資組合模板（基於概念投資組合模板），由docsify-顯示為：
一個簡單的Markdown學生投資組合啟動模板（基於Justin Thoreson的Markdown Student Portfolio模板），可在GitHub和Docsify-this.net上查看，由DOCSIFY-THIS顯示為：
文檔簡介–
入門，中級初學者。
使用開源項目docsify –thissife – this的推出。
與Docsify –一起自行出版
中級，基本和高級方面的混合。
使用開源項目docsify –
使用頁面檢查器來識別您要嵌入文檔的字體家族和字體大小，然後使用font-family （編碼為“％20”）和font-size （REM單位）URL參數來傳遞該字體家族。例如，要將字體與Canvas LMS匹配：
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-22222-pages/main&h omepage = topics.md＆font-family = lato％20延遲，lato，helvetica％20neue，helvetica，arial，sans-serif＆font-size = 1
如果要包含一個包含嵌入式文檔的目錄 - 本內容，但是目標平台屏幕區域不是很寬，則可能需要嘗試可選的toc-narrow Display選項。例如，使用一個較窄的目錄區域，其中包含一個較小的屏幕斷點：https：//docsify-this.net?basepath = https：//raw.githubersercontent.com/paulhibbitts/cmptts/cmpt-363/main/main/main/main/docs/docs/2222 222 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22.ww =
使用PRISMJS代碼塊帶有語法突出顯示的docsify和bash，go，java，java，kotlin，php，php，python和swift的語言支持。要嵌入一個代碼塊，請使用三重背景的標準標準，並以語言名稱啟動塊，例如，將JavaScript代碼的塊嵌入語法中突出顯示以下內容：
``JavaScript
功能測試（）{
console.log（“ Hello World！”）;
}
````````
然後將顯示為：
function test ( ) {
console . log ( "Hello world!" ) ;
} 外部標記文件的內容可以嵌入到文檔中 - 本網頁以下內容：
[ 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 ')有關包含外部內容的其他示例，請查看docsify嵌入的文件。
支持鏈接和圖像的Wikilinks格式，以及在桌面編輯的Obsidian和其他平台中所示。
通過手動傳遞docsify-this url中的相關文件名（在docisfy-this.net網頁構建器中不可用）中，可以通過DOWNDOC顯示ASCIIDOC文件（'.ADOC'擴展名），例如： https://docsify-this.net/?basepath=https://raw.githubusercontent.com/asciidoctor/asciidoctor/asciidoctor-pdf/main/main/examples&homep age = basic-example.adoc＆edit-link = https：//github.com/asciidoctor/asciidoctor-pdf/blob/main/main/examples/basic-example.adoc
您可以通過在index.html文件中找到函數getAllowedFileExtensions()在網頁構建器中的ASCIIDOC文件顯示您自己的docsify的實例的顯示器，並將文件擴展名為“ .adoc”添加到return語句中，例如， return ".md,.adoc"; 。
可以通過手動使用docsify-this.nis.net網頁builder中的hedgedoc文件顯示包含基本降價（以及marmaid and Mathjax元素homepage的HEDGEDOC文件（以及Mermaid和MathJax元素）。 https://docsify-this.net/?basepath=https://demo.hedgedoc.org/crn3ispnqdejwkuxxixyqa＆homepage = download
這是一個附加示例，使用hedgedoc文件https://demo.hedgedoc.org/oiswmy9zs36pe6pe6tvyhjc4a?both（在拆分屏幕視圖中看到），並通過文檔呈現為網頁。 https://docsify-this.net/?basepath=https://demo.hedgedoc.org&homepage=Oiswmy9zs36pe6pe6tvyhjc4a/download&edit-link= https://demo.hedgedoc.org/oiswmy9zs36pe6tvyhjc4a？
您可以在您自己的docsify-thine the Line var hedgedocInstances = '';的網頁構建器中支持Hedgedoc url（例如https://demo.hedgedoc.org/ip4srxzyteka6jhr62xtia））在index.html文件中，包括逗號分隔的Hedgedoc實例，例如var hedgedocInstances = 'demo.hedgedoc.org'; 。在https://hibbitts-design.github.io/hedgedoc-docsify-this上嘗試使用DOCSIFY的演示實例，並支持docsify-the docsify-the docsify-hedgedoc.org文件。
您可以使用駱駝盒而不是連字符作為DOCSIFY的名稱 - 如果需要，該URL參數。例如， https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsign/docsigh-docsife-this-one-one-page-article/main＆amain＆amain＆homepage= = home.md＆toc = true＆toc-headings = h2，h3＆edit-link = https：//github.com/hibbitts-design/docsigh-docsify-this-one-one-page-article/blob/main/main/main/home.md 和https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsign-docsify-this-one-one-page-article/main＆amain＆amain＆homepage = home.md＆toc = true＆tocheadings = h2，h3＆editlink = https：//github.com/hibbitts-design/docsife--this-one-one-page-article/blob/main/main/main/home.md是平衡的。
要使用新的github.dev Web編輯器（當前在beta中）進行“編輯此頁面”鏈接，請將github.com更改為github.dev文件，輸入了網頁構建者標記文件URL字段中的github.com文件。
有多種方法可以在線獲取RAW Markdown文件，這裡有三個選擇可以幫助您入門：
Github或Codeberg：
GIST（Github Gist）：
.md結尾的文件名（例如myfile.md ）個人或組織網站：
一些文本編輯器，例如Microsoft Visual Studio（包括在線github.dev Web編輯器），具有鏈接您自己的CSS的能力，因此Markdown Previews在視覺上更準確。如果您的編輯器支持此功能，則可以使用以下CSS文件。
Docsify-此（基於Docsify Open Publishing入門套件）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
Microsoft Visual Studio增強了預覽
有關您的文檔的直觀表示，這是Microsoft Visual Studio中的此頁面，請執行以下操作：
docs夾文件夾提示：如果更改Workbench的VSCODE設置›編輯器：顯示單個選項卡到單個，則在編輯多個Markdown文件時，DocSify預覽區域將保持到位。
您可以使用URL參數加載自定義默認設置 - 本網頁構建器。此功能對文檔尤其有用 - 本在線會議，講習班或用戶協作並互相協助時。與標準DOCSIFY-此URL參數一起，網頁構建器還提供以下特定參數：
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您甚至可以鍵入docsify-this.net？在您要查看的在線降價文件URL（例如GitHub，Codeberg或原始源文件上託管的文件）的前方，以立即使用該文件設置Docsify-本網頁構建器。網頁構建器加載後，按返回鍵（無需離開鍵盤）即可查看docsify-此鍵將標記文件顯示為網頁！例如， 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例如，以下URL將顯示高級網頁構建器，並將Markdown文件URL設置為https://github.com/hibbitts-design/docsify-this-multiple-page-course-site/blob/main/home.md https://docsify-this.net/？
創建這樣的可共享URL的最快方法是使用Docsify-本網頁構建器生成Docousfy-此網頁URL，然後使用源標記文件URL的完整路徑將URL參數basepath用url-field替換為URL參數basepath。 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/？
所提供的基本參數和/或可選的主頁參數可能是不正確的，請驗證這些項目導致可訪問的內容。此錯誤消息也可能來自交叉原始資源共享（CORS）策略，該策略限制了從另一個域中請求的網頁上的資源。如果可能的話，將文件重新安置到支持交叉原始請求的域，或者如果所討論的域在您的控件下方，則將文件重新安置到探索與CORS相關的重新配置相關的設置。您可以通過查看瀏覽器JavaScript控制台中顯示的錯誤來確認404消息的原因。
顯示GitHub Markdown文件時，假定分支名稱main ，其他路徑可能會導致未找到404個文件。顯示Codeberg Markdown文件時，假定該路徑包含/src/branch/main和其他路徑可能會導致未找到404文件。
由於無法在頁面渲染之前更新Navbar或自定義側欄鏈接，因此“編輯此頁面”鏈接無法自動更新到其正確的目標頁面。 edit-link https://docsify-this.net?basepath = https://raw.githubusercontent.com/hibbitts-design/docsign/docsign-docsife-this-multiple-page-site/main＆amain＆amain＆amain＆homepage=home .md&loadNavbar=_navbar&edit-link=https://github.com/hibbitts-design/docsify-this-multiple-page-site&edit-link-text=GitHub%20Repository 和https://docsify-this.net/?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-docsify-this-cmpt-363-22222222222-site/main＆homepage=homepage=home.md = d＆sidebar = true＆loadsidebar = _sidebar.md＆edit-link = https：//github.com/paulhibbitts/docsify-this-cmpt-363-222-site/tree/tree/main/main＆main＆main＆main＆eedit-link-ink-text-link-text = Github%20Repository
Docsify可能正在顯示最後一個緩存版本。為了確保已加載文件的最新版本，請重新刷新瀏覽器緩存。
未按預期顯示嵌入式圖像的最可能原因是使用相對路徑（即 ） - 查看圖像路徑並確保使用每個圖像的完整路徑（即 ）。同樣，如果未按預期顯示HTML中的圖像，則可能的原因可能再次使用相對路徑（即<img src="images/filename.jpg" alt="Alt Text"> ） - 使用絕對URL用於HTML圖像源（ <img src="https://raw.githubusercontent.com/user/repository/main/images/filename.jpg" alt="Alt Text"> ）。
由於iframe，跨域問題嵌入了內容，可能無法顯示。使用隨附的豐富媒體嵌入服務emb.ly作為解決方法。
例如，以下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 >將更改為：
< 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 > 在顯示DOCSIFY側欄或自定義側邊欄時，可以預期頁面標頭級別以H1級標頭開頭。
當在DOCSIFY自定義側邊欄中啟用搜索字段時，僅在側邊欄中列出和鏈接的頁面索引以進行搜索。搜索中鏈接的任何頁面都不會包含。
docsify-（與DocSify本身一樣）只能執行Markdown頁面中包含的第一個腳本，如DOCSIFY文檔中所述。
您是否嘗試過文檔？分享您有關文檔的反饋 -
通過利用其廣泛的UX設計專業知識和麵向系統的方法，Paul可以幫助團隊和個人在一系列教育和出版環境中利用開放內容，尤其是與他的基於Markdown的Docsify和Grav CMS開放源代碼項目有關。專業服務包括用戶體驗和工作流諮詢，高級支持訂閱，研討會和自定義開發。感興趣的聲音？將筆記發送到[email protected]。
這個開源項目由Hibbittsdesign.org的Paul Hibbitts提供。
?? ♂️特別感謝
博·肖（Beau Shaw）為他的遠程文檔示例。
艾倫·萊文（Alan Levine）的靈感來源於合併的寄信人收藏。
