记录custom.stuyl
# 记录custom.stuyl
位置themes\next\source\css\_custom\custom.styl
代码奉上
// 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：
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"); 日期修改为自己的
<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
{# 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 }}
<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,执行以下命令:
npm install hexo-generator-searchdb --save
# 修改hexo/_config.yml站点配置文件,末尾新增以下代码:
search:
path: search.xml
field: post
format: html
limit: 10000
修改themes/next/_config.yml主题配置文件，搜索关键字local_search找到如下代码，将enable设置为true，如下：
local_search:
enable: true
如果本文对您有所帮助，请打赏给我吧，我先送个你也红包往下看，你可以把扫到红包打赏个我哦！
上次更新: 2022/12/05, 09:12:57