hexo+github搭建个人博客

2018-10-14 本文已影响0人 IARNO

前言

Hexo-NexT配置超炫网页效果已经非常全面，本文主要是在此基础上稍做修改

添加底部动态桃心

在主题配置文件搜索footer，如下配置即可：

footer:
  icon:
    name: user
    animated: true（设置为true）
    color: "#ff0000" （设置为#ff0000

效果如下图所示：

foot-heart.png

修改背景颜色

在blog\themes\next\source\css\_variables\base.styl搜索$body-bg-color，如下配置即可：

// Background color for <body>
$body-bg-color  = #f5f7f9

效果如下图所示：

bg-color.png

引入Valine评论

注册Leancloud

注册后创建应用，创建Class名必须为Comment来获取App ID和```App Key``具体步骤如图所示:
Valine-1.png

Valine-2.png

Valine-3.png

Valine-4.png

Valine5.png

拿到你的appid和appkey之后，打开主题配置文件搜索 valine，填入appid 和 appkey，代码如下:

  valine:
  enable: true
  appid:  your app id
  appkey: your app key
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! 
  guest_info: nick,mail,link
  pageSize: 10

效果如下图所示：

Valine-6.png

最后！记得在Leancloud -> 设置 -> 安全中心 -> Web 安全域名把你的域名加进去，如图:

Valine-7.png

修改主题宽度

在source/css/_schemes/Picses/_layout.styl文件末尾添加如下代码,修改header、.container .main-inner的width属性即可：

// 以下为新增代码！！
header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

效果地址：
https://www.iarno.cn

个人相关网址

个人网站