如何自定义 gitalk 的样式？

GanZhiXiong commented 2 years ago

目前我是在 themes/icarus/source/css/ 目录下创建一个 gitalk.css 文件，然后修改 gitalk.js 中的 cssUrl 的值为 /css/gitalk.css，来实现的。但是这样得修改依赖包。

还有没有其他不修改依赖包的方法。

ppoffice commented 2 years ago

https://hexo.io/zh-cn/api/injector.html

GanZhiXiong commented 2 years ago

通过注入器（Injector） | Hexo 使用自定义的 gitalk.css，无论注入到哪个位置，都无法实现完全使用自定义的 gitalk.css，其主要原因是页面依旧会从 cdn 获取的原 gitalk.css，自定义的 gitalk.css 和原 gitalk.css同时在页面中存在，导致 css 样式可能还会从原 gitalk.css 中取。

以我想将 gitalk 的样式修为和我主题 dark 模式相匹配为例。

注入代码如下：

const css = hexo.extend.helper.get('css').bind(hexo);

// hexo.extend.injector.register('head_begin', () => {
//     return css('/css/gitalk.css');
// });

// hexo.extend.injector.register('head_end', () => {
//     return css('/css/gitalk.css');
// });

// hexo.extend.injector.register('body_begin', () => {
//     return css('/css/gitalk.css');
// });

hexo.extend.injector.register('body_end', () => {
    return css('/css/gitalk.css');
});