TwoNav Webstack-Hugo 主题的一些优化设置

TwoNav-Theme-Webstack-Hugo-Custom.md

TwoNav Webstack-Hugo 主题的一些优化设置

• 页内标题

<img alt="今日诗词" src="https://v2.jinrishici.com/one.svg?font-size=32&color=white">

• 广告/公告（Mastodon 滚动嘀咕）

<div id="ticker" class="text-sm"></div>
<script>
// 远程 JSON API 地址
let jsonUrl = "https://mastodon.api.eallion.com/api/v1/accounts/111136231674527355/statuses?limit=10&exclude_replies=true&exclude_reblogs=true";

// 相对时间插件 2.5.2 https://tokinx.github.io/lately/
(() => {
  window.Lately = new function () {
    this.lang = {
      second: " 秒",
      minute: " 分钟",
      hour: " 小时",
      day: " 天",
      month: " 个月",
      year: " 年",
      ago: "前",
      error: "NaN"
    };
    const format = (date) => {
      date = new Date(_val(date));
      const floor = (num, _lang) => Math.floor(num) + _lang,
        obj = new function () {
          this.second = (Date.now() - date.getTime()) / 1000;
          this.minute = this.second / 60;
          this.hour = this.minute / 60;
          this.day = this.hour / 24;
          this.month = this.day / 30;
          this.year = this.month / 12
        },
        key = Object.keys(obj).reverse().find(_ => obj[_] >= 1);
      return (key ? floor(obj[key], this.lang[key]) : this.lang.error) + this.lang.ago;
    },
      _val = (date) => {
        date = new Date(date && (typeof date === 'number' ? date : date.replace(/-/g, '/').replace('T', ' ')));
        return isNaN(date.getTime()) ? false : date.getTime();
      };
    return {
      init: ({ target = "time", lang } = {}) => {
        if (lang) this.lang = lang;
        for (let el of document.querySelectorAll(target)) {
          const date = _val(el.dateTime) || _val(el.title) || _val(el.innerHTML) || 0;
          if (!date) return;
          el.title = new Date(date).toLocaleString();
          el.innerHTML = format(date);
        }
      },
      format
    }
  }
})();

// 处理 Json 数据
if (document.querySelector('#ticker')) {
  fetch(jsonUrl)
    .then(res => res.json())
    .then(res => {
      var result = '';
      var data = res;
      for (var i = 0; i< data.length; i++) { // 将 i 初始化为 0
        var tickerUrl = data[i].url;
        var tickerTime = new Date(data[i].created_at).toLocaleString();
        var tickerContent = getSimpleText(data[i].content)
        // 添加条件判断，当 i 等于 0 时，添加 'carousel-item active' 类
        var className = i === 0 ? 'carousel-item active' : 'carousel-item';
        result += `<div class="${className}"><a class="overflowClip_1" href="${tickerUrl}" target="_blank" rel="bulletin"><span class="datetime">${tickerTime}</span>:  ${tickerContent}</a></div>`;
      }
      var tickerDom = document.querySelector('#ticker');
      tickerDom.innerHTML = result;

      // 相对时间插件
      window.Lately && Lately.init({
        target: '.datetime'
      });
    });
}

// 提取 HTML 代码中的纯文本内容
function getSimpleText(html) {
  var htmlTags = new RegExp("<.+?>", "g");
  var simpleText = html.replace(htmlTags, '');
  return simpleText;
}
</script>

• header代码（一些自定义的 CSS）

<style>
.site-menu li a span { margin-left: -0.25rem; }
.header-big:not(.no-bg) .s-type-list { color: #fff; }
@media (max-width: 767.98px) { .big-title { display: none; } }
.search-modal { display: none; }
#category-2 { margin-top: 2rem; }
.sidebar-menu-inner ul li:last-child { margin-bottom: 2rem; }
.sidebar-menu ul:first-child > li> a, .sidebar-menu ul:first-child > li> a span { line-height: 40px; max-height: 40px; }
.sidebar-nav-inner > div:nth-child(3) { display: none; }
</style>