next主题优化(一)

Next主题优化(一)

搭建完blog肯定要优化一下,不然界面你不会觉得丑吗?
这篇文章将写一些能够优化界面的方法,没有的地方请自行搜索补充

修改Hexo站点配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Site 网站
title: Dou Qing #网站标题
subtitle: ~~愿你天黑有灯,下雨有伞~~ #网站副标题
description: 学无止境 #网站描述
author: Yan #博主的名字
language: zh-Hans #网站使用的语言 PS:如果设置完后没有效果的话,去\themes\landscape\languages里面查看有的语言,一般会有zh-CN,这个就是中文
timezone: #网站时区。Hexo 默认使用您电脑的时区

# 侧边栏头像设置
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/图片名字 把你的头像设置在这里
#/images/avatar.gif

其余的可以看着设置,不想设置的就不设置

Hexo主题配置文件(next)

next更多内容参考:http://theme-next.iissnan.com/theme-settings.html
重点!!!!优化的重点!!想要花里胡哨的特效就认真对待这个文件
打开Hexo目录/themes/next/_config.yml文件

开启打赏功能

1
2
3
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: 你的微信收款码链接
alipay: 你的支付宝收款码链接

开启友情链接

1
2
3
4
5
6
7
8
9

# Blog rolls
links_icon: link
links_title: 友情链接 //自己命名即可
links_layout: block
#links_layout: inline
links:
#Title: http://example.com
在这开始写你想要的友情链接

选择Scheme

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Pisces
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置首页不显示全文

打开主题配置文件_config.yml,ctrl + F搜索找到”auto_excerpt”,找到

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

把enable改为对应的false改为true,length就是预览显示的文字长度,你可以根据你的需要进行更改,然后重新部署,再进主页,你就发现你首页的文章多了一个阅读全文的按钮。

分类和标签设置

首先通过hexo n “name”命令来新建一个页面,在source/_posts目录下找到刚才新建的name.md文件,用notepad++或者sublime text打开

1
2
3
4
5
title: name
date: 2014-08-05 11:15:00
tags:

---

大概这个样子,可以编辑标题、日期、标签和内容,但是没有分类的选项。我们可以手动加入categories:项,但是下次创建新的页面的时候还是没有,所以我们直接打开scaffolds/post.md文件,在tages:上面加入categories:,保存后,重新执行hexo n ‘name’命令,会发现新建的页面里有categories:项了。

scaffolds目录下,是新建页面的模板,执行新建命令时,是根据这里的模板页来完成的,所以可以在这里根据你自己的需求添加一些默认值。

设置分类列表

1
2
3
4
5
6
categories:
- 大类
- 中类
- 小类
...
---

每一层- 内容的下面都是一种包含关系,而不是同级,这点要和标签分开

在这里category_map:是设置分类的地方,每行一个分类,冒号前面是分类名称,后面是访问路径。
可以提前在这里设置好一些分类,当编辑的文章填写了对应的分类名时,就会自动的按照对应的路径来访问。

设置标签

1
2
3
4
5
6
7
8
tags:
- 标签1
- 标签2
- 标签3
- 标签4
...
- 标签n
---

背景设置

静态背景

修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

1
2
3
4
5
6
body {
background-image: url(/images/(你想设置的)背景图片名称.png);
background-attachment: fixed;
background-repeat: repeat;
background-size: contain;
}

background-image: 你想放置图片的url
background-attachment: 不随屏幕滚动而滚动
background-repeat: 如果背景图不够屏幕大小则重复铺,改为no-repeat则表示不重复铺
background-size: 等比例铺满屏幕

将背景图命名为 (你想设置的)背景图片名称.png并放入主题根目录/images下
或者可以直接用自动切换图片,url为:https://source.unsplash.com/random/1600x900

修改不透明度

这个主要是为了避免next的过于简洁的界面而造成看起来过于单一
完成这一步其实背景就会自动更换了,但是会出现一个问题,因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。
那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码

1
2
3
4
5
6
7
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.8;
min-height: 500px;
}

background: #fff; 颜色设置
opacity: 0.8;不透明度设置:范围(0-1)

PS: 如果设置完没有效果的话,打开你的blog的界面,F12,打开源代码审查页面,找到不合适的地方,根据html的语法和方式修改即可,若是没学过html+css的朋友可以借鉴一下下个网址
一个简单方便学习html+css的网站: http://www.w3school.com.cn/

动态可交互背景(js引入)

打开博客根目录/themes/next/layout/_layout.swig文件,在之前添加代码如下:

1
2
3
4
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

属性说明:

1
2
3
4
5
属性说明:
- color :线条颜色, 默认: ‘0,0,0’;三个数字分别为(R,G,B)
- opacity: 线条透明度(0~1), 默认: 0.5
- count: 线条的总数量, 默认: 150
- zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

打开博客根目录/themes/next/_config.yml,找到字段canvas_nest,将其置为true【如果没有找到该字段,请自行添加】

运行 hexo clean && hexo g && hexo d 查看效果

为文章加密

方法:
打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码:

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

然后写文章的时候在头部加上:

password: 你想要设置的密码

添加RSS

什么是RSS?

RSS也就是订阅功能,你可以理解为类似与订阅公众号的功能,来订阅各种博客,杂志等等。

为什么要用RSS?

就如同订阅公众号一样,你对某个公众号感兴趣,你总不可能一直时不时搜索这个公众号来看它的文章吧。博客也是一样,如果你喜欢某个博主,或者某个平台的内容,你可以通过RSS订阅它们,然后在RSS阅读器上可以实时推送这些消息。现在网上的垃圾消息太多了,如果你每一天都在看这些消息中度过,漫无目的的浏览,只会让你的时间一点一点的流逝,太不值得了。如果你关注的博主每次都发的消息都是精华,而且不是每一天十几条几十条的轰炸你,那么这个博主就值得你的关注,你就可以通过RSS订阅他。

在我的理解中,如果你不想每天都被那些没有质量的消息轰炸,只想安安静静的关注几个博主,每天看一些有质量的内容也不用太多,那么RSS订阅值得你的拥有。

添加RSS功能

先安装RSS插件
npm i hexo-generator-feed

然后再根目录下找到

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: https://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

这个时候你的RSS链接就是 域名/atom.xml了。

所以,在主题配置文件中的这个social links,开启RSS的页面功能,这样你网站上就有那个像wifi一样符号的RSS logo了,注意空格。
rss: /atom.xml

如何关注RSS?

首先,你需要一个RSS阅读器,在这里我推荐inoreader,宇宙第一RSS阅读器,而且中文支持的挺好。不过它没有PC端的程序,只有网页版,chrome上有插件。在官网上用google账号或者自己注册账号登录,就可以开始你的关注之旅了。

每次需要关注某个博主时,就点开他的RSS链接,把链接复制到inoreader上,就能关注了,当然,如果是比较大众化的很厉害的博主,你直接搜名字也可以的,比如每个人都非常佩服的阮一峰大师,直接在阅读器上搜索阮一峰,应该就能出来了。

我关注的比如,阮一峰的网络日志,月光博客,知乎精选等,都很不错。当然,还有我!!赶快关注我吧!你值得拥有:http://fangzh.top/atom.xml

在安卓端,inoreader也有下载,不过因为国内google是登录不了的,你需要在inoreader官网上把你的密码修改了,然后就可以用账户名和密码登录了。

在IOS端,没用过,好像是reader 3可以支持inoreader账户,还有个readon也不错,可以去试试。

---------------- The End ----------------
0%