sunriseydy 又双叒叕发布啦,这次是微信小程序

继发布了微信公众号、个人主页和安卓 APP 之后,这次我又来发布我的微信小程序:sunriseydy。同样是基于 WordPress,使用的是守望轩 WordPress 版小程序开源模板,很感谢这位大佬的开源精神,让更多人能够体验制作微信小程序。

先放出二维码:

sunriseydy 小程序码

由于我是个人认证,为了能提高审核通过的几率和降低主机的 CPU 占用,删去了评论、赞赏、客服、文章海报和直接打开网页的功能,以下是暂时实现了的功能:

  • 首页轮播展示特定文章
  • 首页展示文章列表并显示文章评论数、浏览数和点赞数(多平台同步,在网页端可以通过文章下面的“赞”按钮来点赞)
  • 文章内容页面的复制原文链接、点赞和转发(去除文章海报的功能,因为该功能太多人使用时会让我的虚拟主机 CPU 资源超标)
  • 文章分类页面可以订阅某一分类(需要授权登陆)
  • 文章排行页面展示文章浏览排行
  • “我的”页面展示文章浏览记录、点赞记录和订阅的分类文章
  • “关于”页面展示关于微信小程序的介绍(和博客“关于”页面有所区别)

后期看情况再加功能咯。

解决 WordPress 微信小程序文章内代码显示、图片非 CDN 地址、图片附带链接的问题

最近一直在开发后台基于 WordPress 的微信小程序(用的是守望轩的开源模板),遇到了很多问题: wxParse 转换后文章中的代码显示不正常;由于 WordPress 的样式让图片附带了媒体链接;由于 API 的原因获取到的图片地址也不是 CDN 的地址等等。为了解决这些问题修了好几夜的仙,这里呢,就给出我的解决方法:主要就是在小程序把获得的文章内容的响应传给 wxParse 之前用正则表达式替换响应的内容。遇到同样问题的可以参考一下。

wxParse 真的是不完善,本篇文章在小程序里都加载不出来,猜测含有太多“《pre》”和“《code》”标签的代码导致解析炸了 :(黑线) 无奈,真希望微信官方能出一个转换工具。

所以为了能够显示,本文中所有的“<”和“>”均被替换为“《”和“》”,一定要注意!

想看更多?点我点我 “解决 WordPress 微信小程序文章内代码显示、图片非 CDN 地址、图片附带链接的问题”

日出一点一 APP 发布啦——将博客做成软件

继我的微信公众号和个人主页发布后,我的个人 APP 也发布咯,名字就叫“日出一点一”,是用 Fusion App 制作的,集合了我的博客、下载站和主页。其实就是利用 WebView 将网页搬到手机 APP 中而已。

实现的功能:

  • 启动检测更新
  • 用浏览器打开页面
  • 分享页面
  • 博客分类浏览
  • 下载站文件下载
  • 打开个人主页

当前版本:1.2.2

版本更新日志

1.2.2
1.修复安卓8.0长按文本卡死的bug
2.添加分享此应用的功能(在博客页面顶部菜单栏的关于中)

1.2.0
1.侧边栏添加’关于博客’链接
2.修改搜索栏背景
3.添加’我的个人主页’子页面,可以在菜单中进入
4.添加调用浏览器打开页面的功能
5.添加启动检测版本更新功能

发布地址
https://blog.sunriseydy.top/daily/sunriseydy-app/
https://dl.sunriseydy.top/各种软件/手机/日出一点一/

最新版下载地址sunriseydy_latest.apk

截图预览

预览演示的小视频

其实可以将这款 APP 看做一个玩具,等博主有精力了,会做一款真正的 APP ,可以通知博客更新、可以缓存网页离线看文章、可以添加收藏等功能。这也算是未来的一个 TODO 吧。

P.S.如果在使用过程中有什么问题或者有什么建议都可以给我发邮件联系我

更新 pure-highlightjs 插件,实现显示代码行号、鼠标悬浮行和被标记行高亮

博客一直用的是 Pure-Highlightjs 插件来实现代码的高亮,就是因为它可以在编辑器中可视化地插入代码,不用手动添加标签,特别方便。但是呢,不能显示行号。为了能够实现显示行号,对着 JS 熬了一天一夜总算是弄出一个比较满意的成果算是吐血之作吧 :(喷) 。效果如下(这玩意还有点击动画呢,当鼠标滑过某一行时会高亮当前行,当鼠标点击某一个行号时,当前行会被标记,此时按住 shift 键,再点击某一个行号,则两个行号区间内的代码都会被标记):

.code-with-line-number > ul {
  list-style: decimal;
  margin: 0;
  margin-left: 40px;
  padding: 0;
}
.code-with-line-number li {
  list-style: decimal-leading-zero;
  border-left: 1px solid #ddd;
  padding-left: 2px;
  position: relative;
}

插件更新项目地址:https://github.com/sunriseydy/Pure-Highlightjs

插件更新下载地址:https://github.com/sunriseydy/Pure-Highlightjs/releases

想看更多?点我点我 “更新 pure-highlightjs 插件,实现显示代码行号、鼠标悬浮行和被标记行高亮”

Wordpress 首页显示文章摘要或者内容以及个性化设置”阅读更多”

Wordpress 首页和归档页面显示文章的方式有两种:内容模式(the_content)和摘要模式(the_excerpt)

内容模式:如果文章设置的有“阅读更多”的标签,即“<!--more-->”,就会显示全部的文章内容,如果有“阅读更多”的标签,则只会显示“阅读标签”前的内容,并在后面添加一个“阅读更多”的链接指向文章剩下的内容。因此,如果文章内容较多的话一定要设置“阅读更多”的标签,否则加载首页的时候会耗费更多的服务器资源(亲测 :(笑尿) )。

摘要模式:只显示文章的摘要,后面跟一个“更多”标签。如果作者没有在编写某篇文章时编辑文章摘要,那么默认截取文章的的前55个字作为摘要显示出来,并添加一个“more”标签(不是“read more”,即“阅读更多”),默认显示为“[…]”。如果作者在编辑文章时编写了文章摘要,那么在首页就只会显示作者编写的摘要,默认不添加“more”标签。因此建议在编写文章的时候顺便编写文章摘要。

我个人认为,内容模式比较适合我,因为可以自定义显示的内容和长度。

下面我来说说如何设置这两种模式以及两种模式的个性化。

想看更多?点我点我 “Wordpress 首页显示文章摘要或者内容以及个性化设置”阅读更多””

利用七牛云存储和 Verycloud CDN实现博客静态资源加速(HTTPS 访问)

做网站的都知道网站的一些静态资源是最影响网站的访问速度的,优化的方法一种是伪静态和缓存,一种是CDN。

关于伪静态和缓存,Wordpress 有一个很厉害的插件:“WP Super Cache”,它可以自动的帮你把动态的页面缓存为静态的 Html 。

CDN 的优化方法也有一个很出名的插件:“七牛云存储”。它利用了七牛云的对象存储和CDN加速功能,自动地将网站内的静态文件:图片,JS,CSS,视频等同步到绑定的七牛云存储上去,并把地址改为CDN加速过的地址,这样就可以利用CDN来优化博客的访问速度了。它的 HTTP 流量和云存储空间都是免费的,然而, HTTPS 流量不是免费的。这对于全站开启 HTTPS 的站点来说简直就是无法接受。

想看更多?点我点我 “利用七牛云存储和 Verycloud CDN实现博客静态资源加速(HTTPS 访问)”

给Wordpress加上贴吧表情

自从看到饭大佬给博客加上了贴吧的表情后就也想弄一个,毕竟 :(滑稽) 这个表情太火了,而我之前弄的QQ表情里没有这些表情。现在终于有时间来给博客添加贴吧的表情了 :(滑稽)  :(滑稽)  :(滑稽)

饭大佬用的是 Typecho ,有一个插件可以用,而 Wordpress 呢,我看了一下很多表情插件都是 N 年前更新的,都不知道适不适配最新的 4.9 版本。之前我用的是免插件修改函数的方法实现表情的,现在还用的是这种方法。方法如下(以下代码部分来自互联网,具体出处见文末) 想看更多?点我点我 “给Wordpress加上贴吧表情”