CSS样式调整

在文件source/css/main.styl中的末尾增加自己喜欢的样式，如：

body {
  // 字体调整
  font-family: Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  // 防止页面因没有滚动条导致的右移现象
  min-height: 100.1vh;
}

之后的样式都写在这里，能覆盖默认样式

网站名导航背景

// 侧边网站名背景
.site-brand-container {
  background-image: url(/images/side_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

固定页面宽度

注意：测试主题为Pisces，使用过5.x版本的Next就会发现，那时的页面宽度是固定的，并且比较窄，而升级到8.x后，发现页面宽度较宽，而且屏幕越大越宽，解决办法：编辑source/css/_variables/Pisces.styl：

$content-desktop-large        = 1400px;
$content-desktop-largest      = 1400px;

关闭代码行数

// 调整内距
figure.highlight .table-container {
    padding: 0 4px;
}
// 关闭代码行数
figure.highlight .table-container .gutter{
  display: none;
}

美化滚动条

/* 定义滚动条 */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    border-radius: 10px;
}
/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
}
/* 滑块hover效果 */
::-webkit-scrollbar-thumb:hover {
    background: #B2B2B2;
}

字体大小调整

// 文章整体字体大小
.post-body {
  font-size: 16px;
}
// 文章目录文字大小
.sidebar-panel-container{
  font-size: 15px;
}

取消顶部横条

// 取消顶部横条
.headband {
  display: none;  
}

图片增加边框

// 图片增加边框
.post-body img {
  border: 1px solid rgba(0,0,0,0.1);
}

隐藏侧边作者名字

// 隐藏侧边作者名字
.site-author-name {
  display: none;
}

作者描述样式调整

字数少不建议

// 作者描述样式调整
.site-description {
  text-align: left;
  text-indent: 2em;
  margin: 12px 0;
  font-size: 0.85em;
  padding: 0 28px;
}

文字选中颜色

// 文字选中颜色
::-moz-selection {
  // firefox
  background: #3367d1;
  color: #ffffff;    
}
::selection {
  // 其他浏览器
  background: #3367d1;
  color: #ffffff; 
}

取消代码块部分加粗

// 取消代码块部分加粗
.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-name, .hljs-selector-tag, .hljs-section, .hljs-title {
  font-weight: 500;
}

文章大纲美化

// 文章大纲美化（取消数字后）
.post-toc ol {
  padding: 0 12px;
}
.nav-item a {
  border-bottom: 1px solid #fff;
  transition: all .2s;
}
.nav-item a:hover {
  border-bottom: 1px solid #999;
}

分类中多余图片

分类的作用本就是快速查找到文章，结果发现文章中photo的图片出现在了分类中，实属占地😂，去除方法，打开layout/_macro/post-collapse.njk，注释或删除以下代码：

{{ post_gallery(post.photos) }}

分类中月份处理

调整分类中的时间显示格式，在layout/_macro/post-collapse.njk将格式化更改为YYYY-MM-DD：

<div class="post-meta-container">
  <time itemprop="dateCreated"
        datetime="{{ moment(post.date).format() }}"
        content="{{ date(post.date, config.date_format) }}">
    {{ date(post.date, 'YYYY-MM-DD') }}
  </time>
</div>

当文章的年份不一样时，会出现以下情况，不是很美观，所以建议将年取消，在layout/_macro/post-collapse.njk将以下代码删除

{%- if year !== current_year %}
  {%- set current_year = year %}
  <div class="collection-year">
    <span class="collection-header">{{ current_year }}</span>
  </div>
{%- endif %}

同时对样式进行调整：

// 调整分类中文章间隔
.posts-collapse .post-content .post-header {
  margin: 15px 0px;
}

// 修复分类中文章做出小点位置
.posts-collapse .post-content .post-header::before {
  left: -4px;
}

同时也可以在网站配置文件中对分类下文章分页数量进行设置

# Pagination
## Set per_page to 0 to disable pagination
per_page: 100
pagination_dir: page

其他样式相关调整

// 分页样式
.pagination .page-number.current {
  background: #222222;
  border-color: #222222;
  color: #fff;  
}
// 减少文章与顶部的距离（首页和文章页）
.post-block:first-of-type {
  padding-top: 0;
}
// 调整文章标题上下的间距
.posts-expand .post-title {
  margin: 20px 0 15px 0;
}
// 文章标题与图片距离
.posts-expand .post-gallery {
  margin-bottom: 10px;
}
// 首页文章标题与简介距离
.posts-expand .post-header {
  margin-bottom: 10px;
}
// 首页文章简介与阅读更多按钮距离
.post-button {
  margin-top: 20px;  
}
// 文章信息与文章内容的间距
.post-meta {
  margin-bottom: 20px;
}
// 文章段落间距调整
.post-block p {
  margin-bottom: 15px;
  line-height: 1.7;
}
// 调整表格
th, td {
  border-bottom: none;
}
// 引用样式
blockquote {
  border: 1px solid rgb(165, 194, 255) !important;
  background: linear-gradient(137deg, #f5eeff, #e6f4ff 52%, #ecf0ff 97%) !important;
  padding: 15px !important;
  margin: 0 !important;
}
// 引用距离调整
blockquote p {
  margin: 0 !important;
  padding: 10px 0;
  color: #615ced !important;
  font-size: 15px !important;
}
// 行内代码块
code {
  background-color: #e2e3ff;
  color: #7459ee;
  margin: 0 3px;
  display: inline-block;
  padding: 0 5px;
  font-size: 14px !important;
}
// 超链接样式
.post-body p a {
  color: #65a1d6;
  transition: all .1s;
  display: inline-block;
  margin: 0 2px;
}
.post-body p a:hover {
  color: #ff7600;
}

自定义分类到侧边

如果习惯使用一级分类，在使用时会发现点击分类会多点击一次，其实可以将分类放到侧边更加便捷，编辑layout/_layout.njk，在<header>中加入以下代码：

<header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="header-inner">
    {%- include '_partials/header/index.njk' -%}
  </div>

  {# 自定义分类 #}
  <div class="header-inner myCate sidebar animated fadeInUp">{% include '_partials/page/categoriesCustom.njk' %}</div>
  
  {%- if theme.sidebar.display !== 'remove' %}
    {% block sidebar %}{% endblock %}
  {%- endif %}
</header>

然后创建layout/_partials/page/categoriesCustom.njk文件，内容为：

<div class="category-all-page">
  <div class="category-all">
    {{ list_categories() }}
  </div>
</div>

然后就可以把导航中的分类隐藏了，并对样式做相应的调整：

// 自定义分类样式调整
.myCate {
  margin-top: 12px;
  box-sizing: border-box;  
  padding: 1em 0;
  border-radius: 1px;
  background-color: #fff;
}
.cate-title {
  height: 20px;
  width: 100%;
  font-size: 0.8125em;
  padding: 0 20px 10px 20px;
  font-weight: bold;
}
.myCate li {
  padding: 0 10px;
  line-height: 32px;
  border-radius: 3px;
}
.category-all-page .category-list {
  padding: 0 10px !important;
}
.myCate .category-list-item {
  margin: 0;
  transition: all .2s;
  display: flex;
}
.myCate .category-list-item:hover {
  background-color: #F5F5F5;  
}
.myCate .category-all {
  margin-top: 0;  
}
// 自定义分类统计靠右
.myCate .category-list-count {
  float: right;
  background-color: inherit;
  color: #999;
  font-weight: normal;
  line-height: 32px;
}
// 自定义分类下划线
.myCate .category-list-link {
  border-bottom: none;
  font-size: 0.8125em;
  flex: 1;
}
.myCate .category-list-count {
  font-size: 0.8125em;  
}
// 去除文章数量的括号
.myCate .category-list-count::before {
  content: '';
}
.myCate .category-list-count::after {
  content: '';
}
// 取消代码行数字，兼容横向滑动
.table-container .gutter {
  display: none !important;
}

更改分类中文章排序方式

在_config.yml配置文件中进行调整

# Pagination
## Set per_page to 0 to disable pagination
per_page: 1000
pagination_dir: page
category_generator:
  order_by: sort

站点收录

在百度搜索资源平台进行配置，同时安装sitemap生成工具，就能访问到站点地图

npm install hexo-generator-sitemap

站点地图地址为/sitemap.xml