星月一言 | 棃星落月

前言

本文为个人目前对于一言(Hitokoto)相关修改的集合。

一言返回内容类型个性化

关于首页设置一言的配置，在 _config.butterfly.yml中：

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: 1
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:

将 subtitle 开启并且其 source 设定为 1 即可使用一言。

实现一言模块的具体代码，则来自于 themes/butterfly/layout/includes/third-party/subtitle.pug

script.
      function subtitleType () {
        fetch('https://v1.hitokoto.cn')
          .then(response => response.json())
          .then(data => {
            if (!{effect}) {
              const from = '出自 ' + data.from
              const sub = !{JSON.stringify(subContent)}
              sub.unshift(data.hitokoto, from)
              window.typed = new Typed('#subtitle', {
                strings: sub,
                startDelay: 300,
                typeSpeed: 150,
                loop: !{loop},
                backSpeed: 50,
              })
            } else {
              document.getElementById('subtitle').innerHTML = data.hitokoto
            }
          })
      }

      if (!{effect}) {
        if (typeof Typed === 'function') {
          subtitleType()
        } else {
          getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
        }
      } else {
        subtitleType()
      }

关于一言板块，其核心就是一行：

https://v1.hitokoto.cn

根据官方文档[^1]，后面的一些参数我们所需要的只是句子类型那个：

参数	说明
a	动画
b	漫画
c	游戏
d	文学
e	原创
f	来自网络
g	其他
h	影视
i	诗词
j	网易云
k	哲学
l	抖机灵
其他	作为动画类型处理

可选择多个分类，例如： ?c=a&c=c

比如个人，想让其返回 ACG 类型的文字，将核心代码修改为如下即可：

https://v1.hitokoto.cn?c=a&c=b&c=c

case source
  when 1
    script.
      function subtitleType () {
-        fetch('https://v1.hitokoto.cn')
+        fetch('https://v1.hitokoto.cn?c=a&c=b&c=c')

页面头部显示一言

在上面改动的前提下，实现所有页面头部一言插入。

负责头部样式的是 themes/butterfly/layout/includes/header/index.pug 文件，阅读代码不难发现其中 subtitle 位置的说明，我们只要把它拿下来，然后复制到 page 那边就行。

修改之前提到的 index.pug文，末尾处加上几行：

else
  #page-site-info
    h1#site-title=site_title
    if theme.subtitle.enable
      - var loadSubJs = true
+     #site-subtitle
+       span#subtitle

文章侧边栏一言卡片

参考：Butterfly侧边栏引入一言 - Flipped1121 - 博客园 (cnblogs.com)

在Butterfly/layout/includes/widget目录下创建card_hitokoto.pug文件，内容为：

if theme.aside.card_hitokoto.enable
    .card-widget.card-hitokoto
        .card-content
            .item-headline
                i.fas.fa-quote-left
                span= _p('一言')
                #hitokoto :D 获取中...
                i#hitofrom :D 获取中...
                script.
                    fetch('https://v1.hitokoto.cn?c=a&c=b&c=c')
                        .then(function (res){
                            return res.json();
                        })
                        .then(function (data) {
                            var hitokoto = document.getElementById('hitokoto');
                            hitokoto.innerText = data.hitokoto;
                            var hitofrom = document.getElementById('hitofrom');
                            hitofrom.innerText = "　　　　——" + data.from + '';
                        })
                        .catch(function (err) {
                            console.error(err);
                        })

在Butterfly/layout/includes/widget/index.pug添加代码：

#aside-content.aside-content
  //- post
  if is_post()
    - const tocStyle = page.toc_style_simple
    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
    if showToc && tocStyleVal
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
+     !=partial('includes/widget/card_hitokoto', {}, {cache: true})

因为位置跟之前站点资讯的位置不同，是处于sticky_layout上面的块的，所以我们还得对_config.butterfly.yml进行修改。

    # aside (側邊欄)
    # --------------------------------------

    aside:
      enable: true
      hide: false
      button: true
      mobile: true # display on mobile
      position: right # left or right
      card_author:
        enable: true
        description:
        button:
          enable: true
          icon: fab fa-github
          text: Follow Me
          link: https://github.com/btmuli
      card_announcement:
        enable: true
        content: When the moon fallen into the star ?
+     card_hitokoto:
+       enable: true

自定义卡片显示一言

这方面的内容详见：小试个性名片 | 棃星落月

因为文末卡片内容是可以直接写html的，所以我就把一言写进去了，不过因为怎么调都不对劲，就直接拿的官方现成的^[1]来：

# 自定义卡片
card:
  enable: true #总开关
  QR_code: /img/paimon.jpg #加群二维码
  master: BTMuli #群主ID
  group: 棃星落月 #QQ群号
  created: 04/018/2022 #建群时间
  front: Welcome to BTmuli's site #卡面正面描述语
  back1: sitelink #背面从上到下四行文字内容自定义
  back2: <a href="https://btmuli.top">https://www.btmuli.top</a>
  back3: <p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
         <script>
           fetch('https://v1.hitokoto.cn')
           .then(response => response.json())
           .then(data => {
            const hitokoto = document.getElementById('hitokoto_text')
            hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
            hitokoto.innerText = data.hitokoto
           })
           .catch(console.error)
         </script>
  back4: Welcome to BTMuli's site,wish you a nice day .

使用示例 | 一言开发者中心 (hitokoto.cn) ↩︎