记录custom.stuyl

发表于 | 分类于 | 0 comments | 阅读次数: |
字数统计: 2.2k | 阅读时长 ≈ 12

记录custom.stuyl

位置themes\next\source\css\_custom\custom.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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
// Custom styles.
/*******************首页样式*****************************/
body {
    background-image: url("/images/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
}
// 顶栏宽度
/*.container .header-inner {
    width: 100%;
}
// 页面顶部行高
.header {
    line-height: 1.5;
}

// 页面背景色
.container {
     background-image: ;
}

// 页面留白更改
.header-inner {
    padding-top: 35px;
    padding-bottom: 0px;
}*/
.posts-expand {
    padding-top: 50px;
}
.posts-expand .post-meta {
    margin: 5px 0px 0px 0px;
}
.post-button {
    margin-top: 0px;
}
//缩略图指定宽度值显示。
img.img-topic {
    width: 75%;
}

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  
//图标所对应的span中的ID
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 113);
}
//底部爱心小图标跳动
keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}

// 鼠标样式
  * {
      //cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      //cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }
  /*******************文章样式*****************************/
  // 文章``代码块的自定义样式
code {
    margin: 0px 3px;
    border: 1px solid #999;
}
// 文章···代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a { color: rgb(80, 115, 184); } 
// 文章···代码块diff样式 
pre .addition { background: #e6ffed; } 
pre .deletion { background: #ffeef0; }

// 文章标题字体
.posts-expand .post-title {
    font-size: 26px;
    font-weight: 700;
}
// 文章标题动态效果
 .posts-expand .post-title-link::before { background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%); }
// 文章元数据（meta）留白更改
.posts-expand .post-meta {
    margin: 10px 0px 20px 0px;
}
// 文章的描述
description .posts-expand .post-meta .post-description { font-style: italic; font-size: 14px; margin-top: 30px; margin-bottom: 0px; color: #666; }

//文章内链接文本样式 
.post-body p a{ 
	color: #0593d3; 
	border-bottom: none; 
	border-bottom: 1px solid #0593d3; 
	&:hover { 
		color: #fc6423;
		border-bottom: none; 
		border-bottom: 1px solid #fc6423; 
	} 
 }
 // [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 去除在页面文章之间的分割线
.posts-expand .post-eof {
    margin: 0px;
    background-color: rgba(255, 255, 255, 0);
}
// 去除页面底部页码上面的横线
.pagination {
    border: none;
    margin: 0px;
}
// 文章内标题样式（左边的竖线） 
.post-body h2, h3, h4, h5, h6 { border-left: 4px solid rgb(161, 102, 171); margin-left: -36px; padding-left: 32px; }
// 去掉图片边框
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
// 自定义的文章摘要图片样式
img.img-topic {
    width: 100%;
}
/*************************侧栏样式****************************/
// 自定义的侧栏时间样式
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
// 右下角侧栏按钮样式
 .sidebar-toggle { right: 10px; bottom: 43px; background-color: rgba(247, 149, 51, 0.75); border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35); } 
 .page-post-detail .sidebar-toggle-line { background: rgb(7, 179, 155); }
 // 右下角返回顶部按钮样式 
 .back-to-top { line-height: 1.5; right: 10px; padding-right: 5px; padding-left: 5px; padding-top: 2.5px; padding-bottom: 2.5px; background-color: rgba(247, 149, 51, 0.75); border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35); } 
 // 侧栏 
 .sidebar { box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.75); } 
 .sidebar-inner { margin-top: 30px; }
 // 侧栏顶部文字 
 .sidebar-nav li { font-size: 15px; font-weight: bold; color: rgb(7, 179, 155); } 
 .sidebar-nav li:hover { color: rgb(161, 102, 171); }
 .sidebar-nav .sidebar-nav-active { color: rgb(7, 179, 155); border-bottom-color: rgb(161, 102, 171); border-bottom-width: 1.5px; } 
 .sidebar-nav .sidebar-nav-active:hover { color: rgb(7, 179, 155); } 
 // 侧栏站点作者名
 .site-author-name { display: none; }
 // 侧栏站点描述 
 .site-description { letter-spacing: 5px; font-size: 15px; font-weight: bold; margin-top: 15px; margin-left: 13px; color: rgb(243, 112, 85); } 
 // 侧栏站点文章、分类、标签 
 .site-state { line-height: 1.3; margin-left: 12px; } 
 .site-state-item { padding: 0px 15px; border-left: 1.5px solid rgb(161, 102, 171); }
 // 侧栏RSS按钮样式 
 .feed-link { margin-top: 15px; margin-left: 7px; } 
 .feed-link a { color: rgb(255, 255, 255); border: 1px solid rgb(158, 158, 158) !important; border-radius: 15px; } 
 .feed-link a:hover { background-color: rgb(161, 102, 171); } .feed-link a i { color: rgb(255, 255, 255); } 
 // 侧栏社交链接 
 .links-of-author { margin-top: 0px; } 
 // 侧栏友链标题 
 .links-of-blogroll-title { margin-bottom: 10px; margin-top: 15px; color: rgba(7, 179, 155, 0.75); margin-left: 6px; font-size: 15px; font-weight: bold; }
 // 侧栏超链接样式（友链的样式）
 .sidebar a { color: #ccc; border-bottom: none; } 
 .sidebar a:hover { color: rgb(255, 255, 255); }
 // 自定义的侧栏时间样式 
 #days { display: block; color: rgb(7, 179, 155); font-size: 13px; margin-top: 15px; } 
 // 侧栏目录链接样式 
 .post-toc ol a { color: rgb(7, 179, 155); border-bottom: 1px solid rgb(96, 125, 139); } 
 .post-toc ol a:hover { color: rgb(161, 102, 171); border-bottom-color: rgb(161, 102, 171); } 
 // 侧栏目录链接样式之当前目录 
 .post-toc .nav .active > a { color: rgb(161, 102, 171); border-bottom-color: rgb(161, 102, 171); }
 .post-toc .nav .active > a:hover { color: rgb(161, 102, 171); border-bottom-color: rgb(161, 102, 171); } 
 /* 修侧栏目录bug，如果主题配置文件_config.yml的toc是wrap: true */ 
 .post-toc ol { padding: 0px 10px 5px 10px; } 
 /* 侧栏目录默认全展开，已注释 .post-toc .nav .nav-child { display: block; } */
 /************************移动端样式*******************************/ 
 @media (max-width: 1023px) { 
 .container { 
 background-color: rgba(0, 0, 0, 0); 
 } 
 .sidebar { 
 // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px; 
 } .feed-link { display: none !important; } }

@media (max-width: 767px) { .main { padding-bottom: 120px; } .posts-expand { margin: 0px; padding-top: 10px; } .posts-expand .post-title { font-size: 22px; } .posts-expand .post-meta { font-size: 10px; } .post { margin-bottom: 30px !important; padding: 20px 15px 15px 15px !important; } .post-body h2, h3, h4, h5, h6 { margin-left: -15px; padding-left: 11px; } .posts-expand .post-tags { margin-top: 10px; } .post-widgets { margin-top: 10px; } .comments { margin: 40px 0px 40px 0px !important; } .footer { 
// box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
 } }
.sidebar-active #sidebar-dimmer {
    opacity: 0;
}
// 移动端左上角菜单按钮 
.site-nav-toggle { top: 35px; left: 91px; 
// background-color: #222; 
} .btn-bar { background-color: rgb(255, 255, 255); }
// 移动端菜单 
@media (max-width: 767px) { .menu { text-align: center; 
// box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); 
} .site-nav { top: initial; background-color: rgba(255, 255, 255, 0.75); border-top: none; border-bottom: none; position: relative; z-index: 1024; } }
//移动端顶部 
@media (max-width: 767px) { .site-title { font-size: 28px !important; letter-spacing: 0px !important; } .site-subtitle{ letter-spacing: 0px !important; padding-bottom: 0px !important; } .site-meta {
 // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); 
 } .menu .menu-item { margin: 0px 10px !important; } }

设置动态title

themes/next/source/js/src下创建dytitle.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="shortcut icon"]').attr('href', "/TEP.png");
        document.title = 'w(ﾟДﾟ)w 出BUG啦！！！！';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="shortcut icon"]').attr('href', "/favicon.png");
        document.title = '♪(^∇^*)又好了。。。 ' + OriginTitile;
        titleTime = setTimeout(function () {
            document.title = OriginTitile;
        }, 2000);
    }
});

修改themes/next/layout/layout.swing,在 之前添加：<script type="text/javascript" src="/js/src/dytitle.js"></script>

侧栏加入已运行的时间

修改文件:themes/next/layout/_custom/sidebar.swig，加入一下代码：

BirthDay=new Date("05/27/2017 15:13:14"); 日期修改为自己的

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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()",1000);
BirthDay=new Date("05/27/2017 15:13:14");
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=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

修改文件themes/next/layout/_macro/sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        {# Blogroll #}
        {% if theme.links %}
          <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
              {{ theme.links_title }}&nbsp;
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
            </div>
            <ul class="links-of-blogroll-list">
              {% for name, link in theme.links %}
                <li class="links-of-blogroll-item">
                  <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
                </li>
              {% endfor %}
            </ul>
+        {% include '../_custom/sidebar.swig' %}
          </div>
         {% endif %}

-        {% include '../_custom/sidebar.swig' %}

增加站内文章搜索功能

安装插件hexo-generator-searchdb,执行以下命令:

1
npm install hexo-generator-searchdb --save

修改hexo/_config.yml站点配置文件,末尾新增以下代码:

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改themes/next/_config.yml主题配置文件，搜索关键字local_search找到如下代码，将enable设置为true，如下：

1
2
local_search:
  enable: true

如果本文对您有所帮助，请打赏给我吧，我先送个你也红包往下看，你可以把扫到红包打赏个我哦！
红包

本文标题:记录custom.stuyl

文章作者:範範

发布时间:2019年08月14日 - 17:08

最后更新:2019年09月11日 - 15:09

原始链接:https://trhsy.github.io/custom.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------The End-------------
範範 wechat
欢迎关注微信公众号，孬蛋等着你！
坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多