前言

注意现在我现在使用的主题是Butterfly，本篇是对matery主题的修改

这是我在对matery主题的一些地方的修改，希望有的内容对于有需要的小伙伴有所帮助

1.对于移动端博客顶部标题过大问题的解决

首先在主题文件的source/css/my.css文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
/*小屏幕下(手机类)的样式*/

@media only screen and (max-width: 601px) {
    .container {
        width: 95%;
    }
    
    //以下是添加的内容
    header .brand-logo .logo-span {
        font-size: 0.6em;
        font-weight: 600;
    }
}

另外要注意上面的这一部分在该css中最前面的位置，要找到以下代码，将以下代码移动到上面代码的前面

1
2
3
header .brand-logo .logo-span {
    font-size: 1.6rem;
}

2.将鼠标指针光标修改成自己的图片

在主体目录下找到source/matery.css

在里面添加以下代码

1
2
3
html {
    cursor: url(../guangbiao.ico), auto;
}

url里面换成你自己要的图片后，我的图片后缀为.ico

3.将首页的所有链接设置成在新的页面打开

在主体目录下找到 layout/index.ejs

在里面添加

1
<base target="_blank">

我是在<main class="content">前面添加到

4.修改右侧滚动条样式

我在主题目录下source/matery.css里添加了以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #2ab1ff;
    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: #ffffff;
    border-radius: 3em;
}

::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

颜色按个人喜好修改

5.对右上角GitHub图标颜色修改

在主题目录下找到layout/_partial/github-link.ejs

在其大概第十六行的位置对其颜色进行修改

1
2
3
4
5
6
.github-corner svg {
        color: #188ee7;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

6.对主题颜色的修改

在主题录下找到source/matery.css

在有颜色属性的地方修改颜色

我是见绿改蓝（果然是蓝控）

7.对新建文章的模板

在根目录下找到/scaffolds/post.md修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: { { title } }
date: { { date } }
author:
img:
coverImg:
top: false
cover: false
toc: true
mathjax: false
password:
summary:
keywords:
tags:
categories:
---

8.首页图片背景加载出之前红色背景颜色修改

在主题目录下找到sourcelibs/materialize/materialize.min.css

ctrl+f输入.red{

显示的位置就是修改该背景颜色的位置

9.解决复制代码粘贴不能换行的问题

在matery主题目录下找到layout\\_partial\post-detail.ejs

大概在223行

将if语句的注释掉，保留中间的，大致可参考下面的代码的样子

1
2
3
//if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
     newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
//}

10.文章内目录大纲的字体颜色修改

在主题目录下找到layout\\_partial\post-detail-toc.ejs

ctrl+f搜索is-active-link

大致在70行的位置修改字体颜色

顺便把\#toc-content .toc-link:hover （大概56行）里的颜色也改了

(这里修改的是鼠标指针经过后字体改变的颜色)

11.修改留言板的链接提示，及发送弹幕的访客未填写链接时的默认链接

如果你正确地创建了该分页，那么你可以在主题目录下找到layout/contact.ejs然后ctrl+f搜索https://github.com/blinkfox

(这里对matery的作者表示敬意Orz)在搜索到的位置修改即可