美文网首页
hexo+github搭建个人博客

hexo+github搭建个人博客

作者: IARNO | 来源:发表于2018-10-14 23:43 被阅读0次

前言

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-innerwidth属性即可:

// 以下为新增代码!!
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;
  }
}

个人相关网址

相关文章

网友评论

      本文标题:hexo+github搭建个人博客

      本文链接:https://www.haomeiwen.com/subject/rbhxzftx.html