hexo维护日志

hexo

前端

发布日期: 2021-12-19

文章字数: 1k

阅读时长: 5 分

阅读次数:

不知不觉，hexo博客已经在风雨飘摇中运行一周了，回想这一周博客的维护经历，我觉得有必要专门写一篇文章记录一下博客优化的过程，以防我不小心搞崩了博客...

12.17 维护记录

修改背景色，在 /source/css/matery.css 中

.bg-color {
    background-image: linear-gradient(to right, #bf30ac 0%, #0f9d58 100%);
	opacity: 0.75;
}

换壁纸，在themes/matery/layout/_partial/ bg-cover-content.ejs中

<% if (theme.banner.enable) { %>
<script>
    // 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('https://cdn.jsdelivr.net/gh/prannt99/blogpicture@master/6.7ccrbrkhexkw.jpg') %>";
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>
<% } else { %>
<script>
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('https://cdn.jsdelivr.net/gh/prannt99/blogpicture@master/6.7ccrbrkhexkw.jpg') %>)');
</script>
<% } %>

换背景图片，在themes\Matery\source\css\matery.css 中

body {
    /* background-color: #eaeaea; */
    background: linear-gradient(60deg, rgba(0, 228, 255, 0.05) 5%, rgba(0, 228, 255, 0.05)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
    background-attachment: fixed;
    margin: 0;
    color: #7F95D1;
}

12.18 维护记录

修改目录样式，在 themes\Matery\layout\_partial\post-detail-toc.ejs 中

.toc-widget {
    width: 345px;
    padding-left: 20px;
    background-color: rgb(255, 255, 255,0.7);
    border-radius: 10px;
    box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
}

.toc-widget .toc-title {
    padding: 35px 0 15px 17px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
	color: rgb(47,144,185) !important;
}

#toc-content .toc-link:hover {
    color: #a7535a;
    font-weight: 700;
    text-decoration: underline;
}

#toc-content .is-active-link {
    color: #1e131d;
}

修改滑动条，在 themes\Matery\source\css\matery.css 中新增

/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #00BFFF;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #ffcacaff;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

在博客中新增note标签

见：关于hexo博客的note标签美化

12.19 维护记录

字体重新配色，在themes\Matery\source\css\matery.css 中

.center-caption {
    color: #C04851;
    padding: 5px;
    border-bottom: 1px solid #d9d9d9;
}

推荐文章自定义字体和颜色，在themes\Matery\source\css\matery.css 中

.recommend .post-card .post-description {
    margin: 20px auto;
    max-width: 500px;
    height: 65px;
    max-height: 65px;
    font-size: 25px;
	font-family: "隶书","隶书_LiSu";
    color: rgb(247,193,115) !important;
}

取消“我的梦想”一栏，改为自己喜欢的，在themes\Matery\source\layout\index.ejs中

<div id="indexCard" class="index-card">
    <div class="container ">
        <div class="card">
            <div class="card-content">
				<% if (theme.dream.enable) { %>
                    <%- partial('_widget/dream') %>
                  <% } %>
            </div>
        </div>
    </div>
</div>

<div id="indexCard" class="index-card">
    <div class="container ">
        <div class="card">
            <div class="card-content">
                <% if (theme.recommend.enable) { %>
                 <div id="recommend-sections" class="recommend">
                    <%- partial('_widget/recommend') %>
                 </div>
                 <% } %>
            </div>
        </div>
    </div>
</div>
<% }%>

在配置文件中修改文字内容即可

直达评论按钮，在 themes\Matery\layout\_partial\back-comment.ejs 中

<!-- 直达评论 -->
<div id="to_comment" class="comment-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#vcomments" title="直达评论">
        <i class="fas fa-comments"></i>
    </a>
</div>

在themes\Matery\layout\_partial\valine.ejs文末添加一条，引用第一步的内容；

<%- partial('_partial/back-comment.ejs') %>

增加样式在themes\Matery\source\css\matery.css添加内容如下：

/*直达评论按钮样式*/
.comment-scroll {
    position: fixed;
    right: 15px;
    bottom: 135px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.comment-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);
    width: 48px;
    height: 48px;
}

.comment-scroll .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}