Hexo美化之一言添加出处

​ 本人博客使用的是Fluid主题，Fluid主题首页Slogan可以选择显示一言，但是Fluid配置只能显示一言的内容，而不能显示一言的出处，因此本期博客将会对Fluid主题进行改造。

修改博客代码

typed.ejs

修改layout\_partial\plugins目录下的typed.ejs，此文件实现了通过api获取一言的功能，其中打印一言也在文件内实现，我们只需要稍微改造一下使其打印出出处即可。

<% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope) && page.subtitle !== false) { %>
  <%- js_ex(theme.static_prefix.typed, '/typed.min.js') %>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      <% if (is_home() && theme.index.slogan.api && theme.index.slogan.api.enable) { %>
        jQuery.ajax({
          type: '<%= theme.index.slogan.api.method %>',
          url: '<%- theme.index.slogan.api.url %>',
          headers: <%- JSON.stringify(theme.index.slogan.api.headers || {}) %>,
          dataType: 'json',
          success: function(result) {
            var apiText;
            var apiFrom;
            if (result) {
              var text_keys = '<%= theme.index.slogan.api.text_keys %>'.split(',');
              var from_keys = '<%= theme.index.slogan.api.from_keys %>'.split(',');
              if (result instanceof Array) {
                result = result[0];
              }
              data = result
              for (const k of text_keys) {
                var value = result[k];
                if (typeof value === 'string') {
                  apiText = '『' + value + '』';
                  break;
                } else if (value instanceof Object) {
                  result = value;
                }
              }
              for (const k of from_keys) {
                var value = data[k];
                if (typeof value === 'string') {
                  apiText += '<br/><br/>'+ '——' + '「' + value + '」' ;
                  break;
                }
                else if (value instanceof Object) {
                  data = value;
                }
              }
            }
            apiText ? typing(apiText) : typing(text);
          },
          error: function(xhr, status, error) {
            if (error) {
              console.error('Failed to request <%= theme.index.slogan.api.url %>:', error);
            }
            typing(text);
          }
        })
      <% } else { %>
        typing(text);
      <% } %>
    })(window, document);
  </script>
<% } %>

其基本原理就是，遍历theme.index.slogan.api.text_keys和theme.index.slogan.api.text_keys两个变量，提取json数据中对应的字段，theme.index.slogan.api.text_keys即为_config.fluid.yml配置的字段，这里重新修改了字段因此还要再_config.fluid.yml修改相应的字段。

修改配置

_config.fluid.yml

定位到_config.fluid.yml中的slogan字段，修改为下面内容：

index:
  slogan:
    enable: true
    api:
      enable: true
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      # 一言内容
      text_keys: ['hitokoto']
      # y
      from_keys: ['from']