【Hexo】ブログのテーマをicarusにしたよ!

はじめに

ブログのテーマを icarus に変えたよ!
微妙にハマりポイントがあったのでメモしておくよ!

公式サイト
https://github.com/ppoffice/hexo-theme-icarus

変更手順

1. ダウンロード

上の公式サイトから zip をダウンロードして解凍して themes フォルダに配置する

ここが最初のハマりポイントで、僕の場合はすでにブログ全体を git 管理していたせいか、git clone だと2重管理になってしまってライブリロード機能が動かなかった!
なので zip を利用した!

2. テーマ反映

ルートフォルダの_config.ymlの theme を修正する

1 で作成したフォルダ名にする
僕はフォルダ名を icarus に変えたので以下の通りに修正した

1
theme: icarus

3. 言語変更

ルートフォルダの_config.ymlの language を修正する

1
language: ja

4. .gitignoreを変更

icarus フォルダの.gitignore_config.ymlが入っているので必要があれば削除する

これ最初気付かなくて微妙にハマった、、

5. icarus フォルダの_config.ymlを修正

あとは icarus フォルダの_config.ymlをお好みに変更すれば OK!

6. CSS修正

見出しだけ変更しました

対象ファイル
 themes/icarus/source/css/style.styl

325行目からです

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* ---------------------------------
* Fix content elements
* --------------------------------- */
.content
h1
font-weight: bold
h2
font-size: 1.5em
color: #363636;
background: #0080002e;
padding: 10px 0px;
text-align: center;
h3
font-size: 1.25em
padding: 0.25em 0.5em;
background: transparent;
border-left: solid 5px #0080002e;
h4
font-size: 1.125em;
border-bottom: solid 3px #0080002e;
display: inline-block;
padding-bottom: 3px;

7. その他

参考までに自分の_config.ymlはこんな感じです。

thumbnail(サムネイル)は便利そうだけど画像をテーマフォルダに入れるのが面倒だったので使ってないです、、

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
# Version of the Icarus theme that is currently used
version: 2.6.0
# Path or URL to the website's icon
favicon: /images/avatar.png
# Additional HTML meta tags in an array.
meta:
# canonical_url of your site
canonical_url:
# Path or URL to RSS atom.xml
rss:
# Path or URL to the website's logo to be shown on the left of the navigation bar or footer
logo: /images/avatar.png
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id: reo3313
# Twitter site
twitter_site: https://twitter.com/reo3313
# Google+ profile link
google_plus:
# Navigation bar link settings
navbar:
# Navigation bar menu links
menu:
Home: /
Archives: /archives
# Categories: /categories
Tags: /tags
About: /2018/01/01/about
# Navigation bar links to be shown on the right
# links:
# Download on GitHub:
# icon: fab fa-github
# url: "https://github.com/ppoffice/hexo-theme-icarus"
# Footer section link settings
footer:
# 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 display settings
article:
# Code highlight settings
highlight:
# Code highlight themes
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light
# Show code copying button
clipboard: true
# Default folding status of the code blocks. Can be "", "folded", "unfolded"
fold: ''
# Whether to show article thumbnail images
thumbnail: false
# Whether to show estimate article reading time
readtime: true
# Search plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
# Name of the search plugin
type: insight
# Comment plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
# comment:
# # Name of the comment plugin
# type:
# Donation entries
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
# donate:
# - # Donation entry name
# type: alipay
# # Qrcode image URL
# qrcode: ""
# - # Donation entry name
# type: wechat
# # Qrcode image URL
# qrcode: ""
# - # Donation entry name
# type: paypal
# # Paypal business ID or email address
# business: ""
# # Currency code
# currency_code: USD
# - # Donation entry name
# type: patreon
# # URL to the Patreon page
# url: ""
# Share plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
# Share plugin name
type:
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
# left sidebar settings
left:
# Whether the left sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# right sidebar settings
right:
# Whether the right sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# Sidebar widget settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
- # Widget name
type: profile
# Where should the widget be placed, left or right
position: left
# Author name to be shown in the profile widget
author: reon777
# Title of the author to be shown in the profile widget
author_title: システムエンジニア
# Author's current location to be shown in the profile widget
location: 福岡県 北九州市
# Path or URL to the avatar to be shown in the profile widget
avatar:
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# Whether to show avatar image rounded or square
avatar_rounded: false
# Path or URL for the follow button
follow_link: ''
# Links to be shown on the bottom of the profile widget
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/reon777'
# Facebook:
# icon: fab fa-facebook
# url: ""
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com/reo3313'
# Dribbble:
# icon: fab fa-dribbble
# url: "https://dribbble.com"
# RSS:
# icon: fas fa-rss
# url: /
- # Widget name
type: toc
# Where should the widget be placed, left or right
position: left
# - # Widget name
# type: links
# Where should the widget be placed, left or right
# position: left
# Links to be shown in the links widget
# links:
# Hexo: "https://hexo.io"
# PPOffice: "https://github.com/ppoffice"
# - # Widget name
# type: category
# # Where should the widget be placed, left or right
# position: left
- # Widget name
type: tagcloud
# Where should the widget be placed, left or right
position: left
- # Widget name
type: archive
# Where should the widget be placed, left or right
position: right
# - # Widget name
# type: recent_posts
# # Where should the widget be placed, left or right
# position: right
# # Other plugin settings
- # Widget name
type: tag
# Where should the widget be placed, left or right
position: right
plugins:
# Enable page animations
animejs: true
# Enable the lightGallery and Justified Gallery plugins
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
gallery: true
# Enable the Outdated Browser plugin
# http://outdatedbrowser.com/
outdated-browser: true
# Enable the MathJax plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
mathjax: true
# Show the back to top button on mobile devices
back-to-top: true
# Google Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
google-analytics:
# Google Analytics tracking id
tracking_id:
# Baidu Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
baidu-analytics:
# Baidu Analytics tracking id
tracking_id:
# Hotjar user feedback plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
hotjar:
# Hotjar site id
site_id:
# Show a loading progress bar at top of the page
progressbar: true
# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: false
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
# Name or URL of the JavaScript and/or stylesheet CDN provider
cdn: jsdelivr
# Name or URL of the webfont CDN provider
fontcdn: google
# Name or URL of the webfont Icon CDN provider
iconcdn: fontawesome

コメントアウトばっかだな、、

以上です!

参考サイト

HEXO テーマ「icarus」導入のあれこれ
Hexo のテーマ Icarus をカスタマイズする

# Hexo
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×