hexo博客next主题添加banner图和一言

banner图

修改themes\next\layout\_layout.njk文件

首先在class="header-inner"前面加上id

<main class="main">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div  id="id-header-inner" class="header-inner">
      {%- include '_partials/header/index.njk' -%}
    </div>
    {%- if theme.sidebar.display !== 'remove' %}
      {% block sidebar %}{% endblock %}
    {%- endif %}
  </header>

然后在下方粘贴上这段代码：

<!-- 改变css样式 -->
<script type="text/javascript">
  var url = document.location.pathname;
  var folderName = url.substr(1, url.length - 2)
  console.log(folderName);
  var nSuccessCount = 0;
  var nResponceCount = 0;
  function OnHttpResponse(bSuccess, strUrl) {
      console.log("OnHttpResponse: " + bSuccess + ", " + strUrl);
      if(nSuccessCount > 0){
          return;
      }
      if(bSuccess) {
          nSuccessCount++;
          document.getElementById("id-header-inner").style.backgroundImage = "url(" + strUrl + ")";
      }
  }
  function changeBanner(strPostUrl, nIndex){
      console.log("try to load" + strPostUrl);
      var xmlhttp;
      if (window.XMLHttpRequest)
      {
          //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
          xmlhttp=new XMLHttpRequest();
      }
      else
      {
          // IE6, IE5 浏览器执行代码
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
              OnHttpResponse(true, strPostUrl);
          } else {
              OnHttpResponse(false, strPostUrl);
          }
      }
      xmlhttp.open("HEAD",strPostUrl,true);
      xmlhttp.send();
  }
  var listPostUrl = [
      "/images/" + folderName + ".png",
      "/images/background.png",
  ];
  listPostUrl.forEach(changeBanner);
</script>

这段代码的含义是在/image/posts/(folderName由你的permalink决定)下寻找name.png图片，如果找到了就用这个图作为背景图，否则使用默认的在/images/background.png背景图。

以后就只需要在images 放一张name.png的图，就可以用作自定义banner图片了。

一言

介绍

一言是创建于 2016 年的项目，起初是用于个人目的。目前已经转为公益项目，由萌创团队运营，为大家提供服务。 所谓一言（ヒトコト），即一句话。这句话可以是传达了感动，可以是博人一笑，可以是发人深思。总之，一言，代表着言语的触动，灵魂的交流。

使用示例

https://v1.hitokoto.cn/ 从7种分类中随机抽取）

https://v1.hitokoto.cn/?c=b （请求获得一个分类是漫画的句子）

https://v1.hitokoto.cn/?c=f&encode=text 请求获得一个来自网络的句子，并以纯文本格式输出

添加js代码

首先打开heme/next/layout/layout.njk，将下面的代码添加到</body>之前

注意到,之前的bannerdai也是加在这里,没关系,那就两段吧

<script>
  fetch('https://v1.hitokoto.cn?c=b&c=d&c=i&c=k&c=j')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.getElementById('hitokoto_text')
      hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
      hitokoto.innerText = data.hitokoto

      const from = document.getElementById('hitokoto_from')
      from.href = 'https://hitokoto.cn/?uuid=' + data.uuid 
      from.innerText = data.from

      const who = document.getElementById('hitokoto_who')
      who.href = 'https://hitokoto.cn/?uuid=' + data.uuid 
      who.innerText = data.from_who
    })
    .catch(console.error)
</script>

然后再将下面的代码，添加到themes/next/layout/_partials/header/index.njk或者其他你想的位置

<p style="text-align:center">
    <span id="hitokoto_text"></span>--
    <span id="hitokoto_who"></span>
    <span id="hitokoto_from"></span>
</p>