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

为什么要打造一个属于自己的静态博客呢？我从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一样的文件夹名存放图片。也方便以后查看文章图片，图片名都是取插入的时间命名。例如写这篇文章插入的图片：![](../img/1/2020-0216-2210-17.jpg)

首页分页、站内搜索、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”。

fooleap大哥的评论系统需要一台国外服务器做转发，因为disqus被强了不是吗!但是我国外的服务器ip被墙了只能放弃！
畅言我用过几次，用户登陆不友好，还有广告！
ISSO基于github提问系统，github加载速度慢放弃
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：有道词典翻的）