cocosCreator

Hexo博客landscape-plus主题修改侧边栏颜色

一、修改左侧边状态栏的文字颜色

路径地址Hexo/themes/landscape-plus/source/css/_partial/sidebar-aside.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
#sidebar
  @media mq-normal
    column(sidebar-column)

.widget-wrap
  margin: block-margin 0

.widget-title
  font-size: 1.2em
  @extend $block-caption

.widget
  color: color-sidebar-text
  text-shadow: 0 1px #fff
  background: color-widget-background
  box-shadow: 1px 2px 3px color-border
  // box-shadow: 0 -1px 4px color-widget-border inset
  //border: 1px solid color-widget-border
  padding: 15px
  border-radius: 3px
  a
    //color: color-grey 1
    color: #488DB4 2
    text-decoration: none
    &:hover
      text-decoration: underline
      color: color-link
  ul, ol, dl
    ul, ol, dl
      margin-left: 15px
      list-style: disc

由位置1 color: color-grey 变更位置2 color: #488DB4

二、修改左侧边栏统计出来的数字颜色

路径地址Hexo/themes/landscape-plus/source/css/_partial/sidebar.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
if sidebar is bottom
  @import "sidebar-bottom"
else
  @import "sidebar-aside"

.widget
  @extend $base-style
  line-height: line-height
  word-wrap: break-word
  font-size: 0.9em
  ul, ol
    list-style: none
    margin: 0
    ul, ol
      margin: 0 20px
    ul
      list-style: disc
    ol
      list-style: decimal

.category-list-count
.tag-list-count
.archive-list-count
  padding-left: 5px
  //color: color-grey 1
  color: #488DB4 2
  font-size: 0.9em
  &:before
    content: "("
  &:after
    content: ")"

.tagcloud
  font-size: 1.1em
  a
    margin-right: 5px
    font-size: 20px

由位置1 color: color-grey 变更位置2 color: #488DB4

三、修改归档出来的文章按照年统计篇章数

路径地址Hexo/themes/landscape-plus/layout/_widget/archive.ejs

1
2
3
4
5
6
7
8
9
10
<% if (site.posts.length){ %>
  <div class="widget-wrap">
    <h3 class="widget-title"><%= __('archive') %></h3>
    <div class="widget">
      <!--<%- list_archives() %> -->
      //<%- list_archives({format: 'YYYY年 MM月'}) %>
      <%- list_archives({format: 'YYYY年'}) %>
    </div>
  </div>
<% } %>

由<%- list_archives({format: ‘YYYY年 MM月’}) %> 改成 <%- list_archives({format: ‘YYYY年’}) %>，以年统计减少数据展示更加简洁一些。

四、修改代码块高亮展示的时候的颜色和行数隐藏

路径地址Hexo/themes/landscape-plus/source/css/_partial/highlight.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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
highlight-background = #272822 /*#f8f8f8*/
highlight-current-line = #3E3D32
highlight-selection = #488DB4 /*#49483E*/
highlight-foreground = #F8F8F2 /*#525252*/
highlight-comment = #75715E
highlight-red = #F92672
highlight-orange = #42b983 /*#FD971F*/
highlight-yellow = #42b983 /*#E6DB74*/
highlight-green = #A6E22E
highlight-aqua = #A1EFE4
highlight-blue = #e96900 /*#66D9EF*/
highlight-purple = #AE81FF

$code-block
  background: highlight-background
  margin: 0 article-padding * -2
  padding: 10px article-padding
  border-style: solid
  border-color: color-border
  border-width: 0px 0  /*1px 0去掉边框*/
  overflow: auto
  color: highlight-foreground
  line-height: font-size * line-height

$line-numbers
  color: #666
  font-size: 0em /*隐藏展示行数0.85em*/

.article-entry
  pre, code
    font-family: font-mono
  code
    background: #f0f0f0
    text-shadow: 0 1px #fff
    font-size:  0.85em
    padding: 0 0.3em
    border: 1px solid #dcdcdc
    border-radius: 3px
  pre
    @extend $code-block
    code
      background: none
      text-shadow: none
      padding: 0
      border: none
  .highlight
    @extend $code-block
    pre
      border: none
      margin: 0
      padding: 0
    table
      margin: 0
      width: auto
    td
      border: none
      padding: 0
    figcaption
      clearfix()
      font-size: 0.85em
      color: highlight-comment
      line-height: 1em
      margin-bottom: 1em
      a
        float: right
    .gutter pre
      @extend $line-numbers
      text-align: right
      padding-right: 20px
    .line
      height: font-size * line-height
  .gist
    margin: 0 article-padding * -1
    border-style: solid
    border-color: color-border
    border-width: 1px 0
    background: highlight-background
    padding: 15px article-padding 15px 0
    .gist-file
      border: none
      font-family: font-mono
      margin: 0
      .gist-data
        background: none
        border: none
        .line-numbers
          @extend $line-numbers
          background: none
          border: none
          padding: 0 20px 0 0
        .line-data
          padding: 0 !important
      .highlight
        margin: 0
        padding: 0
        border: none
      .gist-meta
        background: highlight-background
        color: highlight-comment
        font: 0.85em font-sans
        text-shadow: 0 0
        padding: 0
        margin-top: 1em
        margin-left: article-padding
        a
          color: color-link
          font-weight: normal
          &:hover
            text-decoration: underline

pre
  .comment
  .preprocessor
    color: highlight-comment
  .tag
    color: highlight-foreground
  .title
  .variable
  .regexp
  .ruby .constant
  .xml .tag .title
  .xml .pi
  .xml .doctype
  .html .doctype
  .css .id
  .css .class
  .css .pseudo
    color: highlight-red
  .number
  .built_in
  .literal
  .constant
    color: highlight-purple
  .params
    color: highlight-orange
  .class
  .ruby .class .title
  .css .rules .attribute
  .attribute
    color: highlight-green
  .string
  .value
  .inheritance
  .header
  .ruby .symbol
  .xml .cdata
    color: highlight-yellow
  .css .hexcolor
    color: highlight-aqua
  .function
  .python .decorator
  .python .title
  .ruby .function .title
  .ruby .title .keyword
  .perl .sub
  .javascript .title
  .coffeescript .title
    color: highlight-blue
  .keyword
  .javascript .function
    color: highlight-blue

由于代码快左边会出现行数，在复制的时候容易复制出来，所以给隐藏掉比较好。