在现代 web 开发中，前端框架和工具是不可或缺的。npm 是一个包管理器，支持大量的 web 开发包和模块的发现、安装和管理。而 hexo 是一个流行的静态网站生成器，它允许用户用 Markdown 格式书写内容并将其转换为静态网站。本文介绍了如何使用 npm 包 hexo-theme-material-indigo-custom 在 hexo 中创建卡片风格的静态网站，包括主题的安装、配置和个性化定制。
安装
安装 hexo-theme-material-indigo-custom 只需在终端输入以下命令：
$ npm install --save hexo-theme-material-indigo-custom $ hexo clean && hexo g && hexo s
以上命令安装完毕后，通过本地服务：http://localhost:4000/，即可查看自己的 hexo 网站。此时默认的主题为 landscape。接下来需要将主题切换成 material-indigo-custom。
配置
在 hexo 工程的根目录下，找到 _config.yml 文件，打开文件，更改下面这一行即可切换主题。
theme: hexo-theme-material-indigo-custom
个性化定制
Hexo-theme-material-indigo-custom 已经内置了一套很好看的UI，但是我们还可以进行一些自定义来使其变得独一无二。接下来我们了解一下如何进行配置。
配置
hexo-theme-material-indigo-custom 的配置文件为 _config.yml，我们可以在这个文件中进行一些自定义配置。
侧边栏
侧边栏是一个很常用的个性化配置项，我们只需在 _config.yml 中找到 nav 这一项，然后按着格式自定义自己需要显示的菜单。
nav: Home: / About: /about/ Tags: /tags/ Categories: /categories/ Archives: /archives/ Links: /links/
博客文章页面
我们可以在博客文章页面中加入更多的元素，例如TOC目录，代码高亮等等。找到 _config.yml 文件中 post 这一节点，增加自己要配置的参数。
-- -------------------- ---- -------
-----
- --
---- ----
- ----
----------
------- ----
------------ ----
------------ ----
------------ --示例代码
以下是一个完整的 _config.yml 文件示例，用来给大家参考配置。
-- -------------------- ---- -------
- --------------------------------- ----
- ------- -----------------------------------------------
- ----
------ ----
--------- ---------------
------------ ---- --
------- -----
--------- -----
--------- -------------
- ------
-------------- ----
-------
----------
- ----------
------------
- ----
---- ---------------------
-------
----- -----
----- --
- -----
----
----- -
--------- ----------
----------- ------------
----- ------
------ -------
------- ------------------------
- ---- --- ---------------- --------- --- ----------- ----------
------------------------------ -- ----------
- --
------- ---------------
- ------
------------- ----
--------- ----
- ------------ ------------ -
-------------- ------
- ------
- --- ----------- ------------ - ---- ----- ------
----
-------- ---- - ------
----- ----- - -----
- ----
--------
------- -----
------ ---
----- ---- ----
---------- ---- ---------
-------------- ---- -------------
- ---------------------- -------------------- --
----------
------- ----
------------ ---- - ------
------------ ---- - --------
- ---
- -------- ------- ----------- ----- ------ ------------------- ------------------------------
-------------- ------
- ------ ---------
-----------------
------ ---------------------------------
- -------- --------- ----- ------ ---
-------
------- -----
---------- ---- ---------这样就做完了 ~
结论
在本文中，我们介绍了如何使用 npm 包 hexo-theme-material-indigo-custom 在 hexo 中创建卡片风格的静态网站，包括主题的安装、配置和个性化定制。通过这个示例可以发现，在现代 web 开发中，npm 及其包管理器，成为了非常重要的工具之一。而 hexo，更是一个让前端无需后端能够轻松创建自己博客网站的工具。希望这篇文章能够帮助到对 hexo 和 npm 包管理器不是很熟悉的读者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ff81e8991b448d5211