npm 包 estel 使用教程

阅读时长 3 分钟读完

什么是 estel

estel 是一个基于 JavaScript 的静态网页生成器,可以在 Markdown 文件中编写内容,通过模板和主题进行渲染生成静态网页。它的特点是轻量、易用、快速,适合用于个人博客、文档、演示等场景。

安装 estel

安装前,请确保已安装 Node.js 环境。

在终端中执行以下命令进行全局安装 estel:

使用 estel

创建网站

在终端中进入需要生成静态网页的文件夹,执行以下命令创建一个新的 estel 站点:

此命令将在当前文件夹创建一个名为 mysite 的文件夹,用于存放 estel 网站相关文件。

编写内容

在 mysite 目录下运行以下命令:

此命令将在 mysite 中的 content 目录下创建一个新的 Markdown 文章,文件名为 hello-estel.md,用于编辑文章内容。

增加导航

可编辑 mysite/config.js 文件,增加导航条的链接和名称。

示例:

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

选择主题

可根据个人喜好和需求选择合适的主题,将主题文件夹复制到 mysite/themes 目录下即可。

构建网站

在 mysite 目录下运行以下命令:

此命令将生成静态网页文件到 mysite/public 目录下。

预览网站

在 mysite/public 目录下运行以下命令:

此命令将启动本地服务器,预览已生成的静态网页。

总结

以上是 estel 的使用教程,通过学习 estel 可以快速构建静态网页,并且 estel 提供了丰富的主题供用户选择,可以根据自己的需求进行定制。

示例代码可见 https://github.com/blinkcat/estel-example

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

纠错
反馈