自定义主题WhiteCards之路

一直多很喜欢白色卡片主题的质感,也一直迷上了light这种简洁的主题。

所以在一天晚上我终于动了手,对light进行自定义的尝试,最后即使未全部完成,依然将她发布在了GitHub上。

首先是和Next一样格式的初探,这里保留了主题的探索,直接与自定义合并为一篇。

官方网站

LightDemo

Github-Light

为什么会喜欢

非常的简洁,每个帖子都是用白色的卡片形式呈现,希望以后可以修改背景色的透明度以及色彩的饱和度——或者现在就可以。

主题要点以及路径记录

博客主页右边有一系列的小部件,关于相应部件的文件夹路径:

/Users/felixxiong/FelixXiongHexoFolder/themes/light/layout/widget(此处省略_号)

初探

尝试增加的内容

Sidebar(侧边栏)

社交网络:例如微博和推特

若直接在主题配置文件中

1
2


Partial …/_widget/weibo does not exist. (in _partial/sidebar.ejs)

1
2
3
4
5
6
7
8
9
10

现在看,或许是需要在widget中新建```twitter.ejs```文件进行放置,然后在主题配置文件当中启用。

### 修改右上方menu

关于相应部件的文件夹路径:

/Users/felixxiong/FelixXiongHexoFolder/themes/light/layout,

直接在主题配置文件中```menu```增加```Xxxx:xxxx```,在预览的网页上会出现以下报错:

Cannot GET /category/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

### 新建页面

遇到的问题是不很清楚如何新建页面。

新建页面直接是menu名称:

一段时间里有研究ejs新建页面。

## 主要自定义

### 修改
#### 卡片材质

关于路径,hexo主题的全局所有样式路径可能都在

/themes/whitecards/source/css/_base/variable.styl中,并非:/themes/whitecards/source/css/_partial/XXX.styl

##### 全局设定

// Color
color-background = #F9F9F9
color-font = #5E5E5E //keynote铁黑色
// 444
color-meta = #999
color-border = #ddd
color-link = #A9A9A9
// 258fb8

// Font
font-default = “Source Han Sans”, “Helvetica”, Myraid Pro, sans-serif // “Helvetica Neue”, “Helvetica”, Arial, sans-serif
font-serif = “Georgia”, serif
font-mono = Monaco, Menlo, Consolas, Courier New, monospace
font-title = “Source Han Sans”, Myriad Pro, Helvetica, Arial, sans-serif //“Lato”, Helvetica Neue, Helvetica, Arial, sans-serif

1
2
3
4
5
6

这里我自定义了颜色,字体选择的是中文:思源黑体(开源且免费),英文:Helvetica。

##### 辅助布局里的样式设定

路径:/themes/whitecards/source/css/_partial/article.styl为例

icon-size = 0px //去除了icon之后的大小
icon-gap = 0px

article
box-shadow 0px 0px 10px #ddd // 0 左右 0 上下 20 模糊
background #fff
&.page
padding-left 20px
.icon
display none

&.post
.icon
display none
// &:before
// content ‘\f016’ // 可以去除文章前面的图标

1
2

此代码中

box-shadow 0px 0px 10px #ddd // 0 左右 0 上下 20 模糊

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
可以用于该目录下任何辅助布局有卡片式阴影的部分。

### 增加
#### 部分国内服务代码

借鉴了:Hexo-theme-light_cn中的部分代码。

增加了toc。

### 自定义设想

在这个尝试中一直很想尝试做一个非常全面的主题,于是自己便开始尝试使用 ```# func ——```进行制作。

当中一次性打开很多```_config.yml```,结果因为修改错乱,很多次都没保存。

想过如何超过NexT主题,如果我专职做博客主题制作以及有一个团队,我想这一定可以成为现实。

## 发布到GitHub

由于折腾的一些无果,于是自己便将可以尝试的进行发布到GitHub上。

关于最后的结果,Read me中写的非常的详细了。

[FelixXiong/hexo-theme-whitecards](https://github.com/FelixXiong/hexo-theme-whitecards)

## Read me直接阅读

下面为直接阅读的该Read me。由于为了和上文统一,故为标题全部缩小一号。

## hexo-theme-whitecards

Based on hexo theme light

基于Light主要样式进行自定义修改,部分中国服务代码来源于light-cn,在此列出他们的地址。

Light theme on github:[hexo-theme-light](https://github.com/hexojs/hexo-theme-light)

Light-CN theme cn on github:[Hexo-theme-light_cn](https://github.com/pengloo53/Hexo-theme-light_cn)

### Preview:

![](https://i.loli.net/2018/05/04/5aebf563bfaa2.png)

### Introduction

目前此主题**需要修改**之后才可使用,如果觉得好看,欢迎star,fock修改以及PR。
这是我在hexo主题上的一次自定义的尝试。

### 已知issue

1.菜单错误:

- 点击Archives,Tags,Categories,WechatPubilc,Portfolio,About,地址栏会直接以该单词为开头例如archives/,之后如果在国内环境下则进入域名纠错系统。

- 点击Page会出现```https://page/

2,右侧Widgets失效

文件themes/hexo-theme-whitecards/layout/_widgetweibo.ejs中:

1
2
3
4
5
6
<div class="widget">
<h3 class="title">我的微博</h3>
<ul class="weibo">
<iframe width="100%" height="550" class="share_self" frameborder="0" scrolling="no" src="<%- http://widget.weibo.com/weiboshow/…… %>"></iframe>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


我开的issue:

light:[Cannot read property 'height' of undefined & TypeError](https://github.com/hexojs/hexo-theme-light/issues/71)

light_cn:[我的微博 小部件出现问题](https://github.com/pengloo53/Hexo-theme-light_cn/issues/7)


3,文章错误

Read more点击依然是Read more。

### Install

With git:

$ git clone https://github.com/FelixXiong/hexo-theme-whitecards

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

### Config

使用了非常简单的```# func -----```进行区分。

```html
# Blog _config.yml

# Menu settings --------------------------------------------

menu:
Home:
Archives: /archives
Tags: /tags
Categories: /categories
Page: /page
Post: /post
#Schedule: /schedule
#Sitemap: /sitemap.xml
#Commonweal: /404
WechatPubilc: /wechatpubilcaccount # Account
Portfolio: /portfolio
Github: #https://github.com/yourmname
About: /about
#RSS: /rss
#Preview: /preview

widgets:
- search
- recent_posts
- category
- tagcloud
- tag
- calendar
- links
- twitter
- weibo
- weixin

# Article settings --------------------------------------------

## toc settings --------------------------------------------

toc:

# Table Of Contents in the Sidebar
enable: true

# Automatically add list number to toc.
number: false

# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false

## Comment settings--------------------------------------------

##这里如果需要添加评论服务需要添加ejs文件,路径位于:你的hexo目录/themes/light/layout/_partial

comment_provider: gitment
# Facebook comment
facebook:
appid: 123456789012345
comment_count: 5
comment_width: 840
comment_colorscheme: light

## Share settings--------------------------------------------

# baidu share

baidu_share: false

excerpt_link: Read More
#comment_link: Comments

#Header settings --------------------------------------------

# header
avatar: /img/default/avatar.png
# header右侧图片展示
ad:

# 请到after_footer.ejs中替换百度统计代码

baidu_tongji: false

# Sidebar Settings --------------------------------------------


## Widget settings --------------------------------------------

# 微博: height小挂件高度;url替换成自己的微博挂件地址,同步修改url中height的值
weibo:
height: 550
url: http://widget.weibo.com/weiboshow/index.php?……
#tweet_count: 5

twitter:
username:
show_replies: false
tweet_count: 5

# Calendar
calendar:
language: zh-CN
root: calendar

# Wechat
Wechat:
qrcode: /img/default/qrcode.jpg
alt: 欢迎关注个人公众账号

# friendly links
links:
#: http://

addthis:
enable: true
pubid:
facebook: true
twitter: true
google: true
pinterest: true

fancybox: true

google_analytics:

rss:
FelixXiong wechat
产品北里,讲述产品和人性、涉及设计、技术和运营的公众号。
你们的赞赏是我更新的动力~