在Hexo Next主题下添加一言语录

发表于 更新于 阅读次数： 本文字数： 414 阅读时长 ≈ 2 分钟

起因

其实也没啥起因，就突发奇想，也许加上后会更高大上一点（？）

效果

步骤

不多废话直接上

在你的Blog文件夹下的

source\_data\sidebar.swig下添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
<p id="hitokoto">
  <a href="#" id="hitokoto_text">:D 获取中...</a>
</p>
<script>
  fetch('https://v1.hitokoto.cn?c=a&c=i&c=j&encode=json&charset=utf-8')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.querySelector('#hitokoto_text');
      hitokoto.href = `https://hitokoto.cn?uuid=${data.uuid}`;
      hitokoto.innerText = `${data.hitokoto}  --${data.from_who}《${data.from}》`;
    })
    .catch(console.error);
</script>

最后hexo clean hexo g hexo s即可

注意事项

1.若添加无反应，请修改Next主题的配置文件的custom_file_path

在Blog目录下的node_modules\hexo-theme-next\_config.yml内的custom_file_path为以下内容：

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  head: source/_data/head.swig #添加自定义内容在 head
  header: source/_data/header.swig #添加自定义内容在顶栏
  sidebar: source/_data/sidebar.swig #添加自定义内容在边栏
  #postMeta: source/_data/post-meta.swig #添加自定义文章的 meta 信息
  #postBodyEnd: source/_data/post-body-end.swig #添加自定义内容在文章尾部
  footer: source/_data/footer.swig #添加自定义内容在页脚
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl #添加自定义css

然后去上文对应的目录创建对应的文件即可（可根据报错查看缺少的文件），最后重试即可。

引用自https://iitii.github.io/2021/05/28/1/

2.你也可以将本代码放在其他位置，我认为放在sidebar最合适，但放在sidebar似乎与Next的某些样式不兼容，目前暂时想不到解决方法。

3.本站使用的是一言的API，句子类型为动画，诗句，网易云，保留作者与出处。

就是这样吧，祝各位玩的愉快。