本文章首发于语雀!
通过各种高科技功能同步到Hajeekn 的博客
事发起因:
在前几天入手了[CYF 大佬](https://blog.cyfan.top]写的HexoPlusPlus
于是今天给 Butterfly 提了 Pr,适配 HexoPlusPlus 的说说
突然,我在翻看文档时看到了这个image.png
自定义主题
欸我就想着,我也可以写个啊,于是就有了这篇文章。
噗(/≧▽≦)/

前排提示: 本 CSS 基于 HexoPlusPlus 制作,使用请先配置 HexoPlusPlus。

参考文档配置 HexoPlusPlus

Click me to HexoPlusPlus Docs

配置说说

在你的 Hexo 新建一个页面
里面填写以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@1.1.0/talk.css"
/>
<script src="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@1.1.0/talk_user.js"></script>
<div id="hpp_talk"></div>
<script>
  new hpp_talk({
    id: "hpp_talk", //容器id
    domain: "", //您的HexoPlusPlus域名，如blogadmin.cyfan.top
    limit: 10, //单次获取的最多条数
    start: 0, //从第几条开始
    themecss: "", //自定义说说主题，可选【仅1.1.0版本及以上使用】
  });
</script>

(如果你用的版本已经内置了 HPP 的说说,那就用自带的吧)
其中的 domain 换成你刚才部署的 HexoPlusPlus 的域名
在 themecss 处填入
https://cdn.jsdelivr.net/gh/ladjeek-actions/CDN@master/plugin/theme/hpp_user_talk/Fuitrt.css
更改后内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@1.1.0/talk.css"
/>
<script src="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@1.1.0/talk_user.js"></script>
<div id="hpp_talk"></div>
<script>
  new hpp_talk({
    id: "hpp_talk", //容器id
    domain: "", //您的HexoPlusPlus域名，如blogadmin.cyfan.top
    limit: 10, //单次获取的最多条数
    start: 0, //从第几条开始
    themecss:
      "https://cdn.jsdelivr.net/gh/ladjeek-actions/CDN@master/plugin/theme/hpp_user_talk/Fuitrt.css", //自定义说说主题，可选【仅1.1.0版本及以上使用】
  });
</script>

然后配置就完成了,可以 hexo s 看效果了
请注意,使用**Fuitrt 做为说说主题时需要为你的 Butterfly 主题配置一个背景,并且文章卡片不应为全白~**

Pofato 主题

这款主题与上面的安装方法一致
只需要把 themecss 改成以下配置

1
2
3
themecss:
"https://cdn.jsdelivr.net/gh/ladjeek-actions/CDN@master/plugin/theme/hpp_user_talk/Pofato.css"
//自定义说说主题，可选【仅1.1.0版本及以上使用】

文章结束,没有什么好看的了