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

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

起因

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

效果

步骤

不多废话直接上

在你的Blog文件夹下的source\_data\sidebar.njk下添加以下内容：

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
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

此处只保留了sidebar，要展示其他内容把前面的#去掉即可。

2.你也可以将本代码放在其他位置（如head，header等），我认为放在sidebar最合适，但放在sidebar似乎与Next的某些样式不兼容。

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

4.如果sidebar需要手动点击才能展示，请在next配置内将Sidebar display修改为always

1
2
3
4
5
6
7
8
# Sidebar display.
# Applicable to Muse | Mist and mobile of Pisces | Gemini.
# Available values:
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically.
#  - hide    expand only when click on the sidebar toggle icon.
#  - remove  totally remove sidebar including sidebar toggle.
display: always

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