Fluid 主题无侵入改造记录

1
window.onload = function () {
2
  //不同的日期显示不同的样式，200 天为黄色提示，400天为红色提示，可以自己定义。
3
  let warningDay = 200;
4
  let errorDay = 600;
5
  // 确保能够获取到文章时间以及在文章详情页
6
  let times = document.getElementsByTagName('time');
7
  if (times.length === 0) {
8
    return;
9
  }
10
  let posts = document.getElementsByClassName('post-content');
11
  if (posts.length === 0) {
12
    return;
13
  }
14

15
  // 获取系统当前的时间
16
  let pubTime = new Date(times[0].dateTime); /* 文章发布时间戳 */
17
  let now = Date.now(); /* 当前时间戳 */
18
  let interval = parseInt(now - pubTime);
19
  let days = parseInt(interval / 86400000);
20
  /* 发布时间超过指定时间（毫秒） */
21
  //note warning 以及 note danger 是 Next 主题的自定义模板语法，如果使用其他主题，请自行更改样式以达到最佳显示效果
22
  if (interval > warningDay * 3600 * 24 * 1000 && interval < errorDay * 3600 * 24 * 1000) {
23
    posts[0].innerHTML =
24
      '<div class="note note-warning">' +
25
      '<h5>文章时效性提示</h5><p>这是一篇发布于 ' +
26
      days +
27
      ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
28
      '</div>' +
29
      posts[0].innerHTML;
30
  } else if (interval >= errorDay * 3600 * 24 * 1000) {
31
    posts[0].innerHTML =
32
      '<div class="note note-danger">' +
33
      '<h5>文章时效性提示</h5><p>这是一篇发布于 ' +
34
      days +
35
      ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
36
      '</div>' +
37
      posts[0].innerHTML;
38
  }
39
};

1
// 注入文章时效性提示
2
hexo.extend.injector.register(
3
  'body_end',
4
  `<script src="custom/js/outdate-notice.js"></script>`,
5
  'post'
6
);

1
'use strict';
2

3
// 获取唯一 ID
4
function getUuid() {
5
  return Math.random().toString(36).substring(2, 8) + Date.now().toString(36);
6
}
7

8
hexo.extend.filter.register(
9
  'after_post_render',
10
  (data) => {
11
    const { line_number, lib } = hexo.theme.config.code.highlight;
12

13
    let reg;
14
    if (lib === 'highlightjs') {
15
      if (line_number) {
16
        reg = /(<figure class="highlight.+?>)(.+?hljs (.*?)".+?)(<\/figure>)/gims;
17
      } else {
18
        reg = /(<div class="code-wrapper.+?>)(.+?hljs (.*?)".+?)(<\/div>)/gims;
19
      }
20
    } else if (lib === 'prismjs') {
21
      reg = /(<div class="code-wrapper.+?>)(.+?data-language="(.*?)".+?)(<\/div>)/gims;
22
    }
23

24
    data.content = data.content.replace(
25
      reg,
26
      (match, begin, inner, lang, end, offset, string) => {
27
        const collapseId = `collapse-${getUuid()}`;
28
        const collapseBtn = `<i class="iconfont icon-code" type="button" data-toggle="collapse" data-target="#${collapseId}"></i>`;
29
        const collapseDiv = `<div class="collapse show" id="${collapseId}">${inner}</div>`;
30
        const langSpan = `<span>${lang.toUpperCase()}</span>`;
31
        return begin + collapseBtn + langSpan + collapseDiv + end;
32
      }
33
    );
34

35
    return data;
36
  },
37
  10000 // 应该在完成其他渲染后执行，因此将优先级设大一点
38
);

1
.markdown-body .highlight table,
2
.markdown-body .code-wrapper pre {
3
  border-radius: 0 0 0.5rem 0.5rem;
4
}
5

6
.markdown-body .highlight,
7
.markdown-body .code-wrapper {
8
  background-color: #e6ebf1;
9
  border-radius: 0.625rem;
10

11
  // 折叠图标
12
  > i {
13
    color: #777777;
14
    margin-left: 10px;
15
    line-height: 2rem;
16
    transform: none;
17
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
18

19
    // &.collapsed {
20
    //   transform: rotate(-90deg);
21
    // }
22
  }
23

24
  // 代码语言
25
  > span {
26
    color: #777777;
27
    margin-left: 10px;
28
    font-weight: bold;
29
  }
30
}
31

32
.copy-btn {
33
  font-size: 1rem;
34
  color: darkslategrey;
35

36
  > i {
37
    font-size: 1rem !important;
38
    font-weight: bold;
39
  }
40
}
41

42
[data-user-color-scheme='dark'] {
43
  .copy-btn {
44
    color: #c4c6c9;
45
    transition: color 0.2s ease-in-out;
46
  }
47
}
48

49
[data-user-color-scheme='dark'] {
50
  .markdown-body .highlight,
51
  .markdown-body .code-wrapper {
52
    background-color: #696969;
53
    transition: background-color 0.2s ease-in-out;
54

55
    > i {
56
      color: #c4c6c9;
57
    }
58

59
    > span {
60
      color: #c4c6c9;
61
      transition: color 0.2s ease-in-out;
62
    }
63
  }
64
}

1
custom_css:
2
  - custom/css/code-pretty

1
// 浏览器搞笑标题
2
var OriginTitle = document.title;
3
var titleTime;
4
document.addEventListener('visibilitychange', function () {
5
  if (document.hidden) {
6
    document.title = '(´;ω;｀) 你不要我了吗 - ' + OriginTitle;
7
    clearTimeout(titleTime);
8
  } else {
9
    document.title = OriginTitle;
10
    titleTime = setTimeout(function () {
11
      document.title = OriginTitle;
12
    }, 2000);
13
  }
14
});

1
custom_js:
2
  - /custom/js/label-page.js # 浏览器恶搞标题

1
custom_html:
2
  - <script type="text/javascript" color="255,255,255" opacity="1.0" zIndex="-1" count="110" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1.0.1/dist/canvas-nest.js"></script>

1
    p: get_attribute(script, "pointColor", "0,0,0"), //pointColor

1
context.fillStyle = "rgba(" + config.p + ")",

1
custom_html:
2
  - <script type="text/javascript" color="255,255,255" pointColor="252,228,236" opacity="1.0" zIndex="-1" count="110" src="/custom/js/canvas-nest.js"></script>

1
document.addEventListener('DOMContentLoaded', function () {
2
  var winHeight = window.innerHeight,
3
    docHeight = document.documentElement.scrollHeight,
4
    progressBar = document.querySelector('#content_progress');
5
  progressBar.max = docHeight - winHeight;
6
  progressBar.value = window.scrollY;
7

8
  document.addEventListener('scroll', function () {
9
    progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
10
    progressBar.value = window.scrollY;
11
  });
12
});

1
#content_progress {
2
  /* Positioning */
3
  position: fixed;
4
  left: 0;
5
  top: 0;
6
  z-index: 32766;
7
  width: 100%;
8
  height: 6px;
9
  -webkit-appearance: none;
10
  -moz-appearance: none;
11
  appearance: none;
12
  border: none;
13
  background-color: transparent;
14
  color: #ffffff80; /* 使用半透明白色，适配夜间模式 */
15
}
16

17
#content_progress::-webkit-progress-bar {
18
  background-color: transparent;
19
}
20

21
#content_progress::-webkit-progress-value {
22
  background-color: #ffffff80;
23
}
24

25
#content_progress::-moz-progress-bar {
26
  background-color: #ffffff80;
27
}

1
// 注入阅读进度条
2
hexo.extend.injector.register(
3
  'head_begin',
4
  '<progress id="content_progress" value="0"></progress>',
5
  'post'
6
);

1
custom_js:
2
  - custom/js/read-progress-bar.js
3
custom_css:
4
  - custom/css/read-progress-bar.css

1
var now = new Date();
2
function createtime() {
3
  var grt = new Date('08/19/2024 12:00:00'); //在此处修改你的建站时间，格式：月/日/年 时:分:秒
4
  now.setTime(now.getTime() + 250);
5
  days = (now - grt) / 1000 / 60 / 60 / 24;
6
  dnum = Math.floor(days);
7
  hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
8
  hnum = Math.floor(hours);
9
  if (String(hnum).length == 1) {
10
    hnum = '0' + hnum;
11
  }
12
  minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
13
  mnum = Math.floor(minutes);
14
  if (String(mnum).length == 1) {
15
    mnum = '0' + mnum;
16
  }
17
  seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
18
  snum = Math.round(seconds);
19
  if (String(snum).length == 1) {
20
    snum = '0' + snum;
21
  }
22
  document.getElementById('timeDate').innerHTML = '本站已创建 ' + dnum + ' 天 ';
23
  document.getElementById('times').innerHTML = hnum + ' 小时 ' + mnum + ' 分 ' + snum + ' 秒';
24
}
25
setInterval('createtime()', 250);

1
custom_js:
2
  - custom/js/create-time.js

1
footer:
2
  content: '
3
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
4
    <i class="iconfont icon-love"></i>
5
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
6
    <br><span id="timeDate">天数载入中</span><span id="times">...</span><br>
7
  '

1
function randomPost() {
2
  fetch('/sitemap.xml')
3
    .then((res) => res.text())
4
    .then((str) => new window.DOMParser().parseFromString(str, 'text/xml'))
5
    .then((data) => {
6
      let ls = data.querySelectorAll('url loc');
7
      let locationHref, locSplit;
8
      do {
9
        locationHref = ls[Math.floor(Math.random() * ls.length)].innerHTML;
10
        locSplit = locationHref.split('/')[3] || '';
11
        // } while (locSplit == '' || locSplit == 'tags');
12
        //若所有文章都如 https://…….com/posts/2022/07/…… 格式，主域名后字符是 posts，则循环条件改为：
13
      } while (locSplit !== 'posts');
14
      location.href = locationHref;
15
    });
16
}

1
custom_js:
2
  - custom/js/random-post.js

1
menu:
2
  - {
3
      key: 'random',
4
      name: '随机文章',
5
      link: 'javascript:randomPost();',
6
      icon: 'iconfont icon-random',
7
    }