修改NexT8.x主题全局样式

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 3.2k 阅读时长 ≈ 3 分钟
NexT8.1.0全局样式设置和个别页面模块样式的修改

1. 全局样式设置

  • 在source文件夹下新建.styl结尾的文件，我的是variables.styl，代码如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $body-bg-color = #eee;
    $content-bg-color = #fff;
    $card-bg-color = #f5f5f5;
    $text-color = #555;
    $blockquote-color = #666;
    $link-color = #555;
    $link-hover-color = #fc9d9a;
    $brand-color = #fff;
    $brand-hover-color = #fff;
    $table-row-odd-bg-color = #f9f9f9;
    $table-row-hover-bg-color = #f5f5f5;
    $menu-item-bg-color = #ffe4e1;
    $btn-default-bg = #fff;
    $btn-default-color = #fc9d9a;
    $btn-default-border-color = #fc9d9a;
    $btn-default-hover-bg = #fc9d9a;
    $btn-default-hover-color = #fff;
    $btn-default-hover-border-color = #fc9d9a;
  • 在_config.next.yml中把custom_file_path配置项中的variable选项的注释去除，重新编译即可生效

2. 页面样式设置

  • 具体选择器名可能版本不同略有不同，可通过hexo s本地运行后在浏览器调试工具中查看，代码如下：
    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
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    // 文章目录链接样式
    .sidebar-nav .sidebar-nav-active {
        border-bottom-color: #fc9d9a;
        color: #fc9d9a;
    }

    .sidebar-nav .sidebar-nav-active:hover {
        color: #fc9d9a;
    }

    a, span.exturl {
        border-bottom: none;
    }

    .post-toc .nav .active-current > a {
        color: #fc9d9a;
    }

    .post-toc .nav .active > a {
        border-bottom-color: #fc9d9a;
        color: #fc9d9a;
    }

    .post-toc .nav .active-current > a:hover {
        color: #fc9d9a;
    }

    // 顶部黑线
    .headband {
        background-color: #fc9d9a;
    }

    //题头
    .site-brand-container {
        background: #fc9d9a; 
    }

    // 返回顶部
    .back-to-top{
        background: #fc9d9a; 
    }

    .back-to-top:hover {
        color: #ffffff;
    }

    // 设置背景图片
    body {
        background: url(https://img-blog.csdnimg.cn/d0a8fda7ce3349459bd8a440fe06dc00.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 50%;
    }

    // 博客内容透明化
    // 文章内容透明化

    .main-inner > .sub-menu, .main-inner > .post-block,
    .main-inner > .tabs-comment, .main-inner > .comments,
    .main-inner > .pagination {
        background-color: rgba(255, 255, 255, 0.9);
    }

    // 侧边栏透明化
    .sidebar{
        opacity: 0.9;
    }

    // 菜单栏透明化
    .header-inner {
        background: rgba(255, 255, 255, 0.9);
    }

    // 搜索透明度
    .popup {
        opacity: 0.9;
    }

    // 代码块透明化
    figure.highlight {
        opacity: 0.8;
    }

    // 底部红心跳动
    .with-love {
        animation:beat 1.2s infinite;
    }

    @keyframes beat{
        30%{transform:scale(1.2);}
        100%{transform:scale(1);}
    }

    // 文字选中颜色
    ::selection {
        background: #fc9d9a;
        color: #fff;
    }

    .sidebar-nav li:hover {
        color: #fc9d9a;
    }

    .sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview {
        border-bottom-color: #fc9d9a;
        color: #fc9d9a;
    }

    .sidebar-toc-active .sidebar-nav-toc:hover, .sidebar-overview-active .sidebar-nav-overview:hover {
        color: #fc9d9a;
    }

    // 归档页圆点颜色
    .posts-collapse .post-content .post-header:hover {
    border-bottom-color: #fc9d9a;
    }

    .posts-collapse .post-content .post-header:hover::before {
    background: #fc9d9a;
    }

    // 左上菜单选中文字颜色
    .main-menu .menu-item-active {
        color: #fc9d9a;
    }

    .main-menu .menu-item-active::after {
        background: #fff;
    }

    // 标题选中下划线颜色
    .posts-expand .post-title-link::before {
        background: #fc9d9a;
    }

    .posts-expand .post-title-link:hover::before {
        background: #fc9d9a;
    }
  • 同样在_config.next.yml中把custom_file_path配置项中的style选项的注释去除，重新编译即可生效