NexT Checkpoint

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 3k 阅读时长 ≈ 3 分钟
记录一下NexT的配置。。

NexT

目前为止用到的改动

每个主题侧边栏长得不一样，个性化设置可以去 themes\hexo-theme-next-8.11.0\source\css_schemes\ 下对应包中调整。
不个性化的直接在 custom file path 对应的 style 路径下找 .styl 就可以。

Site Information Settings

favicon

更改图标，源自主题包下 source，如 /images/miosml.png 即 source/images/miosml.png

creative_commons

版权声明。

侧栏目录内容，可追加，格式 name1: /name2/ || fa fa-icon_name
其中 name1 为显示名，途径 translation，可在主题包下 languages 中需要的词包中添加 name1 的翻译；
其中 /name2/ 为调用的 page 文件夹名，完整路径是 Hexo 根目录/name2/，届时显示其下 index.md 内容；
其中 fa fa-icon_name 为调用的图标，取自fontawesome，但好像一日之内上不去了；

侧边栏左右位置、隐藏等等

Avatar

头像

rotated

转圈动画

social

添加媒体账号

Blog rolls

添加其他网址，title 是 title

Table of Contents in the Sidebar

侧栏文章目录设置

页面最下方内容
其中没有提及的可在 themes/hexo-theme-next-8.11.0/layout/_partials/footer.njk 直接写入

主页

excerpt_description: true 启用 description
read_more_btn: true 启用 Read more button

打赏功能，可放二维码，加入动画等

小功能

back2top：回到顶部和滚动百分比设置

Reading progress bar：阅读进度条

Bookmark Support：书签

github_banner：右上的github猫

pace：加载条，Progress bar in the top during page loading.

Read more button：阅读全文按钮

Use icon instead of the symbol # to indicate the tag at the bottom of the post：文章底部 tag 的图标，false 的话显示 #，true显示什么可以在 /themes/next/layout/_macro/post.njk 中修改。

字体font

分别是
侧栏字体 Global font settings used for all elements inside body.
大标题字体 Font settings for site title (.site-title).
小标题字体 Font settings for headlines (h1 to h6).
正文字体 Font settings for posts (.post-body).
代码框字体 Font settings for code and code blocks.

动画 Animation Settings

从这里得到动作名称。
分别是
post_block: 整块文章
post_header:
post_body:
coll_header:
sidebar: 整个头像侧栏

背景

基本源于这位佬的博文
总之就是
在 custom_file_path 下新引出一条 style: source/_custom/custom.styl （叫别的也行，用原来注释掉的 style 路径也行，但都需要新建）
去 blog 根目录下 source/ 新建 /_custom/custom.styl
加入以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 设置背景图片
body {
  // 使用URL，固定和随机 API 都行，但注意别被拉伸成笨蛋
  // background:url(https://source.unsplash.com/random/1600x900); 
  // background:url(https://image.anosu.top/pixiv/direct?r18=0); 
  background-image:url(/images/back.jpg); //这一行的括号里填背景图片的路径，将图片放在\themes\next\source\images下
  background-repeat: no-repeat; // 不重复
  background-attachment:fixed; // 不随鼠标滚动
  background-position:50% 50%; // 居中
  background-size: cover;      // 填充
  //background-size:100% 100%; // 会强制拉伸，很哈人
}

//站点主副标题颜色
.brand{
    color: #f1eef5
    }
.site-subtitle{
    color: #eef2f5
  }


// 侧边上栏图片定义
.site-brand-container{
  background:url(/images/head.jpg);
}

// 各板块设置透明度
// 主板块
.main-inner {
    background: rgba(254, 250, 254, 0.9);  // 文字和左右框线的间距
}

// 主版块里的post板块(f12,cmd+shift+c找出)
.post-block {
    margin-top: 10px; // 文章框和顶部空隙
   margin-bottom: 10px; // 文章框间距
   padding: 20px; // 文字和左右框线的间距
   -webkit-box-shadow: 0 0 9px rgba(102, 77, 51, 1); // 博文边上的的框框
   -moz-box-shadow: 0 0 9px rgba(255, 220, 255, 0.8); // 这我也不知道干嘛的，好像没用
  opacity: 1; // 最好别降这个透明度，因为包括文字和图
}

// 侧边框的透明度设置
.sidebar {
  opacity: 0.85;
}

// 菜单栏的透明度设置
.header-inner {
  background: rgba(245, 238, 255, 0.85);
}

// 页码
.pagination {
  opacity: 0.95;
}

//评论区
.wl-panel{
  opacity: 0.9;
}

// 搜索框（local-search）的透明度设置
.popup {
  opacity: 0.85;
}

完毕
注，这些块的名称都可以在控制台里对应查到，直接用那个名字直接自定义即可。

备案号

在 beian 下。
备案标放到主题根目录下 source/image 即可。