hexo搭建博客二

发表于 | 更新于:

NEXT主题安装

下载next主题

1
2
$ cd your-hexo-site`
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

修改站点配置文件

找到hexo中的_config.yml文件

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape

至此，NexT主题就安装好了，非常方便，在Hexo中切换主题只需修改站点配置文件中theme属性来配置，想换就换。

选择Scheme

next通过scheme提供主题中的主题。

1
2
# Schemes
scheme: Mist  #去掉默认的注释即可切换为Mist主题

我的博客使用的为mist主题

菜单设置

next主题的菜单设置，用于设置博客上方导航栏可以在主题配置中进行修改。

1
2
3
4
5
6
7
menu:
  home: /                       #主页
  categories: /categories	#分类页（需手动创建）
  #about: /about		#关于页面（需手动创建）
  archives: /archives		#归档页
  tags: /tags			#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

但要注意只在menu选项中设置不能让标签页生效，这些页面需要我们手动创建。

标签页面

运行hexo new page "tags"可在/source目录下生成一个tags文件，里面包含有index.md文件这时把上方的tags注释掉，在平时建的博客中加入tags就会形成分类，在标签页可以看到。

分类页面

与标签页面同理，但要创建的是categories。

侧边头像设置

在主题配置文件中找到_config.yml,搜索avatar字段，增加avatar: /images/avatar.png可以使用本地字段但要注意图片名称。

设置头像边框为圆形

打开位于themes/next/source/css/_common/components/sidebar/sidebar-author.syl文件修改为

1
2
3
4
5
6
7
8
9
10
11
12
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

特效：鼠标放置头像上旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  // 设置旋转
  transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

侧边栏设置

设置侧边栏社交连接

打开_config.yml文件搜索social，添加社交站点名称与地址即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  FB Page: https://www.facebook.com/yourname || facebook
  # 等等

设置侧边栏社交图标

在_config.yml中搜索social_icons,添加社交站点名称（注意大小写）图标，可以全网图标下载找图标地，非常方便。

友情链接

打开_config.yml搜索Blog rolls

1
2
3
4
5
6
7
# Blog rolls
links_title: 友情链接 #标题
links_layout: block #布局，一行一个连接
#links_layout: inline
links: #连接
  baidu: http://example.com/
  google: http://example.com/

代码块自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

在右上或左上实现fork me on github

选择样式github-ribbons注意修改<a href="https://github.com/you">将这里换为你自己的GitHub主页。打开themes/next/layout/_layout.swig文件，把代码复制到<div class="headband"></div>下面。

文章顶部显示更新时间

打开_config.yml,搜索update_at设置为true：

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: ture
  categories: true

有空续更。

Donate comment here