↑ 画面不动?没声音?点这里!(教程

本博客修改日志(倒序)

从上往下,依次时间回溯,下方的修改内容是最近一次修改。

主题名称:Volantis
最新版本:x.x
当前版本:1.7.4
初始版本:1.6.0
最后修改:见本页更新日期

主页置顶区域(豆瓣影评)

~\Volantis\themes\volantis\layout\index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  
<%- partial('_pre') %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<article class="post white-box reveal ">
<section class="article typo">
<div class="article-entry" itemprop="articleBody">
//顶部内容
</div>
</section>
</article>
//从以下开始即主页文章列表
<%- partial('_partial/archive') %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
  • 该部分作为豆瓣影评页在首页的载体;
  • 亦可自定义其他非模板md文章的内容;

关于首页影评卡片,由于实现比较复杂会在近期单独写文章讲解。

基本思路:

利用 hexo-douban 插件的“已观看”部分(魔改),将缺失短影评且有长影评的记录补全,最后生成完整的豆瓣影评页面。然后利用 load 方法将影评页的部分内容(排序首位的影评)加载到首页中,最后再通过媒体查询完善一下样式自适应,即完成实现。

注意事项:

生成(hexo g)豆瓣页面时次数过多会导致IP被封禁,次日解禁(用代理/换IP可解)。另,可以不设置生成影评的部分为 built-in 模式,这样就不会影响原始正常的 hexo g 过程。

B站视频自适应样式

Bilibili format
1
2
3
4
  
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/url" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

首页新增近期动态幻灯片

~\Volantis\themes\volantis\layout\layout.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
<%- partial('_partial/cover') %>
<!-- 接续在cover后面... -->

<% if (is_home()) { %>
<style>
@media(max-width: 1100px) {
.ctrl {display:none;
}
}
</style>
<script type="text/javascript">
function changeFrameHeight(){
var iframe= document.getElementById("myiframe");
var wid = document.getElementById('father').clientWidth;
if (wid>900) iframe.height = wid/2.2;
else if (wid>551) iframe.height = wid/2.22;
else if (wid>470) iframe.height = wid/2.175;
else iframe.height = wid/2.26;

}
window.οnresize=function(){
changeFrameHeight();
}
</script>
<div class="ctrl1">
<div class="l_body">
<div class="body-wrapper">
<div class="l_main" style="width: calc(100%); padding-right: 0px;">
<section class="post-list ">
<div class="post-wrapper">
<article class="post white-box reveal ">
<div class="meta" id="header-meta">
<h2 class="title"> <a href="/article/1c44.html"> 光影记忆////近期手机相机存货 </a> </h2>
</div>
<style>iframe{pointer-events: none;}</style>
<div style="background-color: rgb(0, 0, 0);padding-top: 7px;" id="father">
<iframe width="100%" id="myiframe" frameborder="0" onload="changeFrameHeight()" src="https://nas.cz5h.com:5443/photo/embed/embed.html?album=album_5745425f414c42554d&autoplay=1&lightbox=1" photostation></iframe>
</div>
</article>
</div>
</section>
</div>
</div>
</div>
</div>
<% } %>

恢复原来的标签网络

原本是在旧站点挂的一个页面,更新主题后一直没恢复,现在重新搞了一下恢复了。具体思路和代码实现可以参见我之前写的以下文章。

该页面的最终效果:

文章页结束后加入评价

参考自雪曦的文章哦。

步骤:去 widgetpack.com 完成注册,然后找到 Rating 在 Setting 中设置为 IP Address。

然后将 Install 中的代码块插入主题代码中。具体位置如下,不需要额外配置,代码中已经包含ID。

~\Volantis\themes\volantis\layout\_partial\archive.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
  
<% var sections = page.body ? page.body : theme.layout.on_page.body; %>
<% sections.forEach(function(widget_id){ %>
<% if (widget_id == 'article') { %>
<article id="<%= post.layout %>" class="post white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.body ? 'body-blur' : '' %> article-type-<%= post.layout %>" itemscope itemprop="blogPost">
<%- partial('meta', {post: post, position: 'header'}) %>
<section class="article typo">
<div class="article-entry" itemprop="articleBody">
<% (post.photos||[]).forEach(function(photo){ %>
<fancybox><img src='<%- url_for(photo) %>'/></fancybox>
<% }) %>
<%- post.content %>
<!-- 五星评价代码,紧跟在Content之后 -->
<center><br><br>
<div id="wpac-rating"></div>
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 24440});
(function() {
if ('WIDGETPACK_LOADED' in window) return;
WIDGETPACK_LOADED = true;
var mc = document.createElement('script');
mc.type = 'text/javascript';
mc.async = true;
mc.src = 'https://embed.widgetpack.com/widget.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>
<b><a href="" class="wpac-cr">留下您对该文章的评价</a></b>
<br><br></center>
<!-- 原内容继续... -->

效果:

主题调整为灰色调

主要修改一处主题样式,并且补充修改其他几个自定义页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 在source\less\_base.less中添加 */
html {
-webkit-filter: grayscale(100%) !important;
-moz-filter: grayscale(100%) !important;
-ms-filter: grayscale(100%) !important;
-o-filter: grayscale(100%) !important;
filter: grayscale(100%) !important;
}
/* 以下自定义页面中同样添加上述代码 */
- theme\volantis\source\csc\index.html
- theme\volantis\source\monitor.html
- theme\volantis\source\maps.html
- theme\volantis\source\cv.html

效果:

修改主页下拉图标不居中

~\Volantis\themes\volantis\source\less\_base.less
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
.scroll-down{
width: 1.5%; // 100%;
//height: 64px;
position: absolute;
bottom: 30px;
// text-align: center;
cursor: pointer;
.scroll-down-effects{
color: white;
font-size: 24px;
line-height: 64px;
position: absolute;
text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@keyframes scroll-down-effect{
0%{
top: 0;
opacity: .4;
}
50%{
top: -16px;
opacity: 1;
}
100%{
top: 0;
opacity: .4;
}
}
animation: scroll-down-effect 1.3s infinite;
transform: rotateX(20px);
}
@media(max-width: 768px){
width: 5%;
}
}

其他小修改:主页Cover背景只保留一个页面宽度,另外页面主体背景颜色改为和背景图片相连续的颜色。

添加单独的页面访问统计

详见:

引入基于L-Cloud的页面访问统计

屏蔽访客插件点击

以下插件(revolvermaps)是用来实时显示访客位置的,精度还可以,而且也比较直观,但唯一不足的是:任何人都可以点击插件区域进入后台IP界面(不带跳转是它的付费功能!)

巧妙的解决方式:遮罩屏蔽

新建个相同大小的div块,然后重叠放置在原插件上面(利用z-index),背景设置成透明即可。代码如下:

~\volantis\layout\_widget\qrcodeMap.ejs
1
2
3
4
5
6
7
8
9
10
11
  
... ...
<!--遮罩部分-->
<div style="width:210px;height:143.5px;z-index:100;background:#fff;position:absolute;left:0;top:0;filter: alpha(opacity=0.01); -moz-opacity: 0.01;opacity: 0.01; "></div>
... ...
<!--地图插件部分-->
<div style="z-index:1;position:relative;display:inline-block;width:209px;">
<!--原始插件代码-->
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/7.js?i=51glt95x6ef&amp;m=0c&amp;c=ff0000&amp;cr1=54ff00&amp;crb1=54ff00&amp;br=12&amp;sx=0&amp;rs=100&amp;as=100&amp;ds=0&amp;cw=ffffff&amp;cb=2196f3" async="async"></script>
</div>
... ...

内嵌页访问模式

这是针对几个自定义页面祭出的访问方式,主要有几点考虑:

  • 不跳出本站。某些网页非本站域名,且无法修改,正常情况下访问就会跳出网站;
  • 页面访问量更准确。类似第三方监控这种页面,可以通过内嵌页方式将访问统计在本站访问量之内;
  • 方便返回。跳出网站后极易流失访问者,内嵌方式可以强调返回功能。

实现方式:iframe 内嵌。
包含页面:

WEB / RESUME Page Analyse 全站点状态监控!

Logo增加文字:

使用的艺术字生成网站为 Zitiweb,此网站的优势是生成的字体可以选择透明背景。

修改相关文章的部分

~\volantis\layout\_widget\related_posts.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  
<style>
.popular-posts{margin-left: 21px !important;}
.popular-posts a{padding-left: 0px !important;}
</style>
<% if(page.layout == 'post' && page.content && page.path != undefined){ %>
<%- partial('_pre') %>
<section style="background-color: #f2f2f2;padding-bottom:5px;" class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %>">
<header style="background-color: #f2f2f2;padding-left: 5px; display:inline-block !important;">
<i class="fas fa-bookmark fa-fw" aria-hidden="true"></i><span class="name">相关文章</span>
</header>
<div class="content" style="background-color: #f2f2f2;margin-top: 0px;">
<%- popular_posts( { maxCount: item.max_count , ulClass: 'popular-posts' , PPMixingRate: 0.2 } , page ) %>
</div>
</section>
<% } %>

更新主题版本1.7.4

未完全修改原主题(1.7.4)中的以下更新:

因为该更新去除了下拉页面时顶栏的翻转变换,我觉得这功能挺好的,故保留之。

自定义Footer样式和信息

这一次版本更新中,作者重写了Footer,由于我也在自定义修改Footer,所以就只修改了部分内容,没有更新作者的配置文件修改等内容。以下是老版本和新版本混合的结果,只是为了保留新版本的aplayer代码。

注意:如无必要一定要将上述更新全部完成(theme.aplayer.enable改为theme.footer.aplayer.enable),否则会导致aplayer出现问题。

~\volantis\layout\_partial\footer.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
  
<% if (theme.footer) { %>
<%
var layout = theme.footer.layout;
if (config.theme_config && config.theme_config.footer && config.theme_config.footer.layout) {
layout = config.theme_config.footer.layout;
}
%>
<footer class="clearfix <%- theme.backstretch && theme.backstretch.is_dark ? 'white' : '' %>">
<br><br>
<!---硬编码-->
<div class="social-wrapper">
<!--in--><a style="margin-right:15px;margin-top:2.5px;" href='https://cn.linkedin.com/in/tianzonglin' ><img width="20px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAB6klEQVRoge2YP08bMRyGn19p1aVKCkIdUYf2I3SsGKkECFakrowdgA/QhaJO+SCdkKDZyj8x9hN0KRNC/UMRyYh4GWAIF98l9iXOlfiRbjj7tf2+57N9CSQSiSAkLUk6kNTW6GlL2pe06Bvi82h9F/LJ5dlcMwFsh81jNBbNbLez4JFDtBbJTBnWswWuGWkBz6LYCadlZrXOAlcQxfMTjpnd8+56tf5LxjbIGbACTN9d74HfgzY1EHrs4XMO/dKwDw4XWR++i71uZpcZfR24CHloZSi72GcdZW/D7QwO3xn5A2wAzbv7OaABvBi8tWKyM5LOkaoxnkEsB0/NMbdn0QzwFKgBb4CPwN9ycTrw2btdbQo0vyS96zH2c0nNkHMkZpBXPQe/1T2WdOQbxGvXyr5GrjZ5Gh8kvQR+AE/69TKSxS5poqjezE6ALz59Rg0i6YOkU+BK0k9JqwXyZkFdX4MNa40s53S7kKN/HeIlRpDDnG4PcvR1Hy/RFrukc2DSUfXPzKYcegOu+/USM0ipfnu1Gc9PlCqTglSNFKRqpCBV48EESf+iVA1XkHZ0F/5cZgtcQb5HMFKWLo+uII0IRsrS5bEriJntAFtR7ISxaWZf+1ZLWpC0J6lV9EstEi1J3yTND/EBJRIPmhu/Z0SR8AyW3wAAAABJRU5ErkJggg=="></a>
<!--github--><a style="margin-right:15px;margin-top:0.5px;" href='https://github.com/TianZonglin' ><img width="22.5px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAEF0lEQVRoge2Zy29VVRTGfwvKQxQMEqAoBqMBhYkhiJHgIw6M4iNxYsSJRolBRR0aTY2JE+M/4BgnTgwJE4gBiSEaRWqQRCuJoE6Qtlhp1dry7udgn3s5Pd3rsM+9t9eS3C9pbrruenzf3ufuvfbZ0EEHHXRwLcHKvpR0FBgB9gK7zey3trC6Uv8O4GngCWCxma1vJMlGTcZlSXskPSKpdACagSTLauzNauaxoZGE78tHn6StrRSUCdgq6aeSuu81kvirkoQ1HJZ0XwtEbJLUm1DvoJcjOqLZSP8FLErgMQF8BPSY2aikbmANsBBYkH0CjALj2edxMxuUtBD4AHgNmJVQa8TMbqoi5Bbg94TEeQwBXcDiRP9h4DKwtGKdbjM7XTR2Oc5rKyaH6oSiI5uAtcAUId50LmuwSDsQHTBPyHXTSKRZzI8ZPSHeIzcTMCdm9IT8MY1EmsWfMaMnZMs0EmkWTyZ5SXo+YWP6v7GtyNsKIm4GThA2spmMMWC1mQ3UDMVH611mvgiA64GevKE+I5KWAP3A3DaTahQXgBVmNgyTZ+Qxrh0RELg+WvsnL+Tx9nNpGnXO+Y3vropJLhJ6nguETeoG0hvGGkaAf7Ncc4HlOBueg3pPmBeS0l/9TWjZPwWOmdnFooNCa76A8INcxJV25yzwD2HFGTez0UjsHGAd8Cywg6sfI5ZPsUg6f5W1+4ikVQliWwJJq7KaZTgXCxwrCTghqWqb3goxyyT9UsJrLBY0WBLwYLtF5Hg9VMKrPxZw3HE+UFLkVUmns0HYXpGgSeqRdDL7e0fOywxJXzjcfo45f+4473CSPyBpIuc3Ien+CkJeitR6wfF9w+G2r+aT30f6nJo/OvY3mdyrWWZLRWwGX6nIoc45L+QHx3nYsW9MtHlYE7Hd6fiecex1znkh+wFFnL1j79Q1HLod3xhip9B5jm+MwwSBM5ATYmangO8iASuc5FPeZACDjm8MMd/o6c/h0FvWxu+MBNztJI+Jjtk8HIzYDju+MQ4xrgGS5kvqL6wMhxzfZletzYV4SXrK8f224HdKkvcY1oO2RZa5ex3f7Qp7yICkl1NF5OJflzSksBe95fgUbwUk6cWU5Cbps0Jgr0JD11ZI6pJ0qMBlT5UESyQdKyT4RFLb3ndJmi3p4wKHPknVjgqSbo2I+VLS6mninq99m6QDERErG014o6TdhYTns9nZ0soZkjRL0sOSdkoaL9TcJan0bJJ04yTpGeBD4PbCV2eAI8D3hHahn/CWcohw6jtnZmezHPMIB67ZhBfRSwn7wzpgA3APUzfZX4G3zWxXCs8kZD+85yTtl3RJ04dLkvYpXMMlz3hDd4DZNG8CNgPrgZWE0a0dc1NQu70aIFwqHQW+Br6JHYM76KCDDgD4D6z9hVuzmv/gAAAAAElFTkSuQmCC"></a>
<!--ins--><a style="margin-right:0;" href='https://www.instagram.com/tzloop/' ><img width="24.3px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAADgUlEQVRoge2Zz28WRRjHP0PFkIhWOUjgKIiJsS3wpokVjQcxJNwqxkv/A/8Clav4f9g0Xkg0ETVCo6AXf1AxWhMqKje1cPHHpaZN+XiYrdksu/vu7L5vi8n7TTbZ2ZnvPM93ZmfmmRkYYYQRRvg/IaQS1ABMA6eBx4BHgbGOfmwCt4GbwIfAUgjBjnWWQw3qK+oNh48V9eWs0QYqYq/63jYIKOID9aFBiXhQ/WYHRGxhSd3bz89dfUQEYAE4PpBWaYZLwGvAYpbuAfN2+c2MY2I7cbFgfzGXd6bO18oeyVrgzdat0A6fFtKf5N7P1fVK3a81DTzexasWeGHrJXP6ZC7vCeJvVor7aio93dGpVWAZ+D1LHwAmgf01nBfVRWJPnCQnLOfTUpIX6nyLf3wz482od/W2ukt9Rl3Iyqbi7SQRmdFLiUauq1MJ9R9Tf0y0cbGqvroxsjtB9xVgJoTwXVNCCOFb4GngswQ791dl1K4jDbECzIYQ/ixmqONqL3vGi/khhD+AWeDGAPwoh3q5QVdvqkdLuFPG8GIjV3ZDvaBOlpTv2WzMXB6WkPkS3hl1rYazpr5UwlvYSSEzBc5UHxF5MRMF7okuQrqMkVXgq8K3c8CeBtw9wFuFb18At9o600XIcgjhzlZCfRg4lcA/ZW4CyOpabutMFyG/FdKHqY8UitgNHOpTZ2N0EVIM4NpsTYuc1qF6FyEHCumfgY0E/gbwS+HbwbbOdBEyaS6eCiH8BVSGECX4OITw91ZCHQMmasrXoouQ/cQQI4+zwD8NuGvAG4VvM8QTmVboGqK8mk+EEL4H5qgXswbMhRB+qKtrYGi4IG6qx0q4E8ZwZD1Xdl19X32qpPy0eqfLgthViMZQ/JGKOsbV49lTeqyj7lN/amhrqEJUr1SJ6WNjn/p5gp1WIUrKVPo88KXa+NhInSaGOM8l2FmvyqgTsppgAOAIcNUYxZ6wfKs7pj6rvkMUcTjRRqVPdSHFzUQjEBtmLntuq8vAr8QV+yBxnWg9xXL3AvofKkOCrOu/7mB0GOiFEK6VZdQJCcRt7JFheZWIFeDJquuGyjGSEc4Oy6sWeL31nYnxTuTdhOlxWDjfuRmMdyNLOyjiqvpAZyE5MTvRM+cHJiInJhhPSFa2QcB1dTbFv7aXoT3igfIhYjg/iMvQW8TN2UfAtaFdho4wwggj3BP4F8SQMYOYcy12AAAAAElFTkSuQmCC"></a>
</div>
<div class="social-wrapper">
<!--图虫--><a style="margin-right:15px;margin-top:1.5px;" href='https://tuchong.com/5634772/'><img height="17px" src="https://s1.tuchong.com/content-image/201904/af8f36bc5c647dfd3007907d17d4e053.png"></a>
<!--专栏--><a style="margin-right:15px;margin-top:1.9px;" href='https://cloud.tencent.com/developer/column/79519'><img height="17px" src="https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/img/yunjia.png"></a>
<!--zhihu--><a style="margin-right:16px;margin-top:1.8px;" href='https://www.zhihu.com/people/tian-zong-lin-82'><img height="18px" src="https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/img/zhihu.svg"></a>
<a style="font-size:17px;margin-top:3px;" href="/atom.xml" class="fas fa-rss" target="_blank" rel="external nofollow noopener noreferrer"> </a>
</div>
<br/>
<div class="social-wrapper">
<img width="20px" height="12.89px" style="border-radius:1.5px;" src="https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/img/20200305230433.png"/>
</div>
<!---end-->
<!---这里只留Aplyer-->
<% layout.forEach(function(item){ %>
<% if (item == 'aplayer') { %>
<div class="aplayer-container">
<%- partial('../_third-party/aplayer', {post: null, where: 'footer'}) %>
</div>
<% }%>

<%}) %>
<!---end-->
<!---保留老的footer调用-->
<div>
<%- __('footer.use') %>
<%- __('footer.theme') %>
<%- __('symbol.period') %>
</div>
<div>
<%- markdown(__('footer.license')) %>
</div>
<script type="text/javascript">
document.write(unescape("%3Cspan id='cnzz_stat_icon_1278641089'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1278641089%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
</script>
<div class='copyright'>
<br>
<span>本站已运行<span id="showDays"></span></span>
<script>
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var birthDay = Date.UTC(2020,02,27,14,00,00); // 这里设置建站时间
setInterval(function() {
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = now - birthDay;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById('showDays').innerHTML=""+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
}, 1000);
</script>
<%- markdown(theme.copyright) %>
<br><br>
</div>
<!---end-->
</footer>
<% } %>
<script>setLoadingBarProgress(80);</script>

除上述之外样式同样要修改:

修改位置:

~\volantis\source\less\_article.less (2 hits)
    Line 259:     footer {
~\volantis\source\less\_footer.less (1 hit)
    Line 1: footer {
~\volantis\source\less\_article.less
1
2
3
4
5
6
7
8
 
footer {
padding: 0;
text-align: justify;
color: #fff;//修改
font-style: italic;
margin: .6em 0;
cite{
~\volantis\source\less\_footer.less
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
 
footer {
position: relative;
padding: 40px 10px 25px 10px;
width: 100%;
color: #fff;//修改
margin: 0px auto;
font-size: 14px;//修改
overflow: hidden;
text-align: center;
~
~
a {
color: #fff;//改动
padding: 0;
.enable-trans();
&:hover {
color: @color_text_highlight;
}
~
~
.copyright {
margin-top: @gap;
font-size: 14px;//修改大小
}

Blogger模块也添加头部

~\volantis\_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
widget:
# ---------------------------------------
# 博主信息小部件配置
- id: blogger
class: blogger
display: [desktop] # [desktop, mobile]
avatar: https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/img/oiuydtsrk.gif
header:
icon: fas fa-user-circle
title: 关于博主
# title: 关于博主
# subtitle: 副标题
jinrishici: false # 今日诗词。可以设置字符串,加载失败时会显示占位字符串。
social: false

之后,去模块源文件内插入代码。

~\volantis\layout\_widget\blogger.ejs
1
2
3
4
5
6
7
8
 
<%- partial('_pre') %>
<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %>">
---- 添加头部 ----
<%- partial('header', {item: item}) %>
<div class='content'>
~
~

Blogger图不必非得是方形

位置:

~\volantis\source\less\_side.less (1 hit)
    Line 124:   &.blogger{
~\volantis\source\less\_side.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
&.blogger{
.enable-trans();
.content{
padding: 0;
div.avatar{
display: flex;
justify-content: center;
}
img{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
width: @width_sidebar;
//height: @width_sidebar;改动

修改页头Logo的样式

现在页头采用自带logo。

~\volantis\source\less\_header.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 .logo {
//padding: 0 @gap*1.5;//改动
font-size: @fontsize_logo;
font-family: @fontfamily_logo;
@media(max-width: @on_phone){
padding: 0 @gap;
}
&.img{
padding: 0 @gap 0 0;
}
img{
height: 60%;//改动
}
letter-spacing: 0;
}
img.logo {
padding: 0px 20px 0px 0px;//改动
margin-top: 13px;
margin-right: 20px;
margin-left: -5px;//改动
}

修改页头下边缘阴影

配合不透明白色,显得更加立体。给人更快速的加载的感觉。

~\volantis\source\less\_header.less
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
 
.l_header {
@iconW: 32px;
@iconMargin: 4px;
position: fixed;
z-index: 9999;
top: 0;
overflow: hidden;
width: 100%;
font-size: @fontsize_base;
line-height: @height_navbar;
height: @height_navbar;
overflow: hidden;
font-family: @fontfamily_base;
padding: 0 @gap;
margin-bottom: @gap;
box-shadow: -9px 3px 2px 0 rgba(0,0,0,0.1);//改动
.wrapper{
padding: auto @gap;
max-width: @width_container;
margin: auto;
.enable-trans();
a.logo {
color: @color_text_header;
}
}

底部上线PV统计

使用CNZZ的统计。

修改位置:

~\volantis\source\less\_header.less (3 hits)
  Line 89:   .nav-sub{
~\volantis\source\less\_header.less
1
2
3
4
5
6
7
8
9
10
11
12
13
 	
.nav-sub{
.logo {
font-weight: 600; /////////////////////////////
padding: 0 @gap*1.5;
font-size: @fontsize_base;
font-family: @fontfamily_base;
@media(max-width: @on_phone){
letter-spacing: -0.5px;
padding-top: 1px;
}

}

页头搜索框样式

修改透明度和颜色。

修改位置:

~\volantis\source\less\_header.less (3 hits)
  Line 176:   .m_search {
~\volantis\source\less\_header.less
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
	
.input {
display: block;
font-size: @fontsize_small;
padding-top: 8px;
padding-bottom: 8px;
width: 100%;
color: @color_text_main;
background: rgba(230, 230, 230, 0.72);//改动
box-shadow: none;
box-sizing: border-box;
padding-left: @iconW + @iconMargin;
@media(max-width: @on_phone){
padding-left: @iconW + @iconMargin;
}
border-radius: @border_radius_searchbar;
border: 1px dashed transparent;
.set-placeholder({
color: fade(@color_text_main, 50%);
});
&:hover{
color: @color_text_in_header;
~.icon{
color: fade(@theme_main, 80%);
}
border: 1px solid fade(@theme_main, 60%);
}
&:focus {
~.icon{
color: @theme_main;
}
color: @color_text_main;
background: fade(@theme_main, 15%);
border: 1px solid @theme_main;
}
}

代码显示去掉行号

修改位置:

~\volantis\source\less\_article.less (1 hit)
  Line 624:     .gutter{
~\volantis\source\less\_article.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 	
.gutter{
width: 24px;
padding: 0 12px;
display: none; ///////////////////////////////////////
text-align: right;
border-width: 0;
margin-left: 0;
position: sticky;
left: 0;
background-color: darken(@color_bg_code_block, 5%);
pre{
color: fade(@color_text_main, 80%);
}
}

修改目录缩进

目录在从三级开始显示时,下一级会空格太多。

修改位置:

~\volantis\source\less\_toc.less (4 hits)
  Line 71:     .toc-item.toc-level-1 {
  Line 77:     .toc-item.toc-level-2 {
  Line 83:     .toc-item.toc-level-3 {
  Line 89:     .toc-item.toc-level-4 {
~\volantis\source\less\_toc.less
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
 	
.toc-item.toc-level-1 {
.toc-child a{
padding-left: 0px;//改动
font-weight: normal;
}
}
.toc-item.toc-level-2 {
.toc-child a{
padding-left: 0px;//改动
font-weight: normal;
}
}
.toc-item.toc-level-3 {
.toc-child a{
padding-left: 11px;//改动
font-weight: normal;
}
}
.toc-item.toc-level-4 {
.toc-child a{
padding-left: 23.8px;//改动
font-weight: normal;
}
}

修改阅读更多按钮

默认的感觉 padding 有点大,不协调。

修改位置:

~\volantis\source\less\_article.less (1 hit)
  Line 303:   .readmore {
~\volantis\source\less\_article.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.readmore {
// display: none; // howtodesign?
font-family: @fontfamily_base;
font-size: .8em;
letter-spacing: .1em;
margin-top: @gap;
a {
text-decoration: none;
display: inline-block;
vertical-align: middle;
line-height: 1.8rem; //修改
font-weight: bold;
background-color: @theme_main;
padding: .2em .8em; //修改
color: @color_text_in_header;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme_main, 10%);
}
&:active {
// background: darken(@theme_main, 20%);
}
}

Blogger组件样式修改

修改圆角的程度。

修改位置:

~\volantis\source\less\_side.less (1 hit)
   Line 122:   &.blogger{
~\volantis\source\less\_side.less (1 hit)
   Line 17: .widget{
~\themes\volantis\source\less\_article.less
1
2
3
4
5
6
7
8
9
10
11
12
	  
.content{
background-color:white;
text-align: justify;
padding: @gap/2 0;
max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})";
max-width: 100%;
border-bottom-right-radius: 8px; //修改
border-bottom-left-radius: 8px; //修改
~
~
}

Tab键入的code块样式

修改位置:

~\themes\volantis\source\less\_article.less (4 hits)
  Line 1: .article {
  Line 337:     &.article-tags {
  Line 723: .article {
  Line 858: .article-entry{
~\themes\volantis\source\less\_article.less
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
 	  	
code { //Line289
font-family: @fontfamily_code;
padding: 3px 3px 0px 3px;
margin: 0px 1px;
vertical-align: center;
border-radius: 2px;
border: 1px solid fade(@color_bg_code, 20%);
font-size: @fontsize_base * .8;
background: @color_bg_code;
color: @color_text_code;
@media(max-width: @on_phone){
font-size: @fontsize_base * .8 * .95;
}
}
~
~
@media (max-width: 580px)
.article code {
font-size: 13.4px;
}
.article code {
font-family: Menlo,Monaco,courier,monospace,"Lucida Console",'Source Code Pro',"Microsoft YaHei",Helvetica,Arial,sans-serif,'Ubuntu';
padding: 3px 3px 0px 3px;
margin: 0px 1px;
vertical-align: center;
border-radius: 2px;
border: 1px solid rgba(255,248,240,0.2);
font-size: 14px;
/* background: #FFF8F0; *//改动
color: 0054be;
}

修改横向滚动条的样式

位置:

~\volantis\source\less\_article.less (1 hit)
    Line 711:   &::-webkit-scrollbar-thumb {
~\volantis\source\less\_article.less (1 hit)
    Line 704:   &::-webkit-scrollbar-track-piece {
~\volantis\source\less\_article.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 	
&::-webkit-scrollbar {
height: @border_radius_line;
width: 3px; ////原始变量:@border_radius_line;
}
::-webkit-scrollbar-thumb {
background-color: #e1e1e1;
}
::-webkit-scrollbar-track {
background-color: #f3f3f3;
}
html{
::-webkit-scrollbar { //改动
-webkit-appearance: none !important;
width: 3px !important;
height: 3px !important;
}
::-webkit-scrollbar-thumb {//改动
background-color: #aeaeae !important;
}
::-webkit-scrollbar-track {//改动
background-color: black !important;
}
}

右侧添加地图小插件

我是直接借用的 qrcode 插件的代码。直接修改以下文件:

~\volantis\layout\_widget\qrcode.ejs
1
2
3
4
5
6
7
8
9
10
11
12
<%- partial('_pre') %>
<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %>">
<%- partial('header', {item: item}) %>
<div style='padding:5 5 5 5;height:104.5px;'>
---- 添加地图插件 ----
---- 注意调整宽度 ----
<div style="display:inline-block;width:209px;">
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/7.js?i=51glt95x6ef&amp;m=0c&amp;c=ff0000&amp;cr1=54ff00&amp;crb1=54ff00&amp;br=12&amp;sx=0&amp;rs=100&amp;as=100&amp;ds=0&amp;cw=ffffff&amp;cb=2196f3" async="async"></script>
</div>

</div>
</section>

以下是旧版博客的日志

如需参考,请移步 old.cz5h.com

搭建清单

框架:HEXO
主题:Indigo
模板:EJS
托管:Github Pages
图床:阿里云OSS(作业部落)、微博相册
文档:Google Docs
文件:Nginx(Local Server)
云盘:可道云(Synology NAS)
订阅:FeedEK
弃用:APlayer、七牛云

创建记录(根目录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
myblog\source\CNAME							域名映射
myblog\source\robots.txt 百度、谷歌的爬虫规则
myblog\source\plugin-shake\harlem-shake-style.css 本地化资源文件
myblog\source\categories\index 开启后自动生成
myblog\source\tags\index 开启后自动生成
myblog\source\pdf\... 本地化文章显示的pdf
myblog\source\other\page_log 建站日志页面
myblog\source\other\page_share 图片收藏页面
myblog\source\other\page_gif 动态图页面
myblog\source\other\page_bground 壁纸页面
myblog\source\other\page_comment 全站评论页面
myblog\source\torrent\neubt BT资源文件分享页面
myblog\source\feedek\feedread 显示订阅内容页面
myblog\source\videos\look 视频资源左右滑动展示

indigo\source\js\graph.js 获取Json数据并构造svg元素
indigo\source\js\barry.js 简单的拦截某些页面的访问
indigo\source\js\av-min.js 本地化
indigo\source\js\Valin.js 本地化
indigo\layout\_partial\post\wordcount.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
indigo\_config.yaml 							配置文件|内置功能的配置
indigo\source\img\... 资源文件|头像和打赏图片等
indigo\layout\_partial\menu.ejs 左侧面板|添加各功能入口
indigo\layout\_partial\footer.ejs 底部样式|添加 Host by
indigo\layout\_partial\plugins\site-visit 站点访问|去除数量显示
indigo\layout\_partial\plugins\page-visit 页面访问|去除数量显示
indigo\layout\_partial\plugins\google-analytics.ejs 谷歌分析|加入解析路径
indigo\layout\_partial\plugins\baidu.ejs 百度统计|添加自定义匹配项
indigo\layout\tag.ejs 标签显示|修改样式
indigo\source\css\style.less 主要样式|修改背景纹理
indigo\layout\_partial\post\toc.ejs 构造目录|修改模块透明度及边框
indigo\layout\_partial\post\nav.ejs 前进后退|修改模块透明度及边框
indigo\layout\_partial\plugins\gitment.ejs 评论模块|修改模块透明度及边框
indigo\source\css\_partial\article.less 文章样式|修改目录焦点变化的跟随高度

indigo\layout\_partial\script.ejs 全局添加|添加自定义JS或者CSS
indigo\layout\page.ejs 文章页面|修改底部ABOUT模块内容
indigo\layout\post\copyright.ejs 文章页面|自定义底部标注模块内容
indigo\layout\_partial\header.ejs 顶层浮栏|下滑后修改标题居中,添加头像
indigo\layout\post\copyright.ejs 文章页面|自定义底部标注模块内容
indigo\layout\_partial\header.ejs 顶层浮栏|下滑后修改标题居中,添加头像

indigo\layout\_partial\plugins\valine.ejs 评论模块|新添加Valine评论
indigo\layout\_partial\post\comment.ejs 评论模块|接入扩展的Valine插件
indigo\source\css\_partial\article.less 文章样式|修改最后的评论模块的Section风格
indigo\layout\_partial\head.less 全局头部|全部页面<head>添加GoogleAdsense
indigo\layout\page.ejs 自定页面|Pages添加底部about模块的控制变量
indigo\layout\_partial\menu.ejs 左侧面板|在_config中添加标签云控制变量
indigo\source\css\_partial\highlight.less 代码模块|调整代码区域字体大小行间距
indigo\source\css\_partial\variable.less 代码字体|更换代码块字体@font-code

indigo\layout\_partial\archive.ejs 归档分类|去掉两部分显示时的tags
indigo\layout\_partial\head.ejs 首页结构|规范首页meta信息及整体代码结构
indigo\source\css\_partial\article.less 文章样式|修改image-bubble(-35->0)
indigo\layout\_partial\head.ejs 页面头部|在加载页面前加载barry.js
indigo\source\css\_partial\article.less 标注词组|修改词组标注样式
indigo\source\css\_partial\highlight.less 代码模块|修改代码段样式,pre和gutter
indigo\layout\_partial\head.ejs 全局头部|添加自定义Js和Css代码段
indigo\layout\_partial\menu.ejs 全局音乐|利用frameset和catch检测跳转实现
indigo\layout\index.ejs 主页列表|添加首项为已有全部评论

2月27日

换新主题 Volantis。

2020年2月
12月3日

头像下方添加个人社交信息

2019年12月
7月12日

更新友链页面的样式

7月11日

侧边栏添加多个功能页,整合 NAS和自己服务器的应用

7月2日

更换新的.COM域名

2019年7月
5月10日

去除音乐,视频、下载页面失效(七牛云到期)

2019年5月
6月21日

利用多frame添加全局音乐的播放,暂不清楚对SEO的影响

6月20日

添加视频播放页面,未适配移动端

6月16日

使用LeanCloud实现分享下载页的下载计数

6月10日

利用Hexo原生API添加生成相关文章

2018年6月
5月21日

添加字数统计,本地化Valine

5月18日

对文件压缩上传,参见minifier,加速动画效果

5月17日

添加rss加载gif及页面的简单访问拦截

5月16日

去掉音乐,新增我的订阅和代码挂件

5月12日

现在用QSunSync来完成本地资源云同步

2018年5月
5月11日

资源分享栏添加BT资源分享页面

4月21日

添加 Google 广告支持,添加留言中心栏目

4月20日

停用gitment评论,新增valine评论支持,详见这里

4月15日

修改侧边栏项目,汇总相关文档,添加资源分享栏目

2018年4月
12月27日

引入JQuery和自定义CSS代码,未发现与nodejs的兼容问题

12月19日

本页面添加文件修改记录;改动了各模块的显示样式

12月15日

功能异常,修复未果,故进行了一次主题重置,详见这里

12月10日

添加背景纹理,美化留白

12月4日

侧边栏添加图片收藏栏目,使用七牛云做图床

2017年12月
11月20日

侧边栏整合标签(书签)云插件,删掉原有标签选项

11月18日

动次打次添加切歌,使用七牛云做音频存储

11月17日

SEO优化,开启百度爬虫推送,使用google webmaster

11月7日

添加Google Analysis,添加百度统计

11月4日

更换托管源,托管在Coding

11月3日

文章整理完毕,做第一次发布

2017年11月
10月29日

侧边栏添加建站日志

10月27日

添加gitment评论,添加rss等基础功能

10月26日

更换indigo主题,添加high一下功能

10月24日

托管在Github并绑定域名,站点正式上线

10月23日

站点搭建完毕,域名申请完成

10月20日

正式接触到Hexo,着手搭建站点

2017年10月



😒 留下您对该文章的评价 😄


 评论




全站共计 295.4k 字,自豪地使用 Volantis 主题

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议