务虚笔记

Li Xiaowei's blog


  • 首页

  • 分类

  • 归档

  • 关于

  • 搜索
close
Hexo搭建个人博客(进阶篇) | 务虚笔记 - wuxubj,个人博客
务虚笔记

Li Xiaowei's blog


  • 首页

  • 分类

  • 归档

  • 标签

  • 留言

  • 爱的纪念

  • 搜索
close

Hexo搭建个人博客(进阶篇)

发表于 2016-05-21   |   分类于 博客搭建   |  

本文为建站初期小结,查看完整建站教程:Hexo+nexT主题搭建个人博客

记录了nexT主题的美化,包括添加分类和标签页、添加swiftype搜索、导航栏美化、添加留言页面及最近访客以及添加404公益页面。

添加分类和标签页

1.新建一个页面,命名为categories ,命令如下:

1
$ hexo new page categories

2.编辑刚新建的页面,将页面的类型设置为categories,主题将自动为这个页面显示所有分类。

1
2
3
4
5
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

3.在菜单中添加链接。编辑主题的 _config.yml ,将menu 中的 categories: /categories 注释去掉,如下:

1
2
3
4
5
menu:
home: /
categories: /categories
archives: /archives
tags: /tags

如果按照以上步骤,分类页面无法正常显示各分类项,请检查相应index.md文件中是否添加了type字段,如果已添加type字段分类仍然无法显示,请检查文章是否存在分类。
搬运于创建分类页面
同理可以添加标签页面。

添加swiftype搜索并自定义搜索框

1.参考:Swiftype 站内搜索 在导航栏添加搜索按钮。如图:

fig21

2.添加搜索框。我们希望搜索界面是这样的:

fig22

具体操作如下:
编辑路径\themes\next\source\css\_schemes\Mist下的_search.styl文件,添加如下样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.site-search {
display: block;
float: right;
margin-top: 8px;
}

.site-search form {
display: block;
margin-top: 0em;
}

.site-search input {
padding: 3px;
border: none;
padding-left: 18px;
border-radius: 0;
width: 140px;
background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTZweCIgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMTUuNywxNC4zbC0zLjEwNS0zLjEwNUMxMy40NzMsMTAuMDI0LDE0LDguNTc2LDE0LDdjMC0zLjg2Ni0zLjEzNC03LTctN1MwLDMuMTM0LDAsN3MzLjEzNCw3LDcsNyAgYzEuNTc2LDAsMy4wMjQtMC41MjcsNC4xOTQtMS40MDVMMTQuMywxNS43YzAuMTg0LDAuMTg0LDAuMzgsMC4zLDAuNywwLjNjMC41NTMsMCwxLTAuNDQ3LDEtMUMxNiwxNC43ODEsMTUuOTQ2LDE0LjU0NiwxNS43LDE0LjN6ICAgTTIsN2MwLTIuNzYyLDIuMjM4LTUsNS01czUsMi4yMzgsNSw1cy0yLjIzOCw1LTUsNVMyLDkuNzYyLDIsN3oiLz48L3N2Zz4=") no-repeat 0 50%;
background-size: 12px 12px;
outline: none;
border-bottom: 1px solid #999;
opacity: 0.5;
}

编辑路径\themes\next\source\css\_schemes\Mist下的_menu.styl文件,添加如下样式:

1
2
3
4
5
.menu {
float: left;
margin: 8px 0 0 20px;
padding: 0 20px;
}

效果如下图所示:

fig23

3.去掉导航栏搜索按钮
编辑路径\themes\next\layout\_partials下的header.swig文件,去掉红色框内的代码,如图:

fig24

最终效果为:

fig25

增大导航栏高度

编辑路径\themes\next\source\css\_schemes\Mist下的_header.styl文件,修改样式:

1
2
3
4
5
.header-inner {
padding: 40px 0;
margin-bottom: 80px;
clearfix();
}

效果如图:

fig26

添加留言页面及最近访客

1.参考:多说评论完成基本配置实现多说评论。
2.新建留言页面guestbook: hexo new page guestbook ,在主题配置文件_config.yml的menu项中添加guestbook: /guestbook,即:

1
2
3
4
5
6
7
8
menu:
home: /
categories: /categories
#about: /about
archives: /archives
tags: /tags
guestbook: /guestbook
#commonweal: /404.html

3.在\themes\next\languages\zh-Hans.yml中menu项中添加guestbook: 留言字段,即:

1
2
3
4
5
6
7
8
9
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
guestbook: 留言
commonweal: 公益404

4.编辑yourblog\source\guestbook\index.md文件,添加如下内容:

1
2
3
4
<blockquote class="blockquote-center">自定义你的签名</blockquote>
<br/>
>最近访客
<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

添加404公益页面

1.新建404页面: hexo new page 404。
2.打开对应的md文件,添加如下代码:

1
<body><script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js" charset="utf-8"></script></body>

效果如图:
fig27

------ 本文结束 ------
wuxubj wechat
扫一扫,用手机访问本站
#Hexo #NexT
matlab添加噪声和计算信号信噪比
Hexo搭建个人博客(基础篇)
  • 分享到:
  • 微博
  • QQ空间
  • 腾讯微博
  • 微信
  • 文章目录
  • 站点概览
wuxubj

wuxubj

记录敲过的代码、走过的人生

14 日志
7 分类
16 标签
RSS
GitHub Weibo
友情链接
建站日志 学习计划
  1. 1. 添加分类和标签页
  2. 2. 添加swiftype搜索并自定义搜索框
  3. 3. 增大导航栏高度
  4. 4. 添加留言页面及最近访客
  5. 5. 添加404公益页面
© 2016 wuxubj
由 Hexo 强力驱动
主题 - NexT.Pisces
wuxubj

wuxubj

记录敲过的代码、走过的人生

19 日志
10 分类
26 标签
RSS High
GitHub Weibo
友情链接
建站日志 学习计划
© 2016 - 2017 wuxubj
由 Hexo 强力驱动
主题 - NexT.Pisces
鄂ICP备16017973号
扫二维码
扫一扫,用手机访问本站

扫一扫,用手机访问本站

发送邮件