Me encanta ¡Guide Brother te enseña a crear un sitio web de tipo documento! ¡Gratis y de alta velocidad!

¡Recuerde cuando publiqué la "versión V2.0 de la versión sorpresa de la entrevista JavaGuide!" ¡Ven con su versión de lectura en línea! "En este artículo, ¿prometí enseñarle cómo crear el siguiente sitio web de tipo de documento?

En este artículo, la Guía le enseñará cómo crear un sitio web de tipo documento como el siguiente: puede usarlo como documentación del proyecto o como su propio pequeño almacén de conocimiento.

El tutorial oficial del sitio web también es muy detallado, la dirección está aquí: https://docsify.js.org/#/zh-cn/quickstart , pero mi tutorial es más adecuado para un uso práctico.

Los archivos de origen de todos los contenidos que se muestran a continuación están aquí: https://github.com/Snailclimb/docsify-demo

Dirección de visualización del efecto final: https://snailclimb.gitee.io/docsify-demo/#/

I. condición previa

Asegúrese de descargar e instalar NPM en su computadora y use este comando: npm i docsify-cli -ginstale la herramienta docsify-cli.
Asegúrese de tener una cuenta de Github (la cuenta de código de nube es opcional, y mejor si está disponible).

2. Inicialice el proyecto y obtenga una vista previa

1. Crear una nueva carpeta:mkdir docsify-demo

2. Ingrese la carpeta y ejecute el comando de inicialización docsify: cd docsify-demo->docsify init ./

Encontrará los siguientes archivos en la carpeta docsify-demo, ¡explíquele uno por uno lo que hacen!

3. Previsualice el sitio web localmente: docsify serve ./luego visite:http://localhost:3000/

3. Agregue color a nuestro proyecto

Sugiero clonar mi repositorio: https://github.com/Snailclimb/docsify-demo , ejecútelo localmente, este es un sitio web típico construido usando docsify, puede usarse como referencia. Si desea crear un buen sitio web de documentación, puede cambiarlo según mi criterio.

3.1 Modificar el archivo de configuración index.html

Principalmente configure el nombre del sitio web del documento y abra algunas opciones de configuración.

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

<head>
  <meta charset="UTF-8">
  <title>docsify-demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <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="//unpkg.com/docsify/lib/themes/vue.css">
</head>

<body>
  <div id="app"></div>
  <!-- docsify-edit-on-github -->
  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
  <script>
    window.$docsify = {
      name: 'docsify-demo',
      repo: 'https://github.com/Snailclimb/JavaGuide-Interview',
      maxLevel: 5,//最大支持渲染的标题层级
      subMaxLevel: 3,
      homepage: 'README.md',
      coverpage: true,
      loadSidebar: true,
      auto2top: true,//切换页面后是否自动跳转到页面顶部
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>

</html>

3.2 Agregar archivo de barra lateral

En el primer paso, activamos la opción de la barra lateral:

loadSidebar: true

Sin embargo, esto por sí solo no es suficiente, es necesario definir un nombre _sidebar.mdde archivo, el contenido del archivo es el contenido de nuestra barra lateral.

Como se muestra en la figura a continuación, definimos una barra lateral y le agregamos algo de contenido:

En general, se recomienda colocar el documento debajo del archivo docs, puede consultar mi repositorio: https://github.com/Snailclimb/docsify-demo

Una vez completada la modificación, encontrará que nuestro sitio web de documentos tiene más barras laterales y hace clic en el contenido correspondiente en la barra lateral para mostrar a la derecha.

3.3 Modificar contenido de la página de inicio

Modifique REDME.md para que lea como sigue:

Entonces la página principal de nuestro sitio web de documentos se convierte así:

3.4 Agregar una portada

En el primer paso, hemos abierto la opción de portada:

 coverpage: true

Con el fin de permitir que nuestro sitio de documentación de la cubierta, también tenemos que crear un nombre para _coverpage.mdel archivo, de la siguiente manera

Luego, cuando volvemos a abrir el sitio web, tenemos una portada, como se muestra a continuación:

4. Algunos complementos útiles

Permítanme presentarles brevemente algunos complementos que creo que son más prácticos. Para obtener más complementos, haga clic aquí: https://docsify.js.org/#/zh-cn/plugins .

4.1 Agregar resaltado de código Java

Introduzca manualmente los complementos de resaltado de código Java:

<!--Java代码高亮-->
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>

4.2 Agregar función de búsqueda de texto completo

Introducir complemento:

  <!--全文搜索,直接用官方提供的无法生效-->
  <script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js">

Configurarlo:

  <script>
    window.$docsify = {
      ......
      //全文搜索
      search: {
        maxAge: 86400000, // 过期时间，单位毫秒，默认一天
        paths: 'auto',
        placeholder: '搜索',
        noData: '找不到结果',
        // 搜索标题的最大程级, 1 - 6
        depth: 3,
      },
    }
  </script>

Entonces nuestro sitio web de documentos tiene una función de búsqueda de texto completo:

4.3 Copiar código al portapapeles

¡Solo agregue el complemento!

<!-- 复制代码到剪贴板 -->
<script src="//unpkg.com/docsify-copy-code"></script>

4.4 Zoom de imagen y conteo de palabras

¡Presente los siguientes dos complementos!

<!-- 图片缩放 -->
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
<!-- 字数统计 -->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

4.5 editar en github

Realice la siguiente configuración, preste atención para modificar su propia ruta.

  <script>
    window.$docsify = {
      ......
      plugins: [
        EditOnGithubPlugin.create('https://github.com/Snailclimb/JavaGuide-Interview/blob/master/')
      ],
    }
  </script>

Luego, cada una de nuestras páginas aparece con la opción "Editar en github". Después de hacer clic en ella, saltará a la edición de página correspondiente en Github.

V. Despliegue

5.1 Implementar en Github

1. Github crea un nuevo almacén, por lo que no diré nada sobre este paso.

2. Envía el proyecto

3. Abra las páginas de Github

¡Entonces se puede acceder a su proyecto en línea!

5.2 La sincronización con la nube de código mejora la velocidad de acceso doméstico

1. Importar proyecto Github

Preste atención para verificar si el siguiente código abierto está abierto, de lo contrario, otros no podrán acceder.

2. Elija el servicio de páginas de Gitee

3. Cosecha resultados alegres

Introducción del autor: autor del proyecto Github 70k Star JavaGuide (nombre público del mismo nombre). Cada semana, algunos productos secos originales se actualizarán en la cuenta pública. Los antecedentes de la cuenta pública responden "1" para recibir los materiales de aprendizaje necesarios para ingenieros de Java + entrevista en pdf.