Blog设置

甘芝林

发布于：Jan 1, 2020
次浏览

个人博客设置，博客美化。

自定义配置

个人主题核心配置

菜单

首页
/

归档
/archives

标签
/tags

关于
/post/about

工具
/post/tool

软件
/post/Software

游戏
/post/Game

主题

选择主题
Next

网站名称
甘芝林 - Blog

网站描述
平时的学习笔记

显示封面图
开

每页文章数
10

每页归档数
50

文章 URL 默认格式
Short ID

标签 URL 默认格式
Short ID

文章 URL 路径
默认

标签 URL 路径
默认

RSS/Feed
显示全文

RSS/Feed 文章数量
50

远程

平 台
Coding Pages

域 名
ganzhilin.net

仓库名称
ganzhilin

分 支
master

仓库用户名
ganzhilin

邮 箱
835821280@qq.com

令牌用户名
ZoXifvVOpv

令 牌
。。。。。。。。。。。。。。。

CNAME
ganzhilin.net

布局

外观
gemini

子标题
平时的学习笔记

博主名称
甘芝林

博主介绍
活到老，学到老。

博客可视区宽度
1088px

字体大小
16

颜色

背景色
#1a1a1a

主色调
#1a1a1a

归档页时间线线条色
#9e9e9e

字体颜色
#9e9e9e

标题颜色
#9e9e9e

链接颜色
#9e9e9e

链接Hover颜色
#9e9e9e

博客标题区域背景色
#1a1a1a

博客标题背景色
#1a1a1a

博客标题色
#9e9e9e

移动端菜单按钮颜色
#9e9e9e

菜单项字体颜色
#9e9e9e

菜单项Hover字体颜色
#9e9e9e

当前菜单项背景颜色
#1a1a1a

特性

SEO
甘芝林 - Blog

导航菜单图标
自动

站点预览头像圆角
开

站内搜索
开

文章链接新窗口打开
开

RSS
开

封面显示策略
摘要后

目录

阅读页目录展示方案
自动

目录自动序号
开

目录颜色
#9e9e9e

目录Hover颜色
#9e9e9e

当前目录颜色
#fc6423

目录压缩策略
自动

赞赏

开启文章打赏功能
开

标题
扫码打赏，支持一下呗。

提示语
Thank you

赞赏按钮颜色
#fc6423

支付宝打赏码
https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/zfb.JPG

微信打赏码
https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/wx.JPG

社交

链接
Github
fa-github
https://github.com/ganzhilin/ganzl.github.io

CSDN
fa-copyright
http://blog.csdn.net/ganzhilin520

简书
fa-leanpub
https://www.jianshu.com/users/590d902ba568/timeline

知乎
fa-wpforms
https://www.zhihu.com/people/aganr/

微博
fa-weibo
https://weibo.com/aganr

E-Mail
fa-envelope-o
http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=835821280@qq.com

友链

友链标题
友链

内部/外部
_self

魔改

可视区透明度
85

站点标题字体大小
1

页面离开提示语
(つェ⊂)别走快回来~

评论

Valine启用
开

AppID
。。。。。。。。。。。。。。。

AppKey
。。。。。。。。。。。。。。。

评论框占位提示符
在昵称处填写 QQ号，评论区会拉取 QQ昵称，QQ头像！支持 Markdown 语法哦~

封面头像
小怪物

来访
关

高亮
开

QQ
开

评论列表头像
关

跟踪

百度分析
。。。。。。。。。。。。。。。

鼠标

打开 Github 修改文件 styles/main.css
更新文章,导致 Github 文件被替换,在CDN没有刷新之前,修改过来即可!!!
2315行 (指针)

1
cursor: url('https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/hand/arrow.cur'), default;

2317行 (链接)

1
cursor: url('https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/hand/hand.cur'), pointer !important;

2319行 (文本)

1
cursor: url('https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/hand/ibeam.cur'), text !important;

头像改外链

D:\Blog\themes\next\templates_blocks\site-meta.ejs
第4行

1
<img class="site-author-image right-motion" src="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/avatar.png"/>

图标改外链

D:\Blog\themes\next\templates_blocks\head.ejs
第8行

1
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/ico.png">

标签添加(分类)

D:\Blog\themes\next\templates_blocks\cloud-tags.ejs
3行，标签后面增加 (分类)

D:\Blog\themes\next\templates_blocks\tag-timeline.ejs
7行，标签后面增加 (分类)

归档日志改文章

D:\Blog\themes\next\templates_blocks\archive-timeline.ejs
7行，日志改文章
非常好！目前共计27篇文章，继续努力！

搜索框默认搜索文字 改竖线 |

D:\Blog\themes\next\templates_blocks\search.ejs
6行 搜索修改 |
Shift键加“\”键直接打 | 出来

平时的学习笔记 字体颜色

D:\Blog\themes\next\assets\media\css\gemini.css
207行 修改 9e9e9e

友链图标修改

D:\Blog\themes\next\templates_blocks\header.ejs
87行 修改 fa-link

简历图标修改

D:\Blog\themes\next\templates_blocks\header.ejs
7行 增加 map.set('/post/resume','address-card-o');

工具图标修改

D:\Blog\themes\next\templates_blocks\header.ejs
8行 增加 map.set('/post/tool','wrench');

软件图标修改

D:\Blog\themes\next\templates_blocks\header.ejs
9行 增加 map.set('/post/Software','desktop');

相册图标修改

D:\Blog\themes\next\templates_blocks\header.ejs
10行 增加 map.set('/post/photos','image');

游戏图标修改

D:\Blog\themes\next\templates_blocks\header.ejs
11行 增加 map.set('/post/Game','gamepad');

赞赏背景修改

D:\Blog\themes\next\templates_blocks\reward.ejs
51行 修改 1a1a1a

标签字体大小文字背景颜色

D:\Blog\themes\next\templates_blocks\cloud-tags.ejs
21行 修改 fontStart = 15 fontEnd = 30 colorStart = 9e9e9e colorEnd = 9e9e9e

主题美化

右上角github绑带

绑带官网：http://tholman.com/github-corners/

1
<a href="https://github.com/ganzhilin" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

打开 D:\Blog\themes\next\templates_blocks\head.ejs

添加到最后一行。

页脚信息

第一种

1
2
3
4
5
6
7
8
<font color="#9e9e9e">© 2016 - 2020</font>
&nbsp; 
<img src="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/yjxg.gif" style="width:18px;height:18px;margin-bottom:-3px" alt="小狗">
 &nbsp; 
<a href="https://www.ganzhilin.net" target="_blank" style="text-decoration:none;color:#9e9e9e;font-size=16px">甘芝林</a>	  
&nbsp;
<img src="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/yj_moeicp.png" style="width:18px;height:18px;margin-bottom:-3px" alt="MOE ICP">	 
<a href="https://icp.gov.moe/?keyword=20201993"  target="_blank" style="color:#9e9e9e;font-size=16px">萌ICP备20201993号</a>

第二种

1
2
3
4
5
6
7
<font color="#9e9e9e"><i class="fa fa-copyright"></i> 2020
&nbsp; 
<font color="#9e9e9e"><i class="fa fa-user-o"></i>
<a href="https://ganzhilin.net" target="_blank" style="color:#9e9e9e;">甘芝林</a>
&nbsp;
<a href="https://icp.gov.moe/?keyword=20201993"  target="_blank" style="color:#9e9e9e;">萌ICP备20201993号</a>
<br/>

打开 D:\Blog\themes\next\templates_blocks\footer.ejs

进行修改。

不蒜子

1
2
3
4
5
6
7
8
9
10
11
<span id="busuanzi_container_site_uv">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>	
<font color="#9e9e9e"><i class="fa fa-user" aria-hidden="true" title="总访客量"></i></font></font>
<font color="#9e9e9e"><span id="busuanzi_value_site_uv" aria-hidden="true" title="总访客量"></span></font>
&nbsp;
<font color="#9e9e9e"><i class="fa fa-eye" aria-hidden="true" title="总访问量"></i></font></font>	
<font color="#9e9e9e"><span id="busuanzi_value_site_pv" aria-hidden="true" title="总访问量"></span></font>
&nbsp;
<font color="#9e9e9e"><i class="fa fa-coffee" aria-hidden="true" title="总阅读量"></i></font></font>	
<font color="#9e9e9e"><span id="busuanzi_value_page_pv" aria-hidden="true" title="总阅读量"></span></font>
<br/>

网站已运行1

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
网站已运行:
<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05-06-2016 12:12:24");//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

网站已运行2

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
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2020-1-1");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "网站已运行 "+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(momxc, 1000);
}momxc();
</script>  <style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

飘动的彩带

1
<script src="https://cdn.jsdelivr.net/gh/ganzhilin/cdn@master/piao.js"></script>

打开 D:\Blog\themes\next\templates_blocks\footer.ejs

进行修改。

顶部进度加载条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://cdn.jsdelivr.net/gh/ganzhilin/cdn@master/pace.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/ganzhilin/cdn@master/pace-theme-flash.css" rel="stylesheet">
  <style>
      .pace .pace-progress {
          background: #fc6423;
          height: 3px;
      }
      .pace .pace-progress-inner {
           box-shadow: 0 0 10px #fc6423, 0 0 5px     #fc6423;
      }
      .pace .pace-activity {
          border-top-color: #fc6423;
          border-left-color: #fc6423; 
      }
  </style>

打开 D:\Blog\themes\next\templates_blocks\head.ejs

添加到中间

动态科技线条背景

1
2
3
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="https://cdn.jsdelivr.net/gh/ganzhilin/cdn@master/canvas-nest.min.js">
</script>

打开 D:\Blog\themes\next\templates_blocks\footer.ejs

进行修改。

樱花飘落效果

1
<script src="https://cdn.jsdelivr.net/gh/ganzhilin/cdn@master/sakura.js"></script>

打开 D:\Blog\themes\next\templates_blocks\head.ejs

添加到中间

更多效果

1
2
3
4
5
6
<script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js"></script>      <!--光标之泡泡-->
<script src="https://blog-static.cnblogs.com/files/axqa/emojiCursor.js"></script>       <!--笑脸-->
<script src="https://blog-static.cnblogs.com/files/axqa/batsCursor.js"></script>        <!--蝙蝠-->
<script src="https://blog-static.cnblogs.com/files/axqa/fairyDustCursor.js"></script>   <!--仙女棒-->
<script src="https://blog-static.cnblogs.com/files/axqa/ghostCursor.js"></script>       <!--鼠标-->
<script src="https://blog-static.cnblogs.com/files/axqa/snowflakeCursor.js"></script>   <!--雪花-->

网站安全认证

1
2
3
4
5
6
7
<a href="https://www.ganzhilin.net" target="_blank"><img src="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/yj_360.png" alt="360"</a>
&nbsp;
<a href="https://www.ganzhilin.net" target="_blank"><img src="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/yj_tx.png" alt="tx"</a>	
&nbsp;
<a href="https://www.ganzhilin.net" target="_blank"><img src="https://cdn.jsdelivr.net/gh/ganzhilin/ganzhilin-imgs/images/yj_xy.png" alt="xy"</a>
&nbsp;
<a href="https://myssl.com/www.ganzhilin.net?from=mysslid" target="_blank"><img src="https://static.myssl.com/res/images/myssl-id3.png" alt="myssl" style="max-height:55px"></a>

打开 D:\Blog\themes\next\templates_blocks\footer.ejs

进行修改。

自定义CSS

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
代码框复制按钮颜色
pre > span.copy-code:hover {
    color: #fff;
}
头像美化
.site-author-image {
    display: block;
    margin: 0 auto;
    padding: 2px;
    height: auto;
    background-color: #1a1a1a;
    border: 2px solid #fc6423;
}
文章底部页数背景颜色
.pagination-active a {
    color: #9e9e9e;
    background: #333;
    border-top-color: #9e9e9e;
}
头像下方 GanZhiLin 颜色
.site-author-name {
    margin: 0;
    text-align: center;
    color: #9e9e9e;
    font-weight: 600;
    font-size: 1em;
}
阅读全文颜色
.post-button .btn {
    color: #9e9e9e;
    font-size: 14px;
    background: #1a1a1a;
    border-radius: 2px;
    line-height: 2;
    margin: 0 4px 8px 4px;
}
搜索背景颜色
.search-box {
    width: 700px;
    height: 80%;
    background-color: #1a1a1a;
    position: relative;
    display: flex;
    flex-direction: column;
}
搜索底部颜色
.page {
    border-top: 1px solid #9e9e9e;
    background-color: #1a1a1a;
}
搜索内容字体颜色 下划线颜色
.item a:hover {
    color: #9e9e9e;
    border-bottom-color: #ffffff;
}
搜索框线条颜色 搜索框背景颜色
.search-title {
    padding: 10px 15px 5px;
    border-bottom: 1px solid #eee;
    background: #1a1a1a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 40px;
    display: flex;
    align-items: center;
}
搜索框字体颜色
.input-box input {
    outline: none;
    border: none;
    background-color: transparent;
    width: 100%;
    font-size: 16px;
    padding: 0 5px;
    color: #9e9e9e;
    font-weight: normal;
}
搜索框白线
.stat-box hr {
    background-color: #1a1a1a;
    border: 0;
    height: 0px;
    background-image: repeating-linear-gradient(-45deg, #1a1a1a, #1a1a1a 4px, transparent 4px, transparent 8px);
}
友链格式背景颜色
.friends-note {
    background: #1a1a1a;
}
友链竖线背景颜色
.friends-note {
    margin-bottom: 20px;
    padding: 15px;
    position: relative;
    border: 0px solid #fc6423;
    border-left-width: 5px;
    border-radius: 3px;
}
转载背景颜色
.post-copyright {
    background-color: #1a1a1a;
}
转载竖线背景颜色
.post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #fc6423;
    list-style: none;
}
转载字体颜色
.post-copyright li, .post-copyright a {
    color: #9e9e9e;
}
转载本文链接颜色
.post-copyright a:hover {
    color: #9e9e9e;
}
底部版权信息下划线清除
.footer a {
    border-bottom: 1px solid #9e9e9e;
    border-bottom-style: none;
}
滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
  display: none;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(158,158,158,.2);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: rgba(252,100,35,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(158,158,158,.15);
}
::-webkit-scrollbar-button:start {
  width: 10px;
  height: 10px;
}

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

本文永久链接是：https://zhilin.cc/post/804d14a9.html

更新于：Oct 26, 2020

评论