发布于 

Volantis 建站记录

  本文记录了我在使用Volantis主题建站时操作的一些内容，或简或繁，主要是为了方便日后主题升级，设备更换时能够顺利迁移，同时向参考的一些站点博主表示感谢。

站点参考

本站参考了一些博客站点的设置及美化，或受其启发，或用到其类似的功能或配置，不能一应俱全的列举出来，都一并表示感谢。

TRHX’S BLOGhttps://www.itrhx.com/
黑石博客https://www.heson10.com
inksshttps://inkss.cn
Colsrchhttps://colsrch.cn
W4J1ehttps://vlts.hin.cool

恶搞标题

当用户在访问站点切换到其他网页时，可以呈现恶搞标题效果。

  1. 新建 FunnyTitle.js

    在主题文件夹\themes\volantis\source\js 中新建 FunnyTitle.js ，在其中添加如下代码：

    \themes\volantis\source\js\FunnyTitle.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 浏览器搞笑标题
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            $('[rel="icon"]').attr('href', "/funny.ico");
            document.title = '╭(°A°`)╮ 呀怎么舍得走哇 ~';
            clearTimeout(titleTime);
        }
        else {
            $('[rel="icon"]').attr('href', "/favicon.ico");
            document.title = '(ฅ>ω<*ฅ) 噫又回来了耶 ~' + OriginTitle;
            titleTime = setTimeout(function () {
                document.title = OriginTitle;
            }, 2000);
        }
    });

    其中favicon.ico 是正常图标， funny.ico 是用户切换到其它标签后你网站的图标。

  2. 启用这个 .js 文件

    在 \themes\volantis\layout\layout.ejs 文件中的 <body> 下面添加如下代码：

    \themes\volantis\layout\layout.ejs
    1
    2
    <!--浏览器搞笑标题-->
    <script type="text/javascript" src="/js/FunnyTitle.js"></script>

    另外，也可以将上述 FunnyTitle.js 托管到 Github上，在此引用 jsdelivr 的加速链接。

底部建站时间

  1. 设置 footer.ejs 文件

    这里首先需要设置 footer.ejs 文件，其在 Volantis 主题的位置是 \themes\volantis\layout\_partial\footer.ejs 。在其中的第48行的位置后添加如下代码：

    \themes\volantis\layout\_partial\footer.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    else if (item == 'runtime_count') { %>
            <span id="runtime_span"></span>
            <script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new
            Date("5/25/2021 00:00:00");
            Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
            a=T/M; dnum=Math.floor(a); b=(a-dnum)*24; hnum=Math.floor(b);c=(b-hnum)*60; mnum=Math.floor((b-hnum)*60); snum=Math.floor((c-mnum)*60);
            runtime_span.innerText ="⚡"+"本站在风雨飘摇中度过了 " + dnum + " 天 " + hnum + " 小时 " + mnum + " 分 " + snum + " 秒" + "⚡"};show_runtime();</script>

    可以根据需要修改 runtime_span.innerText 中的文本。

    注意 item == 'runtime_count' 其中 runtime_count 可以自定义，在主题配置文件中引用相同的名称即可。需要引用的内容只有 <span id="runtime_span"></span>，具体看下面。

  2. 启用该设置

    在 Volantis 中启用它，找到 site_footer 部分，在其下加入：

    _config.volantis.yml
    1
    2
    runtime_count:
      <span id="runtime_span"></span>

    别忘了在前面的 layout:[] 部分中加入 runtime_count 。

网页弹窗

这里主要运用 javascript 插件 ：[ Sweetalert 、Sweetalert-github]

具体安装和使用方法可见其 官网 和 Github 。我采用了直接引用的方法。

在 \themes\volantis\layout\_partial\head.ejs 文件中的第二行 <meta charset="utf-8"> 后加入：

\themes\volantis\layout\_partial\head.ejs
1
2
3
<meta charset="utf-8"><!-- 在此后加入 -->
<!-- Sweetalert弹窗显示 -->
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

或者使用 jsdeliver ：

\themes\volantis\layout/_partial/head.ejs
1
2
3
<meta charset="utf-8"><!-- 在此后加入 -->
<!-- Sweetalert弹窗显示 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert"></script>

并由此实现了以下几个功能 (目前网页只保留了2) ：

  1. 进入网站弹窗
  2. 复制网站内容弹窗
    • 复制代码弹窗
    • 右键复制弹窗
  3. 网站弹窗+自动切换暗黑主题

进入网站弹窗

这里参考了：https://luosw.fun/post/e281.html ，但这篇博文提到的关于自动调整暗黑模式+弹窗的逻辑反了，随后又看了一下colsrch 大佬的博文 https://colsrch.cn/posts/9eae9d7b/

这里直接设置 \themes\volantis\layout\index.ejs 文件就可以了，在其开头加入：

\themes\volantis\layout\index.ejs
1
2
3
4
5
6
7
8
9
<!-- 网页访问欢迎弹窗 -->
<script>
swal({
        title: '花径不曾缘客扫，蓬门今始为君开。',
        text: "在下是博主hemitlsr，这里作为个人学习生活的记录而存在。\n 在这里可以看博文，玩游戏，交朋友。\n 欢迎留言，交换友链。\n 但请不要留下不友好的痕迹，不然在下隔着屏幕咬你啊。",
        icon: 'https://cdn.jsdelivr.net/gh/hermitlsr/image-for-hermitlsr.top/web/rickavatar.png',
        button: "好的，已知晓",
});
</script>

这里 swal() 是引用该弹窗的函数，其有四个可选参数：title 、text 、icon 、button 。其中 icon 有四个默认的选项，可设置为 icon 图标，这里在下使用的是图片。

复制网站内容弹窗

复制代码弹窗

这里需要设置 layout\third-party\clipboard\script.ejs 文件，在后20行 clipboard.off('success').on('success', function (e) {} 中：

layout\third-party\clipboard\script.ejs
1
2
3
4
5
6
7
<!-- 复制代码弹窗 -->
swal({
	title: '复制成功',
    text: "代码已复制，请遵守相关授权协议。\n 转载请记得注明出处",
    icon: 'success',
    button: "我承诺遵守",
});

右键复制弹窗

这里需要设置两项内容：

  • 链接地址复制弹窗
  • 文本复制弹窗

均在 layout\_partial\rightmenu.ejs 文件中进行设置

  1. 链接地址复制弹窗

    在上述文件末尾的 function copyString(str) {} 函数中 document.body.removeChild(input); 后面添加如下内容：

    layout\_partial\rightmenu.ejs
    1
    2
    3
    4
    5
    6
    7
    <!-- 右键菜单栏复制弹窗 -->
    swal({
    	title: '复制成功',
    	text: "文本/链接已复制，请遵守相关授权协议。\n 转载请记得注明出处",
    	icon: 'success',
    	button: "我承诺遵守",
    });

  2. 文本复制弹窗

    还是在上述文件中，找到 if ('<%= theme.plugins.clipboard.enable %>' == 'true') {}将其设置为如下：

    layout\_partial\rightmenu.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    if ('<%= theme.plugins.clipboard.enable %>' == 'true') {
        <!-- 文本复制弹窗 -->
        let str_luosw = window.getSelection().toString();

        copyText.style.display = 'block';
        hrText.style.display = 'block';
        <!-- 文本复制弹窗 -->
        copyText.addEventListener("click", function (e) {
        copyString(str_luosw);
        }, {
        once: true
      });
    }

网站弹窗+自动切换暗黑主题

这里需要设置的是 layout\_partial\scripts\darkmode.ejs 。

首先在该文件开头第一行加入：

layout\_partial\scripts\darkmode.ejs
1
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/hermitlsr/CDN@master/judge_time/js.js"></script>

再在文件底部 <script> 前加入：

查看代码
layout\_partial\scripts\darkmode.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!-- 自动夜间模式加弹窗 -->
// 自动夜间模式
  if (navigator.geolocation) { //获取地理位置 用于判断日出日落时间
    navigator.geolocation.getCurrentPosition(
      function (position) {
        var res = computeSunRiseSunSet(position.coords.latitude, position.coords.longitude, 8);
        console.log(res.str)
        adjust_time(res.strSunRise, res.strSunSet, "08:00", "12:00", "14:00", "23:00")
      },
      function (e) {
        adjust_time("7:00", "17:30", "08:00", "12:00", "14:00", "23:00") //未允许获取地理位置时，使用默认时间
        console.log("未允许获取地理位置，使用默认配置时间")
        throw (e.message);
      }
    )
  }

  function adjust_time(beginTime, endTime, morningTime, noonTime, afternoonTime, nightTime) {
    const rootElement = document.documentElement;
    var strb = beginTime.split(":");
    if (strb.length != 2) {
      return false;
    }

    var stre = endTime.split(":");
    if (stre.length != 2) {
      return false;
    }

    var strmorning = morningTime.split(":"); //12点
    if (stre.length != 2) {
      return false;
    }

    var strnoon = noonTime.split(":"); //12点
    if (stre.length != 2) {
      return false;
    }

    var strafternoon = afternoonTime.split(":"); //13点
    if (stre.length != 2) {
      return false;
    }

    var strnight = nightTime.split(":"); //23点
    if (stre.length != 2) {
      return false;
    }

    var b = new Date();
    var e = new Date();
    var n = new Date();
    var morning = new Date();
    var noon = new Date();
    var afternoon = new Date();
    var night = new Date();

    b.setHours(strb[0]);
    b.setMinutes(strb[1]);
    e.setHours(stre[0]);
    e.setMinutes(stre[1]);
    morning.setHours(strmorning[0]);
    morning.setMinutes(strmorning[1]);
    noon.setHours(strnoon[0]);
    noon.setMinutes(strnoon[1]);
    afternoon.setHours(strafternoon[0]);
    afternoon.setMinutes(strafternoon[1]);
    night.setHours(strnight[0]);
    night.setMinutes(strnight[1]);


    //在这里面处理获得的数据
    if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
      var daytimetitle = "";
      var daytimemessage = "";
      if (n.getTime() - morning.getTime() < 0) {
        // 早上
        daytimetitle = "早安( •̀ ω •́ )✧";
      } else if (n.getTime() - noon.getTime() < 0) {
        // 上午
        daytimetitle = "上午好§(*￣▽￣*)§";
      } else if (n.getTime() - afternoon.getTime() < 0) {
        // 中午
        daytimetitle = "中午好( *︾▽︾)";
        daytimemessage = "Hi~ o(*￣▽￣*)ブ要注意休息哦";
      } else {
        // 下午
        daytimetitle = "下午好";
      } // 判断是否已经开启夜间模式
      if (rootElement.getAttribute('data-user-color-scheme', 'dark')) { // 已开启夜间模式，修改按钮状态
          swal("操作通知", daytimetitle + "，已自动为您切换为日间模式。" + daytimemessage, "success");
          const mode = toggleCustomDarkMode();
          applyCustomDarkModeSettings(mode);
      } else { // 未开启夜间模式，不执行操作
        swal(daytimetitle, daytimemessage, "info");
        return true;
      }
    } else { // 晚上
      var nighttitle = "";
      var nightmessage = "";
      if (night.getTime() - n.getTime() < 0 || n.getTime() - b.getTime() < 0) {
        nighttitle = "夜深了";
        nightmessage = "该睡觉啦(∪.∪ )...zzz";
      } else {
        nighttitle = "晚上好";
        nightmessage = "吃晚饭了吗？要注意眼睛哦(づ￣ 3￣)づ";
      } // 判断是否已经开启夜间模式
      if (rootElement.getAttribute('data-user-color-scheme', 'dark')) { // 已开启夜间模式，不执行操作
          swal(nighttitle, nightmessage, "info");
          return true;
      } else { // 未开启夜间模式，修改按钮状态
          swal("操作通知", nighttitle + "，已自动为您切换为夜间模式。" + nightmessage, "success");
          const mode = toggleCustomDarkMode();
          applyCustomDarkModeSettings(mode);
      }
    }
  }

百宝箱页面设置

image.png

这是 Viggo 大佬制作的一个网站导航项目 WebStackPage，并由 HCLonely 制作为 hexo-theme-webstack

引用这个页面实际上是做一个新的主题网页，使用二级域名指向它。也可以做成分站形式，但是对于这样需要经常添加修改的网页不是很方便。

这里具体可以参考：

我主要是在页面抬头位置添加了几个链接，并引入了心知天气插件，这部分也是参考了黑石大佬和TRXH的百宝箱页面。

在主题文件夹下设置 themes/webstack/index.js 文件：

themes/webstack/index.js
1
2
3
4
5
6
7
8
9
10
11
12
<li class="hover-line" style="min-height: 75px;">
  <a target="_blank" rel="noopener" href="http://localhost:500">博客首页</a>   <!--https://www.hermitlsr.top-->
</li>
<li class="hover-line" style="min-height: 75px;">
  <a target="_blank" rel="noopener" href="https://www.hermitlsr.top/categories/">文章分类 </a>
</li>
<li class="hover-line" style="min-height: 75px;">
  <a target="_blank" rel="noopener" href="https://www.hermitlsr.top/messages/">留言灌水 </a>
</li>
<li class="hover-line" style="min-height: 75px;">
  <a target="_blank" rel="noopener" href="https://www.hermitlsr.top/friends/">友情链接 </a>
</li>

引入心知天气插件，这部分主题代码可以直接在心知天气官网生成：

themes/webstack/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <li class="hover-line" style="min-height: 75px; ">
    <div id="tp-weather-widget" style="padding: 25px 20px !important; "></div>
    <script>
      (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
      window.SeniverseWeatherWidget('show', {
        flavor: "slim",
        location: "",
        geolocation: true,
        language: "zh-Hans",
        unit: "c",
        theme: "auto",
        token: "",
        hover: "enabled",
        container: "tp-weather-widget"
      })
    </script>
  </li>
</ul>

注意 style="padding: 29px 20px; 这里设置的数值是为了使其与其他元素保持水平。

由于心知天气会自定义样式，为了保持样式一致，还重新定义了字体颜色，在 source\css\hclonely.css 中设置如下：

source\css\hclonely.css
1
2
3
.dsrBSL {
  color: #979898 !important;
}

导航栏全屏以及页面透明度

导航栏全屏

当时看到几个博客页面导航栏占据全屏之后设置透明效果还蛮好看，就迫不及待自己搞一搞，当然纯靠 F12 的方法失败了，最后这个是 inkss 大佬提供的方法。后面又去 Volantis 官方文档里翻东西的时候偶然发现这个问题在鸣谢板块的评论区有一个很长的讨论，更觉得当时自己很憨了。

image.png

在 \source\css\_layout\main.styl 文件下按上述方法进行设置：

\source\css\_layout\main.styl
1
2
3
4
5
.l_header
  @media screen and (max-width: $device-2k)
    left: 0 !important
    border-radius: 0 !important
    max-width: 100% !important

在添加对移动端的设置

\source\css\_layout\main.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 调整移动端的显示
#safearea
  @media screen and (max-width: $device-mobile)
    margin: 16px 0 0 !important
    box-shadow: none !important
    #l_main
      article#comments,
      article#friends,
      article#post,
      article#page,
      article#arc      
        border-radius: 0 !important
        margin-top: -16px !important
      article#cat,
      article#tag
        margin: -16px -16px 0 !important

页面透明度

这里使用了 F12 大法。页面透明度这里需要对 导航栏，侧边栏以及文章主体 三个位置分别进行设置。这里顺便调整了侧边栏的宽度。

\source\css\_layout\main.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
.l_header.auto.show {
  opacity: 0.85 !important;
}

.l_side {
  opacity: 0.9 !important;
  width: 300px !important;  //不合适的设置
}

.l_main {
  opacity: 0.95 !important;
  width: calc(100% - 1 * 300px) !important; //不合适的设置
}

另外侧边栏宽度和文章总宽度在 Volantis 主题中有一个总长度设置：max_width: 1270px。
页面宽度的设置已经取消了，由于固定了 .l_side 在移动端的距离就不会自动变化，就会导致 .l_main 部分变窄。这里直接修改 layout.styl ，其定义了侧边栏的基本参数，位于 volantis\source\css\_defines\layout.styl 。将其中 $sidebar 这个参数设置为 260px

念两句诗

Volantis 主题本身就集成了一个每日一诗 在侧边栏的 blogger 中，在下想用这类似的插件来修饰页面，于是就引入了 今日诗词 插件：

image.png

  1. 首先设置样式

    在 \source\css\_layout\main.styl 中加入：

    查看代码
    \source\css\_layout\main.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    // 念两句诗
    .poem-wrap {
        position: relative !important;
        width: 730px !important;
        max-width: 80% !important;
        border: 2px solid #797979 !important;
        border-top: none !important;
        text-align: center !important;
        margin: 80px auto !important;
    }

    .poem-left {
        left: 0 !important;
    }
    .poem-right {
        right: 0!important;
    }

    .poem-border {
        position: absolute !important;
        height: 2px!important;
        width: 35%!important; //调整框线的长度
        background-color: #797979!important;
    }

    .poem-wrap p {
        width: 70%!important;
        margin: auto!important;
        line-height: 30px!important;
        color: #797979!important;
    }

    .poem-wrap h1 {
        position: relative!important;
        margin-top: -100px!important;
        display: inline-block!important;
        letter-spacing: 12px!important;
        color: #797979!important;
        border-bottom: 1px solid rgba(68,68,68,0) !important;
    }
    .poem-wrap p#poem {
        font-size: 25px!important;
        text-align: center !important;
    }
    .poem-wrap p#info {
        font-size: 15px!important;
        margin: 15px auto!important;
        text-align: center !important;
    }

  2. 在需要的地方加入 Html 语句

    具体细节可以参考 今日诗词官网

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="poem-wrap">
        <div class="poem-border poem-left"></div>
        <div class="poem-border poem-right"></div>
        <h1>留言板</h1>
        <p id="poem"></p>
        <p id="info"></p>
        <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
        <script type="text/javascript">
        jinrishici.load(function(result) {
        var sentence = document.querySelector("#poem")
        var info_in = document.querySelector("#info")
        sentence.innerHTML = result.data.content
        info_in.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
        });
        </script> 
    </div>

页面的头像信息设置

image.png

这里参考了 TRHX 大佬的样式，然后直接用了一个较为简单的方法呈现出来：

1
2
3
<center><a href="https://hermitlsr.top/about/"><img src="https://cdn.jsdelivr.net/gh/hermitlsr/image-for-hermitlsr.top/web/rickavatar.png" width="100" height="100"> </a></center>
<center><a href="https://www.hermitlsr.top/atom.xml" rel="RSS" target="_blank" title="RSS"><i class="fa fa-rss"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:1165749128@qq.com" rel="Email" target="_blank" title="Email"><i class="fa fa-envelope"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/hermitlsr" rel="GitHub" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1165749128&amp;site=qq&amp;menu=yes" rel="QQ" target="_blank" title="QQ"><i class="fab fa-qq"></i></a></center>

公式加载问题

安装配置 KaTeX 基本没有问题 ，但是公式渲染还是有问题，这里根据官方推荐，参考了 https://www.micdz.cn/article/katex-on-volantis/ ，完美解决。做法就是在 themes\volantis\layout\_partial\head.ejs 文件的最后添加：

themes\volantis\layout\_partial\head.ejs
1
2
3
4
5
6
7
8
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>

电子时钟部件

使用了插件：hexo-electric-clock 参考了： https://zfe.space/post/hexo-electric-clock.html

该插件可以自动获取访问者的 ip 地址，同时以此 ip 地址展示天气时间等信息

步骤：

  1. 下载该插件
  2. 配置插件
  3. 调整 css 样式

下载该插件

1
npm i hexo-electric-clock --save

按照参考中的建议，需要加上 --save 否则本地预览可能不生效。

插件配置

在博客根目录的配置文档 _config.yml 中 加入：

../_config.yml
1
2
3
4
5
6
7
8
9
10
# 电子钟
electric_clock:
  priority: 10
  enable: true
  enable_page: all
  layout:
    type: id
    name: clock
    index: 0
  temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'

主要需要修改的地方是 layout ，它决定了电子时钟的具体位置。type 有两个选项 class 和 id 对应着 Html 中的两种属性。其中 class 不具有唯一性，在一个小块中，常常有多个 class 嵌套，这就需要使用 index 指定是第几个 class 。这里为求方便，我在需要展示电子钟的位置新增了 一个id。

我希望放的位置是侧边栏的公告栏部分，在 Volantis 主题中，这是以文本部件的形式呈现 ( class: widget text shadow floatable desktop )，需要在 content 部分增加 id 。在主题文件夹中找到 ..\volantis\layout\_widget\text.ejs 文件，在第4行 <div class='content'> 之后加入：

..\volantis\layout\_widget\text.ejs
1
2
<div id="clock"></div>
<div id="clock"></div>

在其他部件中加入同理。

调整 css 样式

这里是根据自己的喜好进行设置。

在主题文件 \source\css\_layout\main.styl 文件中加入：

\source\css\_layout\main.styl
1
2
3
4
.card-background {
    height: auto !important;
    margin: 0px !important;
}

当然，也可以在插件的 css 中直接修改，位置是 ..\node_modules\hexo-electric-clock\clock.css

增加朋友圈

该功能由小冰大佬完成的，可以将友链网站中更新的文章集中展示，目前支持 volantis、butterfly 等五个主题的友链爬取，以及github和gitee友链的爬取，已经更新到 beta1.5 还在继续开发，可参见:
原项目地址：https://github.com/Rock-Candy-Tea/hexo-circle-of-friends
配置教程：https://zfe.space/post/friend-link-circle.html

配置的过程中遇到一些坑

  1. _config.yml 中的 github 和 gitee 都需要取消注释，不需要的部分设置 enable=false。
  2. 如果在自己的友链界面加入了自己的链接，可以设置 if user_info[1] != '你的链接': ，排除自己的文章。
  3. 配置好后，一般是整点开始爬取，所以会延迟生效，不用担心没配置好。
  4. 在 volantis 中配置只需要新建一个 page ，然后加入 <div id="moments_container"><script src="/js/moments.js"></script></div> 即可。

文章永久链接

之前采用重设 urlname 的方式避免中文标题的编码问题，但是每次写文章都要自己输入一次，太麻烦。现在采用 hexo-abbrlink 插件进行生成。仅需在站点根目录的 _config.yml 中做如下设置

\_config.yml
1
2
3
4
permalink: :year-:month-:day/:abbrlink.html  
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

最终生成的本文链接形式：https://www.hermitlsr.top/2021-06-26/40ecd548.html

…未完待续

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章