前言
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评论
- 注册后创建应用，创建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
网友评论