Fluid 主题无侵入改造记录

1
// source/custom/js/outdate-notice.js
2
window.onload = function () {
3
  //不同的日期显示不同的样式，200 天为黄色提示，400天为红色提示，可以自己定义。
4
  let warningDay = 200;
5
  let errorDay = 600;
6
  // 确保能够获取到文章时间以及在文章详情页
7
  let times = document.getElementsByTagName('time');
8
  if (times.length === 0) {
9
    return;
10
  }
11
  let posts = document.getElementsByClassName('post-content');
12
  if (posts.length === 0) {
13
    return;
14
  }
15
16
  // 获取系统当前的时间
17
  let pubTime = new Date(times[0].dateTime); /* 文章发布时间戳 */
18
  let now = Date.now(); /* 当前时间戳 */
19
  let interval = parseInt(now - pubTime);
20
  let days = parseInt(interval / 86400000);
21
  /* 发布时间超过指定时间（毫秒） */
22
  //note warning 以及 note danger 是 Next 主题的自定义模板语法，如果使用其他主题，请自行更改样式以达到最佳显示效果
23
  if (interval > warningDay * 3600 * 24 * 1000 && interval < errorDay * 3600 * 24 * 1000) {
24
    posts[0].innerHTML =
25
      '<div class="note note-warning">' +
26
      '<h5>文章时效性提示</h5><p>这是一篇发布于 ' +
27
      days +
28
      ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
29
      '</div>' +
30
      posts[0].innerHTML;
31
  } else if (interval >= errorDay * 3600 * 24 * 1000) {
32
    posts[0].innerHTML =
33
      '<div class="note note-danger">' +
34
      '<h5>文章时效性提示</h5><p>这是一篇发布于 ' +
35
      days +
36
      ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
37
      '</div>' +
38
      posts[0].innerHTML;
39
  }
40
};

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

1
// scripts/code-pretty.js
2
'use strict';
3
4
// 获取唯一 ID
5
function getUuid() {
6
  return Math.random().toString(36).substring(2, 8) + Date.now().toString(36);
7
}
8
9
hexo.extend.filter.register(
10
  'after_post_render',
11
  (data) => {
12
    const { line_number, lib } = hexo.theme.config.code.highlight;
13
14
    let reg;
15
    if (lib === 'highlightjs') {
16
      if (line_number) {
17
        reg = /(<figure class="highlight.+?>)(.+?hljs (.*?)".+?)(<\/figure>)/gims;
18
      } else {
19
        reg = /(<div class="code-wrapper.+?>)(.+?hljs (.*?)".+?)(<\/div>)/gims;
20
      }
21
    } else if (lib === 'prismjs') {
22
      reg = /(<div class="code-wrapper.+?>)(.+?data-language="(.*?)".+?)(<\/div>)/gims;
23
    }
24
25
    data.content = data.content.replace(
26
      reg,
27
      (match, begin, inner, lang, end, offset, string) => {
28
        const collapseId = `collapse-${getUuid()}`;
29
        const collapseBtn = `<i class="iconfont icon-code" type="button" data-toggle="collapse" data-target="#${collapseId}"></i>`;
30
        const collapseDiv = `<div class="collapse show" id="${collapseId}">${inner}</div>`;
31
        const langSpan = `<span>${lang.toUpperCase()}</span>`;
32
        return begin + collapseBtn + langSpan + collapseDiv + end;
33
      }
34
    );
35
36
    return data;
37
  },
38
  10000 // 应该在完成其他渲染后执行，因此将优先级设大一点
39
);

1
// custom/css/code-pretty.styl
2
.markdown-body .highlight table,
3
.markdown-body .code-wrapper pre {
4
  border-radius: 0 0 0.5rem 0.5rem;
5
}
6
7
.markdown-body .highlight,
8
.markdown-body .code-wrapper {
9
  background-color: #e6ebf1;
10
  border-radius: 0.625rem;
11
12
  // 折叠图标
13
  > i {
14
    color: #777777;
15
    margin-left: 10px;
16
    line-height: 2rem;
17
    transform: none;
18
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
19
20
    // &.collapsed {
21
    //   transform: rotate(-90deg);
22
    // }
23
  }
24
25
  // 代码语言
26
  > span {
27
    color: #777777;
28
    margin-left: 10px;
29
    font-weight: bold;
30
  }
31
}
32
33
.copy-btn {
34
  font-size: 1rem;
35
  color: darkslategrey;
36
37
  > i {
38
    font-size: 1rem !important;
39
    font-weight: bold;
40
  }
41
}
42
43
[data-user-color-scheme='dark'] {
44
  .copy-btn {
45
    color: #c4c6c9;
46
    transition: color 0.2s ease-in-out;
47
  }
48
}
49
50
[data-user-color-scheme='dark'] {
51
  .markdown-body .highlight,
52
  .markdown-body .code-wrapper {
53
    background-color: #696969;
54
    transition: background-color 0.2s ease-in-out;
55
56
    > i {
57
      color: #c4c6c9;
58
    }
59
60
    > span {
61
      color: #c4c6c9;
62
      transition: color 0.2s ease-in-out;
63
    }
64
  }
65
}

1
# _config.fluid.yml
2
custom_css:
3
  - custom/css/code-pretty

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

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

1
# _config.fluid.yml
2
custom_html:
3
  - <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
// source/custom/js/canvas-nest.js
2
    p: get_attribute(script, "pointColor", "0,0,0"), //pointColor

1
// source/custom/js/canvas-nest.js
2
context.fillStyle = "rgba(" + config.p + ")",

1
# _config.fluid.yml
2
custom_html:
3
  - <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
// source/custom/js/read-progress-bar.js
2
document.addEventListener('DOMContentLoaded', function () {
3
  var winHeight = window.innerHeight,
4
    docHeight = document.documentElement.scrollHeight,
5
    progressBar = document.querySelector('#content_progress');
6
  progressBar.max = docHeight - winHeight;
7
  progressBar.value = window.scrollY;
8
9
  document.addEventListener('scroll', function () {
10
    progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
11
    progressBar.value = window.scrollY;
12
  });
13
});

1
/* source/custom/css/read-progress-bar.css */
2
#content_progress {
3
  /* Positioning */
4
  position: fixed;
5
  left: 0;
6
  top: 0;
7
  z-index: 32766;
8
  width: 100%;
9
  height: 6px;
10
  -webkit-appearance: none;
11
  -moz-appearance: none;
12
  appearance: none;
13
  border: none;
14
  background-color: transparent;
15
  color: #ffffff80; /* 使用半透明白色，适配夜间模式 */
16
}
17
18
#content_progress::-webkit-progress-bar {
19
  background-color: transparent;
20
}
21
22
#content_progress::-webkit-progress-value {
23
  background-color: #ffffff80;
24
}
25
26
#content_progress::-moz-progress-bar {
27
  background-color: #ffffff80;
28
}

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

1
# _config.fluid.yml
2
custom_js:
3
  - custom/js/read-progress-bar.js
4
custom_css:
5
  - custom/css/read-progress-bar.css

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

1
# _config.fluid.yml
2
custom_js:
3
  - custom/js/create-time.js

1
<br /><span id="timeDate">天数载入中</span><span id="times">...</span><br />

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

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

1
# _config.fluid.yml
2
custom_js:
3
  - custom/js/random-post.js

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