这次应该是未来一段时间,最后一次大规模调整博客相关的东西了

这次应该是未来一段时间,最后一次大规模调整博客相关的东西了。

从年前,到今天农历二月初四,只要有时间,我就会陆陆续续一直在调整博客的东西。

页面大的布局没有变,但后端程序调整了不少东西,尤其是评论模块及用户模块。

一、评论模块:

1、增加了评论控制,在后台直接选择:

A、【开启/关闭全站评论】、

B、【开启/关闭部分指定博文】、

C、【开启/关闭普通人评论(非强制输入账号,显示“林羽凡网友”)】、

D、【评论是否审核】、

E、【审核评论是否发邮件】、

F、【被评论是否发邮件】、

G、【验证码开启/关闭】。

大概是上面这些功能,后台选择后,每项单独通过函数,在后端提交评论或者审核评论的时候调用。

2、增加评论者显示等级,目前为临时解决方案,通过后台更新“生成活跃朋友”,生成缓存数据。

3、增加小程序评论审核功能,只有绑定Openid的用户(当然是我),才会出现审核提示。小程序评论审核/回复,全部遵循博客后台设置选项(参考1)。

4、重构评论调用方式,目前以盖楼形式展现评论内容。

5、前端临时调用Gravatar头像生成,提交评论出现待审(开启审核后),提交用户名及邮箱、网址,存入Cookies。

 

会员模块

二、用户模块

1、用户支持微信扫码登录

2、用户后台及小程序用户中心,均可签到(有积分,具体怎么用,我没想好)。

 

博客样式

 

三、增加博客的暗夜模式。

这个是昨天半天加今天,调试上线的,点击博客右侧的“白/夜”,即可开启或关闭暗夜模式。

暗夜模式

很早之前其实就知道有博客加了这个功能,看了下没什么技术难度,想着也没什么大用,就一直没弄。

最近一有空就逛博友的博客,发现这个暗夜模式还挺好的,尤其是到晚上,开启暗夜模式后,就不会那么刺眼。

然后我也就整了一个,话说这功能比我想象的麻烦些。在写Css的时候,我博客出了一个问题:

连着写CSS名称的Class选择器和id选择器,都无效,如:

.night #commnets,.content,.con_left{background-color:#fff}

上面这种写法不生效,不知道是哪里的问题,也就没再细查。

目前我是把所有需要修改背景、字体颜色、边框的样式单独写一个,保证不出问题,同时如果后期要修改也比较方便。

下面说说我修改博客暗夜模式遇到的几个问题:

1、开启暗夜模式后,新页面在所有项加载完后,会由原来的白色页面突然变黑。

这个问题是,我把判断网站在此浏览器上有没有开启暗夜模式的js代码放在了页面底部导致的,需要提到页面前面加载,加载的时候,直接判断是否将

2、内容页因为存在评论Frame框架,而Frame中又有自己的

,所以直接用页面的 switchNightMode() 方法修改样式时,只会修改本页面的。

我的解决办法是加一行下面的代码:

window.frames['comment_iframe'].contentWindow.document.body.classList.add('night');

其中 comment_iframe 是Frame的iD。

3、在首页和栏目页,没有评论的Frame,需要在 href="javascript:void(0);" onclick="switchNightMode('{$id}')" 的时候,把文章iD传过去。

有iD则选择上面第2条说到的代码,更新评论区背景颜色。

4、出现“ Uncaught TypeError: document.getElementById(...) is null”提示

这个原因是对应id的标签出现在js后面导致的,所以是 Null,注意下就行。

5、暗夜模式下,我直接将Logo图片换了一张别的Logo图片,用到的方法:

document.getElementById('logoimg').src = "https://www.linyufan.com/statics/linyufan/logo1.png";

出现问题,参考上面第4条说明。

6、最重要的一条,将设置的开启或关闭暗夜模式,存到Cookie中,因为在第1条说明中会用到。

博客调整样式对比

以上就是近期关于博客整改的一些简单回顾,近期可能就不会大改博客了,除非有重大Bug,或者实在手痒想改了。

 

未来需要调整的:

1、评论及审核通知邮件格式,目前是简单的几个文字,并没有做格式美化。

2、后台一键审核/评论。

3、整合小程序评论审核功能到林羽凡小程序。

4、小程序开发评论/留言直接回复,目前是一条一条看,并回复,不方便。

5、经常评论用户+id绑定,免审核。

6、Totoro评论审核模块+验证码代替人工审核。

7、完善评论者等级。

 

参考资料:

1、TypeError: document.getElementById(...) is null 问题

2、网站夜间模式的实现思路与详细教程分享

3、关于给hexo博客适配全局暗夜深色模式

返回列表
上一篇: