npm 包 wikismith-site 使用教程

阅读时长 5 分钟读完

随着前端技术的不断进步,越来越多的 npm 包被发布出来,为开发者提供了更加方便快捷的工具。其中一个非常实用的 npm 包是 wikismith-site,它是一个帮助用户快速搭建文档网站的工具。本篇文章将介绍如何使用 wikismith-site 搭建自己的文档网站,并且会提供详细的教程和示例代码。

安装

首先,我们需要在本地安装 wikismith-site。在命令行中输入以下命令即可:

初始化

安装完成后,我们需要创建一个新的项目。在命令行中,进入一个空文件夹,并输入以下命令:

这个命令会在当前目录下生成一个新的项目,并且生成一个示例文档。

配置

在创建完项目后,我们需要对其进行一些配置。

修改项目名称

打开项目下的 config.js 文件,可以看到一个 siteName 字段,可以将其改为自己的项目名称。

添加文档

我们可以在 docs 文件夹下添加我们自己的文档。

例如,我们在 docs 文件夹下添加了一个 getting-started.md 文件,那么在项目的侧边栏中就会出现一个名为 Getting Started 的链接,点击它即可打开我们的文档。

修改主题

如果想要修改项目的主题,只需要在 config.js 文件中修改 theme 字段即可。wikismith-site 内置了一些默认的主题,例如:defaultvuepressdocsify。我们可以在主题的 Github 上找到相应的文档,并且修改成自己喜欢的样式。

配置部署

最后,我们需要对我们的文档网站进行部署。如果我们使用 Github Pages 部署,可以参照 Github Pages 部署教程

具体而言,在项目的根目录下创建一个 .github/workflows/gh-pages.yml 文件,并输入以下内容:

-- -------------------- ---- -------
----- ------

---
  -----
    ---------
      - ----

-----
  -----------------
    -------- -------------
    ------
      - ----- -------------------
      - ----- ------- ------------
        ---- --- -------
      - ----- -----
        ---- --- --- -----
      - ----- ------
        ----- ---------------------------------
        ----
          --------------- --- ---------------------- --
          --------------- --------
          ------------ ------

这个文件会在我们推送代码到 main 分支时自动构建我们的文档网站,并将构建好的文件上传到 gh-pages 分支中。我们需要在项目的 Settings 页面中配置一个名为 PERSONAL_TOKEN 的 secret,用于向 Github 身份认证。

示例代码

这些就是我们使用 wikismith-site 搭建文档网站的全部步骤。下面是示例代码,可以帮助你更好地了解 wikismith-site 的使用:

-- -------------------- ---- -------
----- ------ - -
  --------- --- ---------
  ------ ----------
  -------- -
    -
      ------ -------- ---------
      --------- -----------------------
    --
    -
      ------ ---------
      --------- -------------- --------------
    --
    -
      ------ ---- -----------
      --------- ------------ ----------- ------------
    --
  --
--

-------------- - -------

sidebar 中,我们声明了我们的网站有三个部分:"Getting Started"、"Guides" 和 "API Reference"。在这些部分中,我们可以填充我们自己的文档。

通过这篇文章,相信大家已经对 wikismith-site 的使用有了初步的了解。不要停留在阅读这篇文章的阶段,自己动手尝试使用 wikismith-site 搭建自己的文档网站吧!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006710c8dd3466f61ffe17b

纠错
反馈