NexT 主題自定义 CSS 样式分享

发表于 更新于 分类于
本文字数： 231 阅读时长 ≈ 1 分钟

Photo by David Wirzba

NexT 自带的 Muse、Mist、Pisces、Gemini 四个 Schemes，可以在通过判断 scheme 的取值，对各个 Schemes 单独做样式修改，平时看到一点改一点，所以这里的配置应该会经常变动更新

NexT 7.3 之后的版本取消了 custom.styl，自定义 CSS 统一挪到 source\_date\styles.styl，详见启用数据目录的方法

更新记录

日期内容
2019-01 初稿
2019-11 适配 NexT 7.x 版本
2020-09 适配 NexT 8.x 版本

样式文件

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
// Next.Muse 自定义CSS
if hexo-config('scheme') == 'Muse' {
    //为Header和Footer添加背景色
    .header {
        +desktop() {
            background: #F5F5F5;
        }
        +tablet() {
            background: #F5F5F5;
        }
        +mobile() {
        }

    }

    .footer {
        +desktop() {
            background: #F5F5F5;
        }
        +tablet() {
            background: #F5F5F5;
        }
        +mobile() {

        }
    }

    //调节header空白
    .header-inner {
        +desktop() {
            padding-top: 70px;
            padding-bottom: 50px;
        }
        +tablet() {
            padding-top: 70px;
            padding-bottom: 50px;
        }
        +mobile() {
            padding-top: 50px;
            padding-bottom: 30px;
        }
    }

    //文章样式
    .post-body {

        //宽屏模式下字体太大了，改回mediun   
        +desktop-large() {
            font-size: $font-size-medium;
        }

        //文章内用H2做一级标题，加下横线  
        h2 {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        //文章内用H3做二级标题，加大字号  
        h3 {
            font-size: 1.2em;
        }

        //文章图片说明
        .image-caption {
            font-size: 0.5em;
            font-weight: normal;
            margin: -10px auto 15px
        }
    }

    //文章内图片样式
    .post-body img {
        border: 1px solid #ddd;
        box-sizing: border-box;
        padding: 0px;
        border-radius: 3px;
        box-shadow: 4px 4px 4px 0px #ddd;
    }


    //赞赏按钮样式
    .reward-container button {
        background: #222222;
        color: #F5F5F5
        height: 38px;
        width: 38px;
        padding: 0 0 0;
        border: 0;
        border-radius: 5px;
        line-height:0;
        outline: 0
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: 0.2s ease-out;

        &:hover {
            background: #26aca3;
        }
    }

    //版权声明样式
    .post-copyright ul{
        background-color: #f9f9f9;
        border-left: 0px;
        list-style: none;
        margin: 2em 0 0;
        padding: 0.5em 1em;
        border: 1px solid #dddddd;
    }

    //底部上下篇导航留空
    .post-nav-item {
        padding: 10px 0px 10px 0px
    }
}

// Next.Mist 自定义CSS
if hexo-config('scheme') == 'Mist' {
}

// Next.Pisces 自定义CSS
if hexo-config('scheme') == 'Pisces' {
}

// Next.Gemini 自定义CSS
if hexo-config('scheme') == 'Gemini' {
}
相关文章