Hello hexo

写在博客最前面

几经折腾,这个博客终于生出来了(?)

感谢ketchup学长的催更(bushi,感谢next,感谢hexo,感谢nodejs,感谢所有本博客中引用到的模块的开发者们(鞠躬)。这两天倒腾博客的时候遇到了不少的坑,一并在这里记录下来,之后会持续更新(大概?

Next主题改造计划

分享按钮和标签

文章页中,如果开启了标签页和分享按钮,就会出现标签在上,分享按钮在下的尴尬局面,再加上全文结束的分隔行就会显得文章的尾部十分拖沓,所以就稍微加了一些自定义css,试图将两者放到一行内,代码如下:

1
2
3
4
5
6
7
8
9
10
11
//通过float实现标签和组件平行
.post-tags{
float: left;
}
.post-widgets{
border-top: 0;//删除分隔符
margin-top: 40px;
padding-top: 0;
float: right;
text-align: center;
}

在hexo中使用Live2d

这个部分花了我大量的时间(最后也没有完成),初始是使用的最傻瓜版的这个hexo-helper-live2d,但是后来不太满足这样没有很强互动性的l2d,所以又找了这个live2d-widget,但是呢,这个项目使用的是一位大佬自己的api接口,他也把他的文档公布在这里

因为有自己想要play的模型,所以就想自己搭建一个(虽然最后没有成功搭建),遇到的主要问题就是跨域请求的问题,也就是所谓的CORS。解决方案是把请求的api地址改为同源下的地址,然后再nginx中通过proxy_pass反向代理直接访问api地址。可以参考这一篇

至于自建api失败的原因,大概是和模型相关,暂时没那么多精力去魔改这个项目,先挖个坑放这儿(万一哪天空了就填)

基于Leancloud搭建Valine评论系统

其实整个过程就是要注意leancloud上权限的设置,尤其是新改版之后,valine似乎无法直接新建comment的class,需要手动新建并更改权限才行,这一点很多网上的教程有些滞后。

另外一个玄学出现的问题是如果既使用valine又想用leancloud来统计浏览,就可以直接在一个项目内建两个class,一个counter,一个comment,否则appid可能会串(?),这个问题基本出现在hexo6.x中

Background-attachment: fixed属性在iOS端失效

设置了背景图片之后一致没有关注手机端,今天和Turbo同学交流的时候发现了这个问题,于是尝试了若干种解决方案,最后找到了原因和解决方案。

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

固定背景导致重绘的成本很高,并且滚动表现也不尽人意,所以在一些移动端是被禁止的。

通过==:before==元素来控制移动端,设置3000px是为了把iPad端也适配进来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body{
....
}
@media screen and (max-width:3000px){
body{background-position: -99999px -99999px;}
body:before {
content: "";
background-image: inherit;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover;
background-size: cover !important;
z-index: -1;
}
}
----- 本文结束 感谢阅读 -----
0%