跳到主要内容

项目介绍

项目名称​

yntx-black-iron-tutorial 与你同行-黑铁教程

技术选型​

黑铁教程是主打程序员基础入门知识文档库，考虑到主要是采用 Markdown 格式编写静态文档来展示，目前市面上有非常多的文档框架，采用服务端渲染方式来加快静态文件访问和提高 SEO。 参考的技术框架如下：

  4. 综合考虑，最后决定以 Docusaurus 框架构建本项目。

代码地址​

GitHub：https://github.com/yntx-it/yntx-black-iron-tutorial-fronted Gitee：https://gitee.com/yntx-org/yntx-black-iron-tutorial-fronted

演示环境​

https://yntx-it.github.io/yntx-black-iron-tutorial-fronted/

本地调试​

启动本地服务：

yarn start

启动成功后，访问 http://localhost:3000/yntx-black-iron-tutorial-fronted

部署 Github Pages​

推荐打开 powershell，执行下面命令

cmd /C 'set "GIT_USER=yntx-it" && yarn deploy'

开发教程​

1.导航栏配置​

docusaurus.config.js 文件

navbar: {
        title: '与你同行-黑铁教程', // 标题名称
        logo: {
          alt: '黑铁教程 Logo', // 图片描述
          src: 'img/logo.svg', // Logo图片
        },
        items: [
          {
            type: 'doc', // 导航栏类型
            docId: 'java/java', // 文档路径
            position: 'left', // 展示位置，左边
            label: 'Java教程', // 导航栏名称
          },
          {
            to: 'docs/interview', // 导航栏跳转地址
            label: '面试宝典', // 导航栏名称
            position: 'right', // 展示位置，左边
          },
          {
            to: '/blog', // 导航栏跳转地址
            label: '博客', // 导航栏名称
            position: 'right', // 展示位置，左边
          },
          {
            href: 'https://github.com/yntx-it', // href外链，GitHub仓库地址
            label: 'GitHub', // GitHub，默认使用内置图标展示，不是文字
            position: 'right', // 展示位置，右边
          },
        ],
      },

2.底部链接配置​

docusaurus.config.js 文件

// 底部链接
      footer: {
        style: 'dark', // 样式，深色
        links: [
          // 链接
          {
            title: '文档', // 分类标题
            items: [
              {
                label: 'Java教程', // 分类下的标签名
                to: '/docs/java', // 跳转地址
              },
              {
                label: '面试宝典', // 分类下的标签名
                to: '/docs/interview', // 跳转地址
              },
            ],
          },
          {
            title: '社区',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/yntx-it', // href外链
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/yntx-it',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/yntx-it',
              },
            ],
          },
          {
            title: '更多',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/yntx-it',
              },
            ],
          },
        ],
        // 底部版权声明
        copyright: `Copyright © ${new Date().getFullYear()} 与你同行技术, Inc. Built with Docusaurus.`,
      },

3.侧边栏配置​

sidebars.js 文件

const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
  // 使用自动生成侧边栏
  // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

  // But you can create a sidebar manually
  // docs侧边栏（暂无内容）
  docs: [],
  // Java侧边栏
  java: ['java/java', 'java/java-introduce', 'java/java-base'],
  // 面试侧边栏
  interview: [
    {
      type: 'category', // 类型为分类，展示的时候是可以下拉收缩的侧边栏项
      label: '常见面试题', // 侧边栏名称
      link: {
        type: 'generated-index', // 自动生成分类展示页内容
        title: '常见面试题', // 分类页标题
        description: '下面列举了一些常见的一些面试题专题。', // 分类页描述
        slug: '/interview', // 分类页地址
        keywords: ['面试'], // 关键字
        image: '/img/docusaurus.png', // 图片
      },
      collapsible: false, // 是否可伸缩
      collapsed: false, // 默认初始收起
      // 侧边栏子项
      items: [
        'interview/interview-algorithm',
        'interview/interview-design',
        'interview/interview-base',
        'interview/interview-collection',
        'interview/interview-concurrency',
        'interview/interview-jvm',
        'interview/interview-microservice',
        'interview/interview-mysql',
        'interview/interview-redis',
        'interview/interview-mq',
        'interview/interview-spring',
        'interview/interview-mybatis',
        'interview/interview-other',
      ],
    },
  ],
}

4.新增文档​

docs 目录下找到对应分类新增，新增后需要在 侧边栏配置 中对应分类添加文档路径。 例如新增一篇 Java 教程文档 1）在 docs/java/ 下新增一个 md 文件：java-test.md image.png 2）在 sidebars.js 文件 的侧边栏配置中新增该文件路径 image.png 效果如下： image.png

5.新增博客​

1）新增博客前，先配置博客的博主配置，方便博客书写。打开 authors.yml 文件如下图所示： image.png

LiZiBa: // 配置项key
  name: 李子捌 // 姓名
  title: 与你同行技术开发者 // 类似个性签名
  url: https://blog.csdn.net/qq_41125219 // 跳转路径
  image_url: https://github.com/Liziba.png // 头像图片路径

Johnnie Wind:
  name: 借力好风
  title: 与你同行技术开发者
  url: http://47.113.86.188:5555
  image_url: https://github.com/JohnnieWind.png

配置好后，可以通过配置项 key 来引入，下面将介绍如何新增一篇博客。 2）新增博客，在 blog 路径下创建博客文件 2022-11-21-hello.md

---
# 路由
slug: hello
# 标题
title: 你好，世界
# 作者
authors: [LiZiBa, Johnnie Wind]
# 标签
tags: [你好, 世界]
---

<!-- 下面是博客markdown内容 -->

Hello World!

3）新增完成，博客展示效果如下图： image.png