“易语言”打造属于自己的静态博客生成器

为什么要打造一个属于自己的静态博客呢?我从dz论坛程序一路到typecho博客程序,最喜欢的就是折腾了。什么插件啊主题模板啊,网站加载速度https证书 什么的。

后面接触到了不需要使用数据库的博客程序(例如:MiniCMS、BlogMi),我发现这类程序措建和转移数据非常简单。你只需要上传就可以直接使用不需要连接数据库,文章保存为xml或json文件。这类博客还是基于php,对于服务器还是有要求。

直到遇见hexo静态博客生成器,你只需要搭建nodejs环境运行即可。文章格式基于markdwon方便写作,本地渲染生成整站静态html文件格式。生成后文件可托管于(github、阿里云OSS、七牛云)等支持静态的托管平台。hexo我还是比较满意的,就是搭建环境不太友好还有大量的命令。具体看看一下我第一次用hexo发布的文章(你好Hexo!我的第一篇博文,第一次写博客写的不好,望见谅!),不过多描述了。

经历了hexo静态博客生成器之后,我在思考还能不能在简单点。于是乎我参考了“通过浏览器加载的方式使用strapdown.js来渲染markdown”使用动态js加载头部底部+strapdown.js+json2html.js+github存放+畅言评论完成了我第二个静态博客,具体可以访问(https://github.com/xiamuguizhi/xiamuguizhi.github.io)查看相关原理,也可以直接看效果“demo”。这个静态博客全是手动创建html在发布,步骤繁多非常麻烦。不过给了我很多灵感,也有很多体悟。给我第三次打造静态博客打下了基础。

思考

第二次搭建静态博客都是手动的完成的,哪如果减去那些步骤我就写内容,搞个像hexo那样的怎么样。于是我想起了我易语言的作品“恋爱表白网页生成器”+“联系人查询添加系统”。我有过用易语言的生成html网页经验,也知道图片在文本可以存储为ini、TXT。于是我搜索了大量易语言关于html的文章,直到看到了这篇文章“易语言窗口调用HTML编辑器”我立马就有灵感了,我基于原来制作“恋爱表白网页生成器”的思路和这篇文章思路制作出了第一版本!如下图:

第一版出来之后,只有生成文章页面。而且我并不满意“KindEditor”编辑器,太就没更新了还不支持markdown写做。于是乎我换成了“editor.md”期间遇到挺多问题的。因为易语言原版的控件不支持html5,editor.md根本就加载不出来,后面去“精益论坛”发现了“精易Web浏览器支持库(miniblink内核)")”完美的解决了这个问题!期间感谢@大家好我是新手在论坛上对我求助的答复!

过程

期间添加了文章分类功能,一件上传到FTP功能,实现文章路由(i+1)。完善博客首页列表,整站刷新功能(修改标题了或者主题css什么的 批量修改吧)。

静态博客1.1测试版本,如下图:

放弃

在基本完善后,我在测试中发现了大量bug。而且有太多不满意,主题都是写死的。不能更换主题,而且分类功能上传ftp功能很鸡肋。文章生成html后时不时乱码,或者生成后空白。
于是我又从新开始构思了,解决这些问题。我又又又搞出了概念版本,如下图:

概念版解决了,主题不能更换问题。取消了分类功能,上传ftp功能。

2019.5.18更新:公安备案到现在一直没有消息都快一个月了~哎哎 我今天又想吧这个静态博客重新写了 因为感觉有些地方不好用啊 坑啊

2019.5.21更新:公安备案终于备案好了,结果静态博客生成器还在搞,等下就上班了没时间了 啊啊啊啊啊啊啊啊啊啊啊啊啊啊

2019.6.11更新:终于结束了长达一个月的夜班。现在转班了晚上睡觉还是很不习惯,经常失眠。博客现在也是很少折腾了,应该说是没时间折腾了,等我恢复了精神在折腾

后来无期限的搁置了,下面图片是制作静态博客生成器4月/5月时候拍的:

重启

2020年注定不是平凡的一年,肺炎的传播速度之快是谁都没有想到的。我从一开始关注确诊人数100多人到现在的4w多人,村里县城也开始封路,叫我们不要出门。出门要带口罩出门买菜需要通行证,于是乎我宅在看到了一篇熊猫小A发布的文章“完全使用 GitHub 写博客”。他根据他的需求用Python打造出了自己的静态博客生成器Maverick 让我又重新拾起打造属于自己的静态博客了!“任何认真对待博客的人都应该自己写博客系统”这段话也是从他博客文章引用的~

继续

我从微云下载了备份后,继续折腾起了这个静态博客生成器。也遇到很多不懂的问题都去论坛请教了,也给自己设置了需求~!(^o^)/~

生成文章空白:原来困扰我很久的生成html时空白的原因,是因为易语言本身支持的是gbk-32,取编辑框内容值时网页编码格式是UTF-8,这样才导致生成时候有的内容空白。于是乎我用到了精易模块编码_gb2312到utf8(),成功解决了这个问题

整站刷新:我在第一版本的时候这个功能一直不完善,后面我用计次循环首 ()也解决了这个问题,就是批量重新生成一次html页面,修改了网站标题,或者修改css文件后,可以批量更新了。

主题功能:第一版的主题是写死的,都是写在编辑框1.内容里面,后面突发奇想我用子文本替换实现了模板标签实现类似渲染的功能。编辑框1.内容读取文件夹下的theme.txt这样我主题就能直接编辑txt修改了。如图:

文章图片插入:图片的存放一直是我顾虑的,微博图床取消外链后我很多图片都没有了。后面我想干脆保存到本地,也不要上传到七牛什么的麻烦。于是我设置了每篇文章插入图片时,都会在\img创建跟文章id一样的文件夹名存放图片。也方便以后查看文章图片,图片名都是取插入的时间命名。例如写这篇文章插入的图片:![](https://xiamu-1251327481.cos.ap-guangzhou.myqcloud.com/img/1/2020-0216-2210-17.jpg?imageMogr2/format/webp)

首页分页、站内搜索、RSS/Atom订阅、文章灯箱、评论系统:

首页分页:分页功能是我最纠结的,如果用易语言写分页我感觉会很麻烦,而且我也没有思路。于是我采用了js实现前端分页,原来使用过。具体参考了文章“使用javascript 实现静态网页分页效果”简单使用,静态页面也不需要考虑数据多了加载慢等问题

  • 2020.3.9 实现本地分页生成静态页面

站内搜索:博客搜索功能,我一开始是一点思路都没有。于是我百度搜索"hexo静态博客站内搜索",得到的结果都是“Swiftype”and“next”插件,还有的就是手动建立json生成数据存放。以上的方案我都看不懂,于是我又去github搜索,终于给我发现了非常符合我要求的“静态页面页面全站搜索jquery插件”作者很贴心的给出案例还有描述,基本适用于任何静态博客生成器。如下格式,具体点击链接查看!我根据案例在根目录生成search.xml文件存储全部文章,用于搜索!不管也有不足之处,不支持大小写混合搜索,我也发邮件请教原作者不过目前没有收到答复。

<?xml version="1.0" encoding="UTF-8"?>
 <blogs>
 <blog>
   <title>这篇文章标题</title>
   <content>这篇文章的内容</content>
   <url>http://wwww.site_url.com/xxxx.html</url>
   <time>2014-2-3</time>
 </blog>
  <blog>
        <title>这篇文章标题</title>
        <content>这篇文章的内容</content>
        <url>http://wwww.site_url.com/xxxx.html</url>
        <time>2014-2-3</time>
      </blog>
 </blogs>

RSS/Atom订阅:订阅功能是因为我看别人有,我也折腾了一个!这个实现并不困难,hexo、Jekyll都是自带生成的,于是我copy了fooleap大哥https://blog.fooleap.org/atom.xml文件,基于里面的格式在根目录生成一个atom.xml文件搞定。fooleap大哥是在rss输出全部文章,我则设置了只生成最新的6篇文章!

<feed xmlns="http://www.w3.org/2005/Atom">
<title>Fooleap's Blog</title> //网站标题
<link href="https://blog.fooleap.org/atom.xml" rel="self"/>//订阅地址
<link href="https://blog.fooleap.org/"/>//网站地址
<updated>2020-02-07T09:12:13+08:00</updated>//最后更新时间 东八区
<id>https://blog.fooleap.org</id>//网站地址
<author>
<name/>//你的名字
<email/>//邮箱
</author>
<entry> //文章开始
<title>Hello world!</title>//文章标题
<link href="https://blog.fooleap.org/hello-world.html"/>//文章链接
<updated>2011-02-09T00:00:00+08:00</updated>//发布时间
<id>hello-world</id>//URL ID
<summary type="text">这是 Fooleap 个人博客的第一篇日志,原博客未完善的文章将转移到此博客。</summary> //文章内容
</entry>//文章结束
</feed>

文章灯箱:2020.3.1 更换为“FancyBox”灯箱。因为新主题不兼容原本的灯箱插件,无奈只好更换!感谢期间“油油”的指导!FancyBox安装相关使用请参考文章“Typecho文章图片添加灯箱效果”.

我采用了浅成大大的“ViewImage”灯箱插件。使用设置相当简单,我直接修改主题文件搞定~!也参考了Typecho主题 Pink moe.js

<script>
    jQuery(document).ready(function () {
        jQuery.viewImage({
            'target' : '.view-image img', //需要使用ViewImage的图片
            'exclude': '.exclude img',    //要排除的图片
            'delay'  : 300                //延迟时间
        });
    });
</script>

评论系统:采用了valine无后端评论系统HashOver评论系统,静态博客评论也是挺麻烦的事情。多说关闭之后,很多人对于云评论表示很担心。我也是如此数据在自己手中,是比较放心的!最开始的选择有fooleap大哥的“Disqus PHP API”(PS:具体点击链接查看详情不过多描述)and “畅言”and 基于github的“ISSO” and “valine”。

  1. fooleap大哥的评论系统需要一台国外服务器做转发,因为disqus被强了不是吗!但是我国外的服务器ip被墙了只能放弃!
  2. 畅言我用过几次,用户登陆不友好,还有广告!
  3. ISSO基于github提问系统,github加载速度慢放弃
  4. valine各方面来说都很不错,熊猫小a就是使用这种 。但是云服务器 怕了不知道靠不靠谱

最终选择HashOver的原因是因为搭建简单,你只需上传就简单设置可使用,也支持无数据库存储(xml、json)格式。我阿里云学生机刚好可以排上用场。HashOver评论系统搭建和使用文章具体可以参考“HashOver评论系统,弃坑畅言,致敬多说!

2020.2.20:更换为"valine"评论,不得不说真香!“HashOver”邮件通知一直不行折腾了很久,也参考了文章“解决Hashover无法发送邮件提醒问题”还是没搞定,无奈最终只能选择更换为“valine”了。valine搭建非常简单,看官网教程就行了!就是邮件通知,自带的不行。可以配合第三方邮件提醒加强,具体参考“一个Valine的拓展应用,增强了Valine的邮件通知”暂时不过多描述!

  • 待添加功能“网站地图”(看需求),“博客一件上传github and FTP"(暂时不需要,麻烦)
  • 上下篇文章功能,有思路就是有点问题 到时候在看看吧
  • 文章要添加视频插入

完成

经历以上种种,期间也是各种小问题,但我最终完成最终版本“Chronicle静态博客生成器 Ver:2.0”
为什么取名“Chronicle”呢?以为我感觉很国际范,其实我不会英语的然后看其他人都是xxx英文生成器!“Chronicle”有含义“编年史”借托希望记录属于我的历史。(ps:有道词典翻的)

具体功能我会在写一篇文章介绍的。文章:“Chronicle静态博客生成器介绍

感谢

精益论坛:@精益论坛 大家好我是新手 mcscm 大司命 数据压缩 对我提问帖的回答,和精益模块支持库使用

Github:@jacksongblack @Tokinx @smallyunet @worksmile 开源项目使用

易语言论坛:chencong5025 编辑器调用案例

还有广大网友等:疆飞 评论搭建参考 Pink主题灯箱参考 油油各方面的大力帮助

网站主题仿至:hexo-theme-yinwang

总结

首先感谢你们能看完这篇文章,对于我这写作都和标点符合使用都不会的人!我知道我用了大量的“我”“于是”“然后”“麻烦” 等小学生文笔 哈哈哈 再次感谢!再次感谢!再次感谢!(ps:写了我4小时..汗)

这静态博客终于是完成了,期间遇到了很多问题我都是百度或者论坛求助解决的。很多都没描述清楚,因为不知道怎么描述只能简单概括了。过段时间整顿一下,把旧博文转移下,就准备启用这个静态博客生成器了。

我的易语言可能连入门级别的都没有,我连简单的命令都要去论坛求助。整个静态博客生成器,用到的代码都是很常见的。例如:写到文件 读取配置 等,我不是大佬只是一个新手!整个博客只有思路是我的,代码啥的统统百度。

下图就是其中一段代码:

小剧场:我写这篇文章的时候,不下心点了其他链接跳转了。文章写了1小时没保存只能重写了,气的我当天添加了个一分钟自动保存一次的“自动保存”功能 汗

随缘更新

2020.3.1 : 参考了“暮光博客”移植了typecho的fantasy主题。期间也是发现很多问题,顺带解决了。新主题分页采用了json ajax! 感觉逼格更高!参考了“使用js实现加载更多内容,js分页

添加新评论