修改调试技巧

在chrome浏览器中按F12,调出审查元素,然后点击最左端的搜索图标,就可以单独页面上查看任意元素的样式。然后再点击元素,就可以在右侧的Styles选项的下方调整其代码,而且改动实时生效,代码改动完页面相应元素马上就会改变,显示出效果,这点非常棒!等到调整满意后就复制相关css代码到别的地方备份一下。因为只要一刷新,页面就会恢复成原来的样子。

如果修改满意后,但是不知道要修改的相关代码具体在哪个文件,可以去landscape-plus主题github地址This repository中搜索相关代码,然后就知道相关代码所在的文件路径了。

添加网站小图标

D:\hexo\themes\landscape-plus\layout\_partial编辑head.ejs文件,按Ctrl+f查找关键词favicon,找到在第28行和第29行。
<% if (theme.favicon){ %>的下面插入以下代码:

<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">

即变成:

1
2
3
4
5
6
7
<% if (theme.rss){ %>
<link rel="alternative" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">
<% } %>
<%- css('css/style') %>

然后在网上找个好看的图标,或者去图标生成网站:http://www.faviconer.com/生成一个后缀名为.ico的图标文件,最后把该文件放到D:\hexo\source目录下,重新部署即可。

添加自定义404页面

直接新建一个404.html文件放到D:\hexo\source目录下,然后编辑即可,注意最上面要写:

1
2
layout: false
---

404音乐电台

因为熊海做的这个音乐电台只有一个html文件和一张背景图片,所以可以添加到404页面(在此感谢熊海)。
这个百度网盘下载熊海博客电台.rar,然后新建一个404.html文件,在---下方粘贴代码,然后把这个文件放到D:\hexo\sourceD:\hexo\themes\landscape-plus目录下,接着把下载文件中的bg.jpg放到D:\hexo\source\images目录下即可。

修改正文字体大小及调整行间距

D:\hexo\themes\landscape-plus\source\css\_variables.styl中的第34行,改为font-size = 16px,然后顺便把正文的行间距也一起改了:line-height = 1.8em
但是改了后所有的行间距都变成1.8em了,我想把侧边栏的文字的行间距改小一点,于是去D:\hexo\themes\landscape-plus\source\css\_partial\sidebar.styl修改.widget下为line-height: 1.6em注意还要删掉@extend $base-style这一行才能起效果。

修改副标题字体大小和颜色

修改副标题字体颜色

我想修改副标题的字体颜色,这里推荐给大家一个办法:
先去爱词霸 翻译 “副标题字体颜色”,结果会出来 “Subtitle font color” ,然后去hexo-theme-landscape,在上方的搜索框搜索Subtitle font color回车,然后我们就找到了修改字体颜色的目录为hexo-theme-landscape(主题目录)/source/css/_partial/header.styl,接着去我们自己相应的主题目录编辑D:\hexo\themes\landscape-plus\source\css\_partial\header.styl文件,还是搜索关键字subtitle,找到第60行修改为:

1
2
3
4
5
6
##subtitle
@extend $logo-text
font-size: subtitle-size
line-height: subtitle-size
letter-spacing: 5px
color: ##fff

其中letter-spacing是字符间距,你可以调整它试一下,颜色color改为##fff白色,和主标题一致。

修改副标题字体大小

因为副标题字体大小的英语是subtitle size,所以同样在hexo-theme-landscape中搜索subtitle size,得到结果页面,很明显看出要修改主题目录下的source/css/_variables.styl文件,于是查找subtitle后把16px改为20px:

1
2
3
4
5
// Header
logo-size = 40px
subtitle-size = 20px
banner-height = 300px
banner-url = "images/banner.jpg"

经过测试可以知道上面的logo-size表示你的主标题字体大小,而你的主题目录/source/css/_partial/header.styl文件中logo-text那一栏的下面color就表示主标题字体的颜色。

这里一定要提醒各位:=:后面一定要加个空格。

修改后保存文件,然后在博客目录执行:

1
hexo clean && hexo g && hexo d

重新部署后,刷新就会看到效果了。

调整右侧边栏顺序

编辑主题配置文件,比如你使用的默认主题,就到D:\hexo\themes\landscape\_config.yml调整widgets:那一栏的顺序。
原来的:

1
2
3
4
5
widgets:
- category
- tagcloud
- archive
- recent_posts

改为:

1
2
3
4
5
widgets:
- recent_posts
- category
- archive
- tagcloud

页面底部添加自定义文字

打开D:\hexo\themes\landscape-plus\layout\_partial\footer.ejs,在最底下 </div>的下面和</footer>上面之间插入以下代码:

1
2
3
4
<div style="font-family:楷体; font-size: 28px; position:relative; left: 350px;bottom:70px;">人不是因为没有信念而失败,而是因为不能把信念化成行动,并且坚持到底。
</div>
<div style="font-family:楷体; font-size: 28px; position:relative; left: 920px;bottom:50px;">——戴尔·卡耐基《人性的弱点》
</div>

2015-11-15更新:因为上述代码会撑大窗口,故而更新成下面的代码:

1
2
<div style="font-family:楷体; font-size: 22px;position:absolute;left: 220px;margin: -100px 0px 0px 0px;">人不是因为没有信念而失败,而是因为不能把信念化成行动,并且坚持到底。——戴尔·卡耐基《人性的弱点》
</div>

2015-11-20更新:增加单独样式以及移动端的适配。
具体详见另一篇博文:Hexo博客移动端适配的优化

修改返回顶部图标位置

觉得返回顶部图标的位置太高了,要调低点。
打开D:\hexo\themes\landscape-plus\source\css\_partial\totop.styl,第5行改为bottom 2em

修改文章主题样式细节

添加标题顶部日期和分类的图标

打开D:\hexo\themes\landscape-plus\source\css\_partial\article.styl文件,修改.article-date(第16行)为:

1
2
3
4
&:before
font-family: font-icon
color: ##ccc
content: "\f073"

.article-category大概是第27行:

1
2
3
&:before
font-family: font-icon
content: "\f06c"

顺便调整一下日期前面图标的位置:margin-left: 20px

修改文章底部标签前面的图标

1
2
3
4
5
.article-tag-list-link
a&:hover
color: color-link
&:before
content: "@"

这个图标我们使用特殊符号,而不使用FontAwesome图标,就不用写font-family: font-icon这一行代码,反之则要写。
直接把你要使用的特殊符号粘贴进content的双引号之间就行了。

注意:
1.粘贴特殊符号时,在“notepad++”里是显示为“□”,但是部署或者启动服务预览后会显示出来。
2.上面的a&:hover color: color-link是指鼠标滑过“标签”时,会显示链接颜色。
3.查找一些常见的FontAwesome图标对应的CSS代码可以搜索关键词“FontAwesome CSS content values”。参见文章底部的附录

标题前面加条蓝线

修改.article-header条目,添加border-left这一行:

1
2
3
.article-header
padding: article-padding article-padding 0
border-left: 5px solid color-twitter //标题前面加条蓝线

其中color-twitterD:\hexo\themes\landscape-plus\source\css\_variables.styl第21行为蓝色,你也可以修改为其他颜色或者自定义一个新的颜色属性。

修改文章正文字体为宋体

打开D:\hexo\themes\landscape-plus\source\css\_partial\article.styl文件,修改.article条目为:

1
2
3
4
.article
margin: block-margin 0
font-family: SimSun //修改正文字体为宋体
letter-spacing: 1px //调整文字间距

然后修改正文旁边的日期、分类、标题等其他字体为微软雅黑。

1
2
.article-date //修改正文旁边的日期字体
font-family: "微软雅黑" //添加这一行

同样也添加这一行到article-category .article-header .article-tag-list-item .article-comment-link .article-share-link这些条目中。

修改文章一到六级标题字体为微软雅黑,并且不加粗

编辑D:\hexo\themes\landscape-plus\source\css\_extend.styl文件,修改相关代码为如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
h1
font-family: "微软雅黑"
font-size: 1.5em
h2
font-family: "微软雅黑"
font-size: 1.5em
h3
font-family: "微软雅黑"
font-size: 1.3em
h4
font-family: "微软雅黑"
font-size: 1.2em
h5
font-family: "微软雅黑"
font-size: 1em
h6
font-family: "微软雅黑"
font-size: 1em
color: color-grey

然后把他们不加粗只要删掉相关条目下的font-weight: boldfont-weight类似代码就OK。
先在landscape-plus的github主页搜索bold,发现相关代码的文件是source/css/_extend.stylsource/css/_partial/article.styl
于是删除source/css/_extend.styl文件中$base-style下的h1, h2, h3, h4, h5, h6条目下的font-weight: bold代码,注意也要删除下方 h2, h3, h4, h5, h6条目下的font-weight: 600这一行代码。
接着去source/css/_partial/article.styl文件,删除.article-entry下的h1, h2, h3, h4, h5, h6条目下的font-weight: bold代码。
于是1-6级标题不加粗就完成了。

修改侧边栏字体为宋体

打开D:\hexo\themes\landscape-plus\source\css\_partial\sidebar.styl,在.widget下方添加一行,如下:

1
2
.widget
font-family: SimSun //修改侧边栏字体为宋体

标题字体不加粗

打开D:\hexo\themes\landscape-plus\source\css\_partial\article.styl文件,删掉.article-title条目下方的font-weight: bold这一行。

修改右侧分类、近期文章等字体为宋体

打开D:\hexo\themes\landscape-plus\source\css\_partial\sidebar-aside.styl文件,修改.widget-title条目如下:

1
2
3
4
.widget-title
font-weight: bold //字体加粗
font-family: SimSun //修改字体为宋体
@extend $block-caption

重新部署后,刷新即可。

附录

特殊符号大全

  1. http://tw.piliapp.com/symbol/
  2. http://w13.loxa.edu.tw/ctjh930220/
  3. http://star.gg/special-symbols
  4. http://www.1t2t.com/3t/soft/28.htm

FontAwesome对应CSS值

  1. A list of Font Awesome icons and their CSS content values
  2. Every Font Awesome 4.3.0 Icon, CSS Class, & Unicode
  3. Font Awesome icons and their CSS content values