什么是 hexo-showcase？
hexo-showcase 是一个基于 hexo 的插件，可以按照一定格式展示你的项目（如 GitHub、CodePen 等）在博客上。它可以帮助你更好地展示你的前端项目，提高它们的可视性。
如何安装 hexo-showcase？
步骤 1：在 hexo 中安装 hexo-showcase
在终端或命令行中输入以下命令：
npm i hexo-showcase --save
步骤 2：在 hexo 的 _config.yml 中添加配置
打开你的博客根目录下的 _config.yml 文件，在最后面添加以下代码：
showcase:
- name: project name 1
repo: https://github.com/xxx/xxx
desc: description of project 1
- name: project name 2
repo: https://github.com/xxx/xxx
desc: description of project 2其中，name 是展示的项目名称，repo 是项目的 GitHub 链接，desc 是关于项目的描述。
步骤 3：在你的博客页面中添加展示
你可以在你的 Hexo 模板中使用以下代码展示你的项目列表：
-- -------------------- ---- -------
-- -- --------------- --
---- -----------------
-----------------
----
-- --- ---- -- --------------- --
----
-- -------- --------- --- ------------------ --------- ------
----- --------- ------
-----
-- ------ --
-----
------
-- ----- --如何自定义 hexo-showcase 的样式？
你可以在你的博客主题中创建一个名为 _custom.scss 的文件（如果你的主题没有这个文件，则可以创建）。
首先，在你的主题中找到一个 main.css 文件，在文件顶部添加以下代码：
@import 'custom';
然后，打开 _custom.scss 文件并添加以下代码：
-- -------------------- ---- -------
--------- -
----------------- --------
-------- -----
-------------- -----
-- -
----------- --
-
-- -
----------- -----
------- --
-------- --
-
-- -
-------------- -----
-
- -
---------- -----
------ -----
------- --
-
- -
------ -----
--------- -------
-------------- ---------
------------ -------
-------- ------
-
-以上代码是一个示例，你可以根据自己的需求进行修改。
示例代码
以下是一个示例代码，它展示了如何使用 hexo-showcase:
config.yml 配置：
-- -------------------- ---- -------
---------
- ----- -----------------
----- ----------------------------------------------
----- - ---- ----- ---- -------
- ----- --------------------
----- ---------------------------------------------
----- - ------- --- --- ---------- ------------- ----- ---------
主题页面 HTML：
-- -------------------- ---- -------
-- -- --------------- --
----
-- --- ---- -- --------------- --
----
------ -------- --------- --- ------------------ --------- -----------
----- --------- ------
-----
-- ------ --
-----
-- ----- --显示效果：
总结
hexo-showcase 可以帮助你更好地展示你的前端项目，提高它们的可视性。它可以根据你的需要进行配置，也可以自定义样式。希望这篇文章可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bc481e8991b448d95f9