自定义主题WhiteCards之路

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

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

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

官方网站

LightDemo

Github-Light

为什么会喜欢

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

主题要点以及路径记录

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

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

初探

尝试增加的内容

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

若直接在主题配置文件中widgets修改增加-（社交网络名称），会出现以下报错：

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

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

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

/Users/felixxiong/FelixXiongHexoFolder/themes/light/layout，

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

Cannot GET /category/

新建页面

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

新建页面直接是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

这里我自定义了颜色，字体选择的是中文：思源黑体（开源且免费），英文：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' // 可以去除文章前面的图标

此代码中

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

可以用于该目录下任何辅助布局有卡片式阴影的部分。

增加

部分国内服务代码

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

增加了toc。

自定义设想

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

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

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

发布到GitHub

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

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

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

Light-CN theme cn on github:Hexo-theme-light_cn

Preview：

Introduction

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

已知issue

1.菜单错误：

点击Archives，Tags，Categories，WechatPubilc,Portfolio,About,地址栏会直接以该单词为开头例如archives/，之后如果在国内环境下则进入域名纠错系统。
点击Page会出现https://page/
点击GitHub会出现“Cannot GET /https://github.com/……”

2,右侧Widgets失效

search失效
calader没有相应的json文件 issus：请问Calendar模块在本地显示正常，但是发布到github上看不见日历了
微博小部件报错，报错代码：Partial …/_widget/weibo does not exist. (in _partial/sidebar.ejs)

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

<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>

src="<%- http://widget.weibo.com/weiboshow/…… %>"可能为你的微博秀挂件链接，在此需要确认。

我开的issue：

light:Cannot read property ‘height’ of undefined & TypeError

light_cn:我的微博小部件出现问题

3,文章错误

Install

With git：

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

Config

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

# 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:

情绪泛滥沉浸其中