NexT(v7.0+)美化(三)

本文章基于 Next v7.7 版本编辑, 自定义文件与主题文件分离是个好的实践,这样可以在不修改任何主题原始代码的情况下加入自定义内容。所有 CSS 修改都使用 custom_file_path

关闭 tagscategories 页面的 valine 评论

打开 .\source\tags\index.md.\source\categories\index.md

添加

1
2
3
4
5
6
---
title: 标签
date: 2017-05-27 14:22:08
type: "tags"
comments: false
---

自定义鼠标样式

打开 .\source\_data\custom.styl 并添加下列代码

1
2
3
4
5
6
7
// 鼠标样式
* {
cursor: url("图片链接"),auto !important
}
:active {
cursor: url("图片链接"),auto !important
}

图片链接的文件必须是 ico 文件

图片懒加�::-webkit-scrollbar {

width: 10px;
height: 10px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
display: none;
}
::-webkit-scrollbar-corner {
display: block;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
width: 10px;
height: 10px;
/background: url(../images/scrollbar_arrow.png) no-repeat 0 0;/ /可以添加滚动条样式/
}

1
2
3
4
5
6
7
8
9
10
11
12
13

## 修改右下角返回按钮样式
打开 `.\source\_data\custom.styl`

``` css
// 右下角返回顶部按钮样式
.back-to-top {
background-color: #373737;
border-radius: 5px;
}
.back-to-top.back-to-top-on {
bottom: 10px;
}

修改选中文字时的样式

打开 .\source\_data\custom.styl

1
2
3
4
5
/* 选中文字部分的样式 */
::selection {
background-color: #fced6d;
color: #222222;
}

头像圆角

打开 .\source\_data\custom.styl
打开 Next 配置文件

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false

分割线美化

打开 .\source\_data\custom.styl

1
2
3
4
5
6
// 分割线美化
hr {
margin: 20px 20px;
height: 3px;
background-color: #000;
}

黑夜模式

打开 Next 配置文件

1
2
# Dark Mode
darkmode: true