【hexo】基础界面美化
修改主题
这里使用next
主题,将从next发布页面下载的hexo-theme-next-5.1.4.zip
解压到工程目录\themes
文件夹下,并将其改名为next
。
打开工程配置文件
,设置如下。
1 | theme: next |
打开主题配置文件
,设置如下。
1 | scheme: Pisces |
此时主题变为博主最喜欢的双栏next
主题,读者也可以尝试其他主题与风格。
全局设置
全局布局宽度
为了追求合理性与专业性,这里采用了csdn上的宽度大小。
侧栏 -- 300px
主栏 -- 900px
间隔 -- 17px
总宽度 -- 1217px
第一步,我们打开工程目录\themes\next\source\css\_variables
文件夹,然后打开此文件夹下的base.styl
,找到下面的几行代码,这几行代码设置了一些默认的宽度信息。
1 | // Layout sizes |
目前来说我们只需要上面打了注释的四行代码,我们再打开工程目录\themes\next\source\css\_custom
文件夹下的custom.styl
文件,复制上面的代码并修改其值如下。
1 | // Layout sizes |
第二步,我们接着打开工程目录\themes\next\source\css\_custom
文件夹下的custom.styl
文件,增加如下代码。
1 | // 设置侧栏宽度 |
至此,我们的宽度和csdn博客上的就保持高度一致了。
字体
字体需要在主题配置文件
中设置,可用的字体如下。
consolas
Menlo
PingFang SC
Microsoft YaHei
monospace
PingFang SC
Microsoft YaHei
sans-serif
个人比较喜欢consolas
和微软雅黑
(\5FAE\8F6F\96C5\9ED1
)。
1 | font: |
我们需要设置一下整个网站显示的字体大小。
首先,我们打开工程目录\themes\next\source\css\_custom
文件夹下的custom.styl
,添加如下代码。
1 | // 设置侧栏字体大小 |
然后再打开工程目录\themes\next\source\css\_variables
文件夹下的custom.styl
,添加如下代码。
1 | # 以下内容都是在`base.styl`中得到的 |
至此字体大小设置完成。
背景
背景图片
在工程目录\themes\next\source\css\_custom
文件夹下打开custom.styl
,添加如下代码。
1 | // 背景图片 |
然后在工程目录\themes\next\source\images
文件夹下添加你所准备好的图片,并改名为background.png
即可 与代码中的路径保持一致。
动态效果
在主题配置文件
中找到如下代码。
1 | # Canvas-nest |
总共4种效果,个人喜欢第一个。
点击红心
在工程目录\themes\next\source\js\src
文件夹下,新建文件love.js
,输入以下代码。
1 | !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document); |
此段代码可从http://7u2ss1.com1.z0.glb.clouddn.com/love.js复制(貌似链接已失效,可直接复制此处的代码)。
然后打开工程目录\themes\next\layout
文件夹下的_layout.swig
,在最后的</html>
之前,添加如下代码。
1 | <!-- 页面点击小红心 --> |
标签栏小图标
将favicon_16.ico
放在工程目录\themes\next\source\images
下,然后打开主题配置文件
修改如下。
1 | favicon: |
侧栏
打开主题配置文件
,侧栏的配置主要在sidebar
字段下。
标题
打开全局配置文件
,设置如下。
1 | title: XXXXX # 标题 |
作者
作者名字
打开全局配置文件
。
1 | author: dua # 作者 |
作者图片
将图片文件保存为avatar.png
放到工程目录\themes\next\source\images
下,然后打开主题配置文件
。
1 | avatar: /images/avatar.png |
除此之外,我们还可以给图片增加样式和动画。
打开工程目录\themes\next\source\css\_custom
下的custom.styl
文件,添加如下代码。
1 | // 头像动画 |
归档
打开主题配置文件
。
1 | archives: /archives/ || archive |
标签
打开主题配置文件
。
1 | tags: /tags/ || tags |
在工程目录
下,输入以下命令。
1 | $ hexo new page "tags" |
会在工程目录\source
文件夹下生成tags\index.md
。打开tags\index.md
,修改为如下内容。
1 | --- |
编辑文章时,只需要在文件头使用如下属性即可。
1 | --- |
其中tag_name
为此文章的标签,可以有多个。
分类
打开主题配置文件
。
1 | categories: /categories/ || th |
在工程目录
下,输入以下命令。
1 | $ hexo new page "categories" |
会在工程目录\source
文件夹下生成categories\index.md
。打开categories\index.md
,修改为如下内容。
1 | --- |
编辑文章时,只需要在文件头使用如下属性即可。
1 | --- |
其中categories_name
为此文章的分类,可以有多个。
分隔线
打开主题配置文件
,在menu
菜单下添加如下属性。
1 | =====: / || angle-double-right |
子分类
这里以hexo
分类为例。打开主题配置文件
,在menu
菜单下添加如下项即可。
1 | hexo: /categories/hexo/ || html5 |
||
后面的为font-awesome
图标。
去掉文章目录的自动编号
打开主题配置文件
,修改toc
字段下的number
值为false
。
1 | toc: |
主栏
首页
显示概要
打开主题配置文件
,找到并修改如下代码。
1 | auto_excerpt: |
或者在文摘的头部增加如下代码。
1 | description: xxx |
也可以在文章的正文中,使用<!-- more -->
手动截断,这是博主采用的做法。
文章分割线加长
打开themes\next\source\css\_custom
文件夹下的custom.styl
文件,添加如下代码。
1 | // 首页加长文章分割线 -- 隐藏 |
文章阴影
打开工程目录\themes\next\layout
文件夹下的index.swig
文件,修改第12行,给posts
新添加一个类属性my_post
。
1 | <section id="posts" class="posts-expand my_post"> |
然后打开themes\next\source\css\_custom
文件夹下的custom.styl
文件,添加如下代码。
1 | // 首页文章添加阴影效果 |
文章标题与正文的间距
打开themes\next\source\css\_custom
文件夹下的custom.styl
文件,添加如下代码。
1 | // 标题与正文的间距 |
标题颜色
打开themes\next\source\css\_custom
文件夹下的custom.styl
文件,添加如下代码。
1 | // 标题样式 |
颜色可以自选,参考RGB颜色对照表。
引用格式
打开工程目录\themes\next\source\css\_custom\custom.styl
文件,添加如下代码。
1 | // 引用样式 |
代码
显示行号
打开工程配置文件
修改lline_number
字段。
1 | line_number: true #显示行号 |
配色方案
打开主题配置文件
修改highlight_theme
字段。
1 | highlight_theme: normal |
去掉滚动条
打开themes\next\source\css\_custom
文件夹下的custom.styl
文件,添加如下代码。
1 | // 去掉代码行滚动条 -- 但仍然可以滚动 |
顶部加载条
打开主题配置文件
,找到pace
字段。
1 | pace: true |
页脚
修改底部的带#号的标签
打开工程目录\themes\next\layout\_macro
文件夹下的post.swig
,搜索rel="tag">#
,将#
换成<i class="fa fa-tag"></i>
即可。
在每篇文章末尾添加结束语
打开工程目录\themes\next\layout\_macro
文件夹,在此文件夹下新建passage-end-tag.swig
文件,并输入以下内容。注意position
设置为relative
是为了让结束语压在分隔线上,比较好看。
1 | <div style="text-align:center; color: grey; font-size:18px; height: 0px"> |
然后打开此文件夹下的post.swig
,在post-body
之后,post-footer
之前,即END-POST_BODY
块的最开始添加如下代码。
1 | {% if theme.passage_end_tag.enabled and not is_index %} |
最后打开主题配置文件
,在最后添加如下代码。
1 | # 文章末尾添加“本文结束”标记 |
需要注意的是,为了让文字可以正好处于分隔线的中央,需要使用js来进一步设置其left
属性。打开工程目录\themes\next\source\js\src\utils.js
,添加如下代码。
1 | $(document).ready(function(){ |
修改底部logo
打开主题配置文件
,找到footer
字段进行设置即可。
1 | footer: |