概要

たまに過去記事を修正したり追加したりした時に、更新日が表示されないのはもったいな〜という事で、カスタマイズして表示するようにしました。こんな感じです。 f:id:moyashidaisuke:20191020025722p:plain

概要
やり方
- フッタ
- デザインCSS
所感

やり方

www.tomomore.com

ほとんどこのままです。

トップページで以下のエラーが出てたので（エラーが出るだけで動作上は問題無さそう）、微修正しています。

エラー

hatenablog.js?version=4cbff299be1219037c65e826e20075ea9027b5e7&env=production:19 Uncaught TypeError: Cannot read property 'tagName' of undefined
    at appendLastmod ((index):1762)
    at Element.<anonymous> ((index):1745)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at Object.<anonymous> ((index):1741)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at XMLHttpRequest.o (hatenablog.js?version=4cbff299be1219037c65e826e20075ea9027b5e7&env=production:19)

以下コピペ用コード

フッタ

「デザイン」->「カスタマイズ」->「フッタ」


<script>
;
(function ($) {
  'use strict';
  var urls = [],
    opts = {
      cache: false,
      dataType: 'xml'
    },
    p,
    url = 'https://www.moyashidaisuke.com/sitemap.xml';  // ドメインを自分のサイトのに変えてね

  function parseSitemapXML(url) {
    var d = new $.Deferred;
    $.ajax($.extend(opts, {
      url: url
    })).done(function (xml) {
      $(xml).find('sitemap').each(function () {
        urls.push($(this).find('loc').text());
      });
      d.resolve();
    }).fail(function () {
      d.reject();
    });
    return d.promise();
  }

  function findURL(url) {
    $.ajax($.extend(opts, {
      url: url
    })).done(function (xml) {
      var isMatched = false;
      $(xml).find('url').each(function () {
        var $this = $(this);
        if ($this.find('loc').text() === location.href) {
          isMatched = true;
          appendLastmod($this.find('lastmod').text());
          return false;
        }
      });
      if (!isMatched) nextURL();
    }).fail(function () {});
  }

  function nextURL() {
    urls.shift();
    if (urls.length) findURL(urls[0]);
  }

  function appendLastmod(lastmod) {
    var $container = $('<div></div>', {
      'class': 'lastmod'
    }).text('更新日：' + lastmod.replace(/T.*0/, "")); // 「更新日」という文字を表示
   // エラーが出ないように修正
    if ($('.entry-header > .date') && $('.entry-header > .date').get(0) && $('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
      $('.entry-title').before($container);
    } else {
      $('.entry-date').append($container);
    }
  }
  p = parseSitemapXML(url);
  p.done(function () {
    findURL(urls[0])
  });
  p.fail(function (error) {});
})(jQuery);
</script>

デザインCSS

「デザイン」->「カスタマイズ」->「デザインCSS」

/*↓----更新日時表示----↓*/

.lastmod {
  background-color: transparent;
  padding: 5px 0px;
  text-decoration: none;
  font-size: 15px;
  display: inline;
  margin-left: 0px;
  color: #888888;
}

.lastmod::before {
  margin-right: 5px;
  margin-left: 10px;
  padding-left: 3px;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f01e';
}

.entry-date a {
  background-color: transparent;
  padding: 5px 0px 5px 6px;
  text-decoration: none;
  font-size: 15px;
  display: inline;
}

.entry-date a::before {
  margin-right: 5px;
  padding-left: 3px;
}


/*↑----更新日時表示----↑*/