icarus的美化方案，以及修改方法

发表于 更新于 分类于

美化博客，简单的配置文件修改以及高级的玩法

简单修改

修改配置文件

修改hexo根目录下的config.yml，由于我用的模板是icarus，则修改_config.icarus.yml文件

修改内容如下：

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
# Version of the configuration file
version: 5.1.0
# Icarus theme variant, can be "default" or "cyberpunk"
variant: default
# Path or URL to the website's logo
logo: #自己的logo图片路径或url
# Page metadata configurations
head:
  # URL or path to the website's icon
  favicon: /img/favicon.svg
  # Web application manifests configuration
  # https://developer.mozilla.org/en-US/docs/Web/Manifest
  manifest:
    # Name of the web application (default to the site title)
    name:
    # The displayed name of the web application
    # when there is not enough space to display full name
    short_name:
    # The start URL of the web application
    start_url:
    # The default theme color for the application
    theme_color:
    # A placeholder background color for the application page to display
    # before its stylesheet is loaded
    background_color:
    # The preferred display mode for the website
    display: standalone
    # Image files that can serve as application icons for different contexts
    icons:
      - # The path to the image file
        src: ''
        # A string containing space-separated image dimensions
        sizes: ''
        # A hint as to the media type of the image
        type:
  # Open Graph metadata
  # https://hexo.io/docs/helpers.html#open-graph
  open_graph:
    # Page title (og:title) (optional)
    # You should leave this blank for most of the time
    title:
    # Page type (og:type) (optional)
    # You should leave this blank for most of the time
    type: blog
    # Page URL (og:url) (optional)
    # You should leave this blank for most of the time
    url:
    # Page cover (og:image) (optional)
    # You should leave this blank for most of the time
    image:
    # Site name (og:site_name) (optional)
    # You should leave this blank for most of the time
    site_name:
    # Page author (article:author) (optional)
    # You should leave this blank for most of the time
    author:
    # Page description (og:description) (optional)
    # You should leave this blank for most of the time
    description:
    # Twitter card type (twitter:card)
    twitter_card:
    # Twitter ID (twitter:creator)
    twitter_id:
    # Twitter Site (twitter:site)
    twitter_site:
    # Google+ profile link (deprecated)
    google_plus:
    # Facebook admin ID
    fb_admins:
    # Facebook App ID
    fb_app_id:
  # Structured data of the page
  # https://developers.google.com/search/docs/guides/intro-structured-data
  structured_data:
    # Page title (optional)
    # You should leave this blank for most of the time
    title:
    # Page description (optional)
    # You should leave this blank for most of the time
    description:
    # Page URL (optional)
    # You should leave this blank for most of the time
    url:
    # Page author (article:author) (optional)
    # You should leave this blank for most of the time
    author:
    # Page publisher (optional)
    # You should leave this blank for most of the time
    publisher:
    # Page publisher logo (optional)
    # You should leave this blank for most of the time
    publisher_logo:
    # Page images (optional)
    # You should leave this blank for most of the time
    image:
  # Additional HTML meta tags in an array
  meta:
    # Meta tag specified in <attribute>=<value> style
    # E.g., name=theme-color;content=#123456 => <meta name="theme-color" content="#123456">
    - ''
  # URL or path to the website's RSS atom.xml
  rss:
# Page top navigation bar configurations
navbar:
  # Navigation menu items
  menu:
    # Home: /
    # Archives: /archives
    # Categories: /categories
    # Tags: /tags
    # About: /about
    主页: /
    归档: /archives
    分类: /categories
    标签: /tags
    #关于: /
  # Links to be shown on the right of the navigation bar
  # links:
  #     Download on GitHub:
  #         icon: fab fa-github
  #         url: https://github.com/ppoffice/hexo-theme-icarus
  # Page footer configurations
  # footer:
  #     # Copyright text
  #     copyright: © 2019
  # Links to be shown on the right of the footer section
  # links:
  #     Creative Commons:
  #         icon: fab fa-creative-commons
  #         url: https://creativecommons.org/
  #     Attribution 4.0 International:
  #         icon: fab fa-creative-commons-by
  #         url: https://creativecommons.org/licenses/by/4.0/
  #     Download on GitHub:
  #         icon: fab fa-github
  #         url: https://github.com/ppoffice/hexo-theme-icarus
  # Article related configurations
  # article:
  #     # Code highlight settings
  #     highlight:
  #         # Code highlight themes
  #         # https://github.com/highlightjs/highlight.js/tree/master/src/styles
  #         theme: atom-one-light
  #         # Show copy code button
  #         clipboard: true
  #         # Default folding status of the code blocks. Can be "", "folded", "unfolded"
  #         fold: unfolded
  #     # Whether to show estimated article reading time
  #     readtime: true
  #     # Whether to show updated time. For "auto", shows article update time only when page.updated is set and it is different from page.date
  #     update_time: true
  # Article licensing block
  # licenses:
  #     Creative Commons:
  #         icon: fab fa-creative-commons
  #         url: https://creativecommons.org/
  #     Attribution:
  #         icon: fab fa-creative-commons-by
  #         url: https://creativecommons.org/licenses/by/4.0/
  #     Noncommercial:
  #         icon: fab fa-creative-commons-nc
  #         url: https://creativecommons.org/licenses/by-nc/4.0/
# Search plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search/
search:
  type: insight
  # Whether to include pages in the search results
  index_pages: true
# Comment plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment/
comment:
  type: false
  # Disqus shortname
  shortname: ''
# Donate plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation/
donates:
# "Afdian.net" donate button configurations
# -
#     type: Afdian
# URL to the "Afdian.net" personal page
#     url: ''
# Alipay donate button configurations
# -
#     type: alipay
# Alipay qrcode image URL
#    qrcode: ''
# "Buy me a coffee" donate button configurations
# -
#     type: buymeacoffee
# URL to the "Buy me a coffee" page
#     url: ''
# Patreon donate button configurations
# -
#     type: patreon
# URL to the Patreon page
#     url: ''
# Paypal donate button configurations
# -
#     type: paypal
# Paypal business ID or email address
#     business: ''
# Currency code
#     currency_code: USD
# Wechat donate button configurations
# -
#     type: wechat
# Wechat qrcode image URL
#     qrcode: ''
# Share plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/
# share:
#     type: sharethis
#     # URL to the ShareThis share plugin script
#     install_url: ''
# Sidebar configurations.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
  # Left sidebar configurations
  left:
    # Whether the sidebar sticks to the top when page scrolls
    sticky: true
  # Right sidebar configurations
  right:
    # Whether the sidebar sticks to the top when page scrolls
    sticky: false
    # Sidebar widget configurations
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
  # Profile widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: profile
    # Author name
    Author: 世慕
    # Author title
    author_title: 世慕的个人博客
    # Author's current location
    location: Your location
    # URL or path to the avatar image
    avatar: #自己的头像图片路径或url，gravater必须为空，否则图片不生效
    # Whether show the rounded avatar image
    avatar_rounded: false
    # Email address for the Gravatar
    gravatar:
    # URL or path for the follow button
    #follow_link: https://github.com/ppoffice
    # Links to be shown on the bottom of the profile widget
    #social_links:
    #    Github:
    #        icon: fab fa-github
    #        url: https://github.com/ppoffice
    #    Facebook:
    #        icon: fab fa-facebook
    #        url: https://facebook.com
    #    Twitter:
    #        icon: fab fa-twitter
    #        url: https://twitter.com
    #    Dribbble:
    #        icon: fab fa-dribbble
    #        url: https://dribbble.com
    #    RSS:
    #        icon: fas fa-rss
    #        url: /
  # Table of contents widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: toc
    # Whether to show the index of each heading
    index: true
    # Whether to collapse sub-headings when they are out-of-view
    collapsed: true
    # Maximum level of headings to show (1-6)
    depth: 3
  # Recommendation links widget configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: links
  #     # Names and URLs of the sites
  #     links:
  #         Hexo: https://hexo.io
  #         Bulma: https://bulma.io
  # Categories widget configurations
  # -
  #     Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: categories
  # Recent posts widget configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: recent_posts
  # Archives widget configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: archives
  # Tags widget configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: right
  #     type: tags
  #     # How to order tags. For example 'name' to order by name in ascending order, and '-length' to order by number of posts in each tags in descending order
  #     order_by: name
  #     # Amount of tags to show. Will show all if not set.
  #     amount:
  #     # Whether to show tags count, i.e. number of posts in the tag.
  #     show_count: true
  # Google FeedBurner email subscription widget configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: subscribe_email
  #     # Hint text under the email input
  #     description:
  #     # Feedburner ID
  #     feedburner_id: ''
  # # Google AdSense unit configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: adsense
  #     # AdSense client ID
  #     client_id: ''
  #     # AdSense AD unit ID
  #     slot_id: ''
  # Follow.it email subscription widget configurations
  # -
  #     # Where should the widget be placed, left sidebar or right sidebar
  #     position: left
  #     type: followit
  #     # Hint text under the email input
  #     description:
  #     # Subscription form action URL
  #     action_url: ''
  #     # Feed claiming verification code
  #     verification_code: ''
# Plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/
plugins:
  # Enable page startup animations
  animejs: true
  # Show the "back to top" button
  back_to_top: true
  # Baidu Analytics plugin settings
  # https://tongji.baidu.com
  baidu_analytics:
    # Baidu Analytics tracking ID
    tracking_id:
  # Bing Webmaster Tools plugin settings
  # https://www.bing.com/toolbox/webmaster/
  bing_webmaster:
    # Bing Webmaster Tools tracking ID in the <meta> tag
    tracking_id:
  # BuSuanZi site/page view counter
  # https://busuanzi.ibruce.info
  busuanzi: false
  # CNZZ statistics
  # https://www.umeng.com/web
  cnzz:
    # CNZZ tracker id
    id:
    # CNZZ website id
    web_id:
  # Alerting users about the use of cookies
  # https://www.osano.com/cookieconsent/
  cookie_consent:
    # The compliance type. Can be "info", "opt-in", or "opt-out"
    type: info
    # Theme of the popup. Can be "block", "edgeless", or "classic"
    theme: edgeless
    # Whether the popup should stay static regardless of the page scrolls
    static: false
    # Where on the screen the consent popup should display
    position: bottom-left
    # URL to your site's cookie policy
    policyLink: https://www.cookiesandyou.com/
  # Enable the lightGallery and Justified Gallery plugins
  gallery: true
  # Google Analytics plugin settings
  # https://analytics.google.com
  google_analytics:
    # Google Analytics tracking ID
    tracking_id:
  # Hotjar user feedback plugin
  # https://www.hotjar.com/
  hotjar:
    # Hotjar site id
    site_id:
  # Enable the KaTeX math typesetting support
  # https://katex.org/
  katex: false
  # Enable the MathJax math typesetting support
  # https://www.mathjax.org/
  mathjax: false
  # Enable the Outdated Browser plugin
  # http://outdatedbrowser.com/
  outdated_browser: false
  # Show a progress bar at top of the page on page loading
  progressbar: true
  # Statcounter statistics
  # https://statcounter.com/
  statcounter:
    # Statcounter project id
    project:
    # Statcounter project security code
    security:
  # Twitter conversion tracking plugin settings
  # https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
  twitter_conversion_tracking:
    # Twitter Pixel ID
    pixel_id:
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
  # Name or URL template of the JavaScript and/or stylesheet CDN provider
  cdn: jsdelivr
  # Name or URL template of the webfont CDN provider
  fontcdn: google
  # Name or URL of the fontawesome icon font CDN provider
  iconcdn: fontawesome

将不需要的内容注释掉

现在的样式如下图

文章在首页折叠

在文档中加上 <!-- more --> 即可

将方形头像改为圆形

在 /hexo-theme-icarus/widget/profile.jsx 文件中做以下修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="card widget" data-type="profile">
	<div class="card-content">                
	<nav class="level">
    <div class="level-item has-text-centered flex-shrink-1">
        <div>
            <figure class="image is-128x128 mx-auto mb-2">
-               <img class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
+               <img style="border-radius:100%" class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
            </figure>
            {author ? <p class="title is-size-4 is-block" style={{'line-height': 'inherit'}}>{author}</p> : null}
            {authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null}
            {location ? <p class="is-size-6 is-flex justify-content-center">
                <i class="fas fa-map-marker-alt mr-1"></i>
                <span>{location}</span>
            </p> : null}
		</div>
	</div>
	</nav>

进阶修改

在修改yml配置文件之后，如果需要其他操作则需要修改代码

我是使用的官方的安装方法，所以 icarus 的源码在 \node_modules\hexo-theme-icarus 下

在上面的配置文件中吧toc设置位了true，并且在每篇文章的md文档的最上方添加了这样一处代码块

1
2
3
4
5
6
7
---
title: test
toc: true
categories: 
	- test
tags: [test]
---

在此处toc设为了true后，博客中的文章则会出现目录，我现在想让目录悬浮，让它跟着我的页面一起走则需要去源码中进行修改

在修改之前需要先自行添加一个文件

https://github.com/ppoffice/hexo-component-inferno/blob/master/src/view/widget/toc.jsx

再行开始有 - 号则是需要去的代码（注释也是一样的效果）， + 则为添加

将目录修改成悬浮

将这个文件复制到 \node_modules\hexo-theme-icarus\layout\widget 里，做如下操作

1
2
3
4
5
6
// 将下面这行进行注释即可，我这边显示在第96行
const keys = Object.keys(toc)
            .filter((key) => !['id', 'index', 'text'].includes(key))
            // 如果想让目录单独悬浮，请注释下面这一行，若将此行注释，_config.icarus.yml里的sidebar配置为true后，其他组件可能会被目录所覆盖，导致只能看到没被覆盖的位置
-            // .map((key) => parseInt(key, 10))
            .sort((a, b) => a - b);

将目录的自动生成序号去掉

在刚刚添加的文件里注释掉下面这行代码

1
2
3
4
5
6
7
8
9
10
11
if ('id' in toc && 'index' in toc && 'text' in toc) {
            result = (
                <li>
                    <a class="is-flex is-mobile" href={'#' + toc.id}>
-                        {/* {showIndex && <span class="mr-2">{toc.index}</span>} */}
                        <span>{unescapeHTML(toc.text)}</span>
                    </a>
                    {result}
                </li>
            );
        }

导航栏悬浮与左边的组件悬浮

  • 左边的组件悬浮

    修改仙鸣的配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    sidebar:
      # Left sidebar configurations
      left:
        # Whether the sidebar sticks to the top when page scrolls
    -   sticky: false
    +   sticky: true
      # Right sidebar configurations
      right:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: false

    修改 \include\style\responsive.styl 第28行 top 属性

    1
    2
    3
    4
    5
    .column-main, .column-left, .column-right, .column-right-shadow
            &.is-sticky
    -           top: .75rem
    +           top: 6rem
                align-self: flex-start

  • 导航栏悬浮

    在 \node_modules\hexo-theme-icarus\source 下的 style.styl 文件中添加下面的样式

    1
    2
    3
    4
    5
    6
    7
    .navbar-main
      position: fixed !important
      width: 100% !important
      top: 0px

    .section
      margin-top: 45px

现在的样式：

修改主页与文章页面固定三栏布局

修改固定三栏布局

修改 /hexo-theme-icarus/layout/layout.jsx 代码

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
module.exports = class extends Component {
    render() {
        const { site, config, page, helper, body } = this.props;

        const language = page.lang || page.language || config.language;
        const columnCount = Widgets.getColumnCount(config.widgets, config, page);

        return <html lang={language ? language.substr(0, 2) : ''}>
            <Head site={site} config={config} helper={helper} page={page} />
-           <body class={`is-${columnCount}-column`}>
+           {/*强制显示三栏*/}
+           <body class={`is-3-column`}>
                <Navbar config={config} helper={helper} page={page} />
                <section class="section">
                    <div class="container">
                        <div class="columns">
                            <div class={classname({
                                column: true,
                                'order-2': true,
                                'column-main': true,
                                'is-12': columnCount === 1,
-                               'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+                               // 新增
+                               'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
                                'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
                            })} dangerouslySetInnerHTML={{ __html: body }}></div>
                            <Widgets site={site} config={config} helper={helper} page={page} position={'left'} />
                            <Widgets site={site} config={config} helper={helper} page={page} position={'right'} />
                        </div>
                    </div>
                </section>
                <Footer config={config} helper={helper} />
                <Scripts site={site} config={config} helper={helper} page={page} />
                <Search config={config} helper={helper} />
            </body>
        </html>;
    }
};

修改 /hexo-theme-icarus/layout/common/widgets.jsx 代码

1
2
3
4
5
6
7
8
9
10
function getColumnSizeClass(columnCount) {
    switch (columnCount) {
        case 2:
-           return 'is-4-tablet is-4-desktop is-4-widescreen';
+           return 'is-4-tablet is-4-desktop is-3-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }
    return '';
}

文章页面自定义布局

在文章页widget只显示toc，只需要单独新建一个 _config.post.yml 文件并单独添加widget配置即可，配置如下：

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
# 此文件与 _config.icarus.yml 文件放置一起
# 内容如下：
# Sidebar configurations.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # Right sidebar configurations
    right:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: true
widgets:
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: true
        # Maximum level of headings to show (1-6)
        depth: 3
    # Recent posts widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: recent_posts
    # Categories widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: categories

修改a链接变色过渡

在 /hexo-theme-icarus/source/css/style.styl 文件中添加 :houver 属性

1
2
3
4
5
a:hover
  transition: color 0.5s

a
  transition: color 0.5s

参考资料

Icarus 主题双列显示和目录单独浮动等

设置两套widget，post页面单独设置

能否实现文章目录单独浮动和子目录折叠 #673

是否考虑增加固定导航栏navbar的配置 #1038