NPM 包 Headr 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 Headr

Headr 是一款可以帮助前端开发者生成 header（页眉）和 footer（页脚）的工具。你可以使用 Headr 快速地新建并配置网站的页面头部和底部，大大减少了代码的冗余度，提高了代码的可维护性。

安装和使用

安装

要使用 Headr，需要用 NPM 安装。在控制台输入以下命令即可：

npm install --save-dev headr

使用

安装完成后，在项目的 js 文件中加入以下代码：

const Headr = require('headr');

现在，你可以开始构建自己的 header 和 footer 了。下面以 header 为例：

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

这段代码会生成一个 header，包含了一个标题，以及三个链接，每个链接又有一个图标。同时，还有一个 logo，背景色为黑色，文字颜色为白色，字体为 Helvetica，高度为 80 像素的 header。

Headr 更多的配置选项

NavbarLinks 和 navBarIcons

"navbarLinks": ["主页", "联系我们", "帮助"],
"navBarIcons": ["fa fa-home", "fa fa-phone", "fa fa-question"],

通过这个 API，您可以配置头部导航栏中需要的链接和图标。NavbarLinks 是显示在页面上的文本，NavbarsIcons 是该链接的图标。你可以使用 Font Awesome 等第三方图标库提供的图标，也可以使用自己的图标。

Logo

"logo": "logo.png",

通过 Headr，您可以轻松地添加您的网站标志图片。设置文件名作为值，图片必须事先存储在您的项目文件夹中。

Header Background Colors

"headerBackgroundColor": "black",

您可以通过此选项更改头部背景颜色。

Header Height

"headerHeight": "80px",

可以通过此选项更改头部高度，以便更好地与您的设计匹配。

Text Color

"textColor": "white",

可以通过此选项更改头部文本的颜色。

Font Family

"fontFamily": "Helvetica",

这个选项可以更改头部字体的字体族。

Header Separator

"headerSeparator": true,

你可以使用此选项在头部和主页面之间添加分割线。

Header Separator Color

"headerSeparatorColor": "gray"

可以通过此选项更改分割线的颜色。

结论

Headr 是一个非常强大的工具，使构建页面头和脚变得简单和流畅，减少了代码的冗余度，提高了代码的可维护性。无论您是正在开发一款新网站，还是想给您的现有网站添加一些新内容，Headr 都可以帮助您实现这些目标。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/169989

NPM 包 Headr 使用教程