记录 hexo next的 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 }}&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,执行以下命令:

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