在前端领域中，我们常常需要创建并展示一些具有故事结构的文本内容。noveljs 就是一个简单易用的 npm 包，可以帮助我们快速构建出精美的小说页面。
安装
我们可以通过 npm 安装 noveljs 包：
npm install noveljs --save
使用
使用 noveljs 创建小说页面，需要先导入用到的库：
const noveljs = require('noveljs')
const css = require('noveljs/dist/novel.css')接下来，我们需要创建一个 HTML 元素，以供 noveljs 渲染小说页面：
<div id="novel-content"></div>
在 JavaScript 中，我们可以通过如下代码初始化 noveljs：
const content = document.getElementById('novel-content')
noveljs({ content, data: {} })这里的 data 参数是我们需要传入的小说内容数据，我们可以将其设置为一个空对象。
运行上述代码后，我们就可以看到一个空的小说页面了。
添加章节
一本小说由多个章节组成。我们可以在 data 中添加多个章节。
一个章节可以包含如下属性：
- id 章节 id
- type 章节类型（chapter 或 section）
- title 章节标题
- content 章节内容
下面，我们将添加两个简单的章节。其中，id 根据实际情况进行设置：
-- -------------------- ---- -------
----- ---- - -
--------- -
-
--- ----------
----- ----------
------ ------
-------- -
-------------------------------------------------------------------
-
--
-
--- ----------
----- ----------
------ ------
-------- -
----------------------------------------------------
-
-
-
-添加完后，我们将 data 传入 noveljs 函数中：
-- -------------------- ---- -------
----- ------- - ----------------------------------------
----- ---- - -
--------- -
-
--- ----------
----- ----------
------ ------
-------- -
-------------------------------------------------------------------
-
--
-
--- ----------
----- ----------
------ ------
-------- -
----------------------------------------------------
-
-
-
-
--------- -------- ---- --渲染章节
现在，我们已经添加了两个章节。下面，我们需要将它们渲染到页面上。
通过设置 data.currentChapterIndex，我们可以指定当前渲染的章节。
noveljs({
content,
data,
currentChapterIndex: 0
})这里，我们将第一个章节设置为当前渲染的章节。
总结
通过上述步骤，我们已经成功创建了一个小说页面。在实际开发中，我们还可以添加更多的章节和自定义样式，使页面更加美观。
noveljs 简单易用，对于想要创建小说页面的前端开发者来说，是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554de81e8991b448d211c