Utilice la herramienta de documentación de código abierto docsify para escribir documentos en una postura de blog

premisa

La siguiente introducción es un extracto de la introducción en el sitio web oficial de docsify https://docsify.js.org

"Docsify" es un generador de sitios web de documentos mágicos. Él puede ayudarlo rápidamente a generar un sitio web de documentos. Es diferente GitBook, Hexoel lugar es que no genera .htmldocumentos estáticos , todo el trabajo de conversión se realiza en tiempo de ejecución. Si quieres empezar a usarlo, simplemente crea un index.htmllisto para empezar a escribir el documento y lo despliega directamente GitHub Pages(nube de código Pages, A Mouyun OSSo nube de ganso COS, etc.). Sus principales características son las siguientes:

No es necesario compilar, publicar directamente después de escribir el documento ( markdownconversión de documento en tiempo de ejecución )
Fácil de usar y liviano (~ 21kB después de la compresión, por supuesto, markdownel tamaño del documento no se incluye aquí )
Búsqueda inteligente de texto completo
abundanteAPI
Soporte Emoji, puede agregar emoticonos al texto.
compatibleIE11
Apoyar la representación del lado del servidorSSR

La mayor ventaja de "docsify" es que permite a los usuarios sentirse "escribir documentos con la postura de los blogs, y viceversa: usar la postura de escribir documentos para escribir blogs" . docsifyEl costo de aprendizaje es muy bajo, la implementación es simple y la documentación oficial es muy completa.En principio, solo se requiere una markdowngramática e Node.jsinstalación comprensibles , y también es ITmuy amigable para los profesionales no técnicos. El sitio del conocido propietario de la cuenta pública técnica "JavaGuide" se docsifyconstruye utilizando el método. Se presentan brevemente las siguientes docsifyposturas.

Instale docsify e inicialice el proyecto

docsifyEs un Node.jscomplemento, por lo que Node.js debe instalarse con anticipación. Una vez completada la instalación, instálela globalmente mediante el siguiente comando docsify:

npm i docsify-cli -g

Suponiendo que hay un /docsify-demodirectorio en el disco, el docsify initproyecto se puede inicializar directamente a través del comando en este directorio :

# 先进入docsify-sample目录，在docsify-sample目录打开命令行
docsify init

Después de que el comando se ejecute correctamente, se generarán tres nuevos archivos en el directorio del proyecto de la siguiente manera:

index.htmlPara el archivo de entrada css, jsy los elementos de configuración se modifican en este archivo.
README.mdSe representará como el contenido predeterminado de la página de inicio.
.nojekyllSe utiliza para evitar GitHub Pagesignorar archivos que comienzan con guiones bajos.

Luego llame al docsify servecomando y acceda http://localhost:3000para realizar una vista previa local, el efecto es el siguiente:

❝Al introducir brevemente las funciones de docsify, se utilizan todos los parámetros de configuración predeterminados, en general, no se recomienda modificar los elementos de configuración predeterminados.

docsifyLa modificación del elemento de configuración o la adición de recursos estáticos se index.htmloperan básicamente en el archivo, mientras que otros markdownarchivos (incluida la barra lateral incorporada, el archivo de portada y los artículos agregados por usted mismo) se cargan y procesan en tiempo de ejecución.

Configuracion basica

Un elemento de configuración básico es el siguiente:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>神奇的docsify</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 设置浏览器图标 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 默认主题 -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>

<body>
    <!-- 定义加载时候的动作 -->
    <div id="app">加载中...</div>
    <script>
        window.$docsify = {
            // 项目名称
            name: 'docsify-demo',
            // 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
            repo: 'https://github.com/zjcscut/docsify-demo',
            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
            loadSidebar: true,
            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            maxLevel: 4,
            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级，建议配置为1或者2
            subMaxLevel: 2
        }
    </script>
    <script>
        // 搜索配置
        window.$docsify = {
            search: {
                maxAge: 86400000,
                paths: auto,
                placeholder: '搜索',
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false,
                namespace: 'docsify-demo',
            }
        }
    </script>
    <!-- docsify的js依赖 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <!-- emoji表情支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
    <!-- 图片放大缩小支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
    <!-- 搜索功能支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>

</html>

Hay más elementos de configuración que puede consultar docsifyen 定制化 - 配置项una sección del documento. Cuanto más personalizados, más difícil es mantenerlos. Se recomienda utilizar la representación de archivo predeterminada para la barra lateral, la barra de navegación y la portada:

Barra lateral y barra de navegación

La "barra de navegación" debe configurarse en el directorio raíz index.htmlo en un _navbar.mdarchivo, y se puede utilizar emoji. Modifique el index.htmlarchivo aquí como:

<!-- index.html -->

<body>
  <nav>
    <a href="https://throwx.cn">???????? Throwable's Blog</a>
    <a href="https://spring.throwx.cn">❤️❤️ Spring专栏</a>
  </nav>
  <div id="app">加载中......</div>
</body>

El efecto es el siguiente:

La "barra lateral" debe _sidebar.mdconfigurarse en el archivo en el directorio raíz . El formato básico es:

* 第一个章节的标题

 * [第一个章节第1篇文章的标题](第一个章节第1篇文章的标题的markdown文件)
 * [第一个章节第2篇文章的标题](第一个章节第2篇文章的标题的markdown文件)
 ......

* 第二个章节的标题

 * [第二个章节第1篇文章的标题](第二个章节第1篇文章的标题的markdown文件)
 * [第二个章节第2篇文章的标题](第二个章节第2篇文章的标题的markdown文件)
 ......

El efecto de la barra lateral renderizada es:

第一个章节的标题
   - 第一个章节第1篇文章的标题
   - 第一个章节第2篇文章的标题
第二个章节的标题
   - 第二个章节第1篇文章的标题
   - 第二个章节第2篇文章的标题

Cambio de tema

❝Para cambiar el tema, solo necesita cambiar el archivo css del tema correspondiente en index.html en el directorio raíz❞

docsifyTodos los temas compatibles y los efectos de vista previa que se enumeran actualmente en la lista oficial son los siguientes:

Vue(Tema predeterminado):<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">

Buble：<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">

Dark：<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">

Pure：<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">

Dolphin：<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css">

Docsify-Themeable-Default：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">

Docsify-Themeable-Sample：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">

Docsify-Themeable-Sample-Dark：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">

El que más te conviene.

Cubierta de diseño

La portada debe _coverpage.mdconfigurarse en el archivo del directorio raíz . Por ejemplo docsify, el contenido de la portada del documento oficial es el siguiente:

<!-- _coverpage.md -->

![logo](https://throwable-blog-1256189093.cos.ap-guangzhou.myqcloud.com/202009/_media/icon.svg)

# docsify <small>3.5</small>

> 一个神奇的文档网站生成器。

- 简单、轻便 (压缩后 ~21kB)
- 无需生成 html 文件
- 众多主题

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)

El efecto de renderizado es el siguiente:

El autor también hizo una página de inicio fea con referencia a esta configuración, el contenido es el siguiente:

![logo](https://throwable-blog-1256189093.cos.ap-guangzhou.myqcloud.com/202009//leaf.svg)

# Spring Album <small>0.0.1</small>

> 试下写个Spring相关的专栏，这是原始版本，暂定包括下面的栏目：

- `SpringBoot2.x`入门系列 
- `SpringBoot2.x`进阶和实战
- `SpringBoot`源码系列

[GitHub](https://github.com/zjcscut/spring-boot-guide)
[Get Started](#Spring)

El efecto de renderizado es el siguiente:

El contenido de la portada puede estar escrito en gramática htmlo en uso markdown, con un alto grado de libertad.

❝El color de fondo de la portada se cambia aleatoriamente, puede usar un ![color](#f0f0f0)color de fondo fijo ❞

implementación del proyecto docsi fy

Introducir principalmente la implementación de GitHub PagesTencent Cloud COS, otros métodos de implementación similares Coding Pageso de Alibaba Cloud OSS, etc. se pueden implementar con referencia a los dos métodos que se presentan a continuación.

Implementar en páginas de GitHub

Primero construye un Githubalmacén y sube los archivos del proyecto:

Haga clic en el Settingsbotón en el círculo rojo en la esquina superior derecha para configurar Github Pages:

Después de guardar, configure la resolución de nombre de dominio personalizado, es decir, resuelva el nombre de dominio al proyecto Github Pages, y luego podrá acceder al proyecto a través del nombre de dominio personalizado.

❝ Por supuesto, Github también proporciona un subdominio gratuito para cada cuenta: account.github.io, necesitas crear un almacén llamado "account.github.io", enviar los archivos del proyecto a este almacén y configurar las páginas de Github. Puedes acceder a este proyecto a través de "account.github.io". ❞

Implementado en Tencent Cloud COS

He reunido un nombre de subdominio que se spring.throwx.cnresuelve en la nube Tencent COSdel docsifyproyecto, el proceso es simple. Primero, cree un depósito de almacenamiento de objetos y configúrelo en "lectura pública y escritura privada" :

Luego, docsifycopie los archivos de todo el proyecto en el depósito, "Los index.htmlarchivos deben estar en el directorio raíz del depósito" :

Entonces, 基本配置 - 静态网站el documento de índice (página de inicio) en el depósito de configuración es el siguiente:

Después de completar este paso, puede COSacceder al docsifyproyecto a través del nombre de dominio público . Finalmente COS, el nombre de dominio de la intranet al que se resuelve el nombre del subdominio puede acceder al proyecto a través del nombre del subdominio personalizado, y el efecto es el siguiente:

❝Los nuevos usuarios de Tencent Cloud tienen un privilegio de prueba gratuita de seis meses de COS y se recomienda probar cosas nuevas.

resumen

Si te gusta la markdowngramática y quieres usar la postura de los blogs para escribir documentos, o usar la postura de escribir documentos para escribir blogs, puedes probarlo docsifyTe gustará esta excelente herramienta de código abierto.

Materiales de referencia:

docsifyDocumentos oficiales:https://docsify.js.org

Almacén de proyecto de muestra:

Github：https://github.com/zjcscut/docsify-demo

Entrada a la demostración en línea del proyecto de muestra:

Nube Tencent:https://spring.throwx.cn

No hay manera, pero la técnica se puede lograr; si no hay manera, termina con la técnica.

Bienvenidos a todos a seguir la cuenta pública de Java Way

Buen artículo, estoy leyendo ❤️