修改调试技巧
在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">
即变成:
|
|
然后在网上找个好看的图标,或者去图标生成网站:http://www.faviconer.com/生成一个后缀名为.ico
的图标文件,最后把该文件放到D:\hexo\source
目录下,重新部署即可。
添加自定义404页面
直接新建一个404.html文件放到D:\hexo\source
目录下,然后编辑即可,注意最上面要写:
404音乐电台
因为熊海做的这个音乐电台只有一个html文件和一张背景图片,所以可以添加到404页面(在此感谢熊海)。
在这个百度网盘下载熊海博客电台.rar
,然后新建一个404.html文件,在---
下方粘贴代码,然后把这个文件放到D:\hexo\source
和D:\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行修改为:
其中letter-spacing
是字符间距,你可以调整它试一下,颜色color改为##fff
白色,和主标题一致。
修改副标题字体大小
因为副标题字体大小的英语是subtitle size
,所以同样在hexo-theme-landscape中搜索subtitle size
,得到结果页面,很明显看出要修改主题目录下的source/css/_variables.styl
文件,于是查找subtitle
后把16px改为20px:
经过测试可以知道上面的logo-size
表示你的主标题字体大小,而你的主题目录/source/css/_partial/header.styl
文件中logo-text
那一栏的下面color就表示主标题字体的颜色。
这里一定要提醒各位:
=
和:
后面一定要加个空格。
修改后保存文件,然后在博客目录执行:
重新部署后,刷新就会看到效果了。
调整右侧边栏顺序
编辑主题配置文件,比如你使用的默认主题,就到D:\hexo\themes\landscape\_config.yml
调整widgets:
那一栏的顺序。
原来的:
改为:
页面底部添加自定义文字
打开D:\hexo\themes\landscape-plus\layout\_partial\footer.ejs
,在最底下 </div>
的下面和</footer>
上面之间插入以下代码:
2015-11-15更新:因为上述代码会撑大窗口,故而更新成下面的代码:
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行)为:
.article-category
大概是第27行:
顺便调整一下日期前面图标的位置:margin-left: 20px
修改文章底部标签前面的图标
|
|
这个图标我们使用特殊符号,而不使用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
这一行:
其中color-twitter
在D:\hexo\themes\landscape-plus\source\css\_variables.styl
第21行为蓝色,你也可以修改为其他颜色或者自定义一个新的颜色属性。
修改文章正文字体为宋体
打开D:\hexo\themes\landscape-plus\source\css\_partial\article.styl
文件,修改.article
条目为:
然后修改正文旁边的日期、分类、标题等其他字体为微软雅黑。
同样也添加这一行到article-category .article-header .article-tag-list-item .article-comment-link .article-share-link
这些条目中。
修改文章一到六级标题字体为微软雅黑,并且不加粗
编辑D:\hexo\themes\landscape-plus\source\css\_extend.styl
文件,修改相关代码为如下:
然后把他们不加粗只要删掉相关条目下的font-weight: bold
和font-weight
类似代码就OK。
先在landscape-plus的github主页搜索bold
,发现相关代码的文件是source/css/_extend.styl
和source/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
下方添加一行,如下:
标题字体不加粗
打开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
条目如下:
重新部署后,刷新即可。
附录
特殊符号大全
- http://tw.piliapp.com/symbol/
- http://w13.loxa.edu.tw/ctjh930220/
- http://star.gg/special-symbols
- http://www.1t2t.com/3t/soft/28.htm