前言
Hexo-NexT配置超炫网页效果已经非常全面,本文主要是在此基础上稍做修改
添加底部动态桃心
- 在主题配置文件搜索
footer
,如下配置即可:
footer:
icon:
name: user
animated: true(设置为true)
color: "#ff0000" (设置为#ff0000
- 效果如下图所示:

修改背景颜色
- 在
blog\themes\next\source\css\_variables\base.styl
搜索$body-bg-color
,如下配置即可:
// Background color for <body>
$body-bg-color = #f5f7f9
- 效果如下图所示:

引入Valine评论
- 注册后创建应用,创建Class名必须为
Comment
来获取App ID
和```App Key``具体步骤如图所示:
Valine-1.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
- 效果如下图所示:

-
最后!记得在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
网友评论