本文详细介绍易语言“Chronicle静态博客生成器”基本用法和一些高级设置设定等..

声明

  1. 本软件使用“易语言”制作,安全防护软件可能会报警。但请绝对放心绝无后门广告安装啥的!
  2. 因为本人也是个易语言小白,软件有很多不足bug等请勿吐槽(ps:我尽力了^^)
  3. 主题移植至Theme Walker作者为:海岛心hey。使用“gridea”写博客的朋友,请向原作者购买!本软件没有利用改主题进行收费商业使用等!
  4. 感谢精益论坛开源模块,论坛网友的开源案例。也感谢易语言论坛“chencong5025”的开源案例

前言

观看本文前,也可先参考文章“Chronicle静态博客生成器介绍”提前了解软件文件目录功能介绍等等..

这里不在过多描述,直接进入主题!

基本设置

评论默认使用“Valine”,获取APP ID 和 APP Key请看官网教程(https://valine.js.org/quickstart.html )或者自行百度,不过多描述!当然你还可以使用“来必力”,“Gitment”,“Disqus”等等!

  • 朵说(http://cs.occamx.com/)是一个前端和后端都极度精简的跨站评论系统。这个也不错,是mjj论坛以为大佬的,就是不知道稳不稳定啊!!
          <div class="vcomment"></div>
          <script src="https://cdn.jsdelivr.net/npm/valine"></script>

          <!-- <script src="/script/Valine.min.js"></script>   -->
          <script>
            var valine = new Valine();
            var path = window.location.pathname.replace('index.html','');
            var isEN = path.indexOf('en') > -1;
            path = isEN ? path.replace('en/','') : path;
            valine.init({
                el: '.vcomment',
                appId: '修改为你的id',
                appKey: '修改为你的key',
                notify: true,
                placeholder: 'Just Go Go.',
                avatar:'mm',
                path:path,
                lang: isEN ? 'en' : 'zh-cn',
                visitor:true
            })
          </script>

开始写作

软件打开会自动开启保存文章功能,保存目录在Temporary保存格式为TXT。如何恢复?打开你要恢复的时间,复制内容张贴到文章编写区域!(ps:如不需要自动保存的文件是,需手动删除)

图片插入

  • 普通插入

  • 多图插入



多图插入格式如下:

<div class="tp">
<div>![](../img/19/2020-0318-1517-29.jpg)</div>
<div>![](../img/19/2020-0318-1517-34.jpg)</div>
<div>你可以根据选则添加</div>
</div>

个人建议 4- 5 图 一嵌套

<div class="tp">
<div></div>
<div></div>
</div>

发布网站

文章写完之后,点击生成文章即可!

如下图:

你只需上传index文件夹里面生成的网站即可!

推荐七牛或者GitHub Desktop 都支持同步上传!

如果使用ftp可能每次覆盖上传会快点了!!我挖的坑!

修改文章

推荐在文章列表点击文章右键修改 快点!

本地调试

  1. 设置 网站地址 修改为http://localhost/ 点击保存 重新运行后执行第二步
  2. 常用界面 点击整站刷新
  3. 运行目录下“WebService.exe”

这时候打开游览器,输入:http://localhost/ 即可访问自己的网站

当然如果你有自己的web环境也可以!

发布到线上的时候,请修改网址地址为线上地址,在执行第二步!!

高级设置

点击 设置>打开配置 会打开一个配置.ini

找到如下内容:

首页显示=5
上一页=<i class="remixicon-arrow-left-line"></i> 上一页
下一页=下一页<i class="remixicon-arrow-right-line"></i>
上一页2=page-btn
下一页2=animated fadeIn font-extrabold text-gray-700 hover:text-gray-900 more-btn

链接格式1=<a href="https://xiamuyourenzhang.cn/article/【文章链接】.html" target="_blank">【标题】</a>
链接格式2=<a href="https://xiamuyourenzhang.cn/article/【文章链接】.html" >【标题】</a>
链接格式3=https://xiamuyourenzhang.cn/article/【文章链接】.html

插入图片头=![](
插入图片尾=)

图片后端修改=<img src="
图片后端修改1=<img src="../assets/loading.gif" data-src="
图片后端修改2=" alt="">
图片后端修改3=?x-oss-process=style/img">

封面图获取1=data-src="
封面图获取2=">

控制首页显示篇数:

  • 首页显示=5 修改5 为你想显示多少文章字数

上一页 和 上一页2 :

  • 一个是插入<a class=“上一页2” href=“#”>上一页</a>

希望这样表达你们能理解!下一页 和下一页2 同理 一个是a链接 class 一个是 显示

上一页=<i class="remixicon-arrow-left-line"></i> 上一页 /
下一页=下一页<i class="remixicon-arrow-right-line"></i>
上一页2=page-btn
下一页2=animated fadeIn font-extrabold text-gray-700 hover:text-gray-900 more-btn

你制作主题的时候可以自行修改如 一下这样

上一页=上一页 
下一页=下一页
上一页2=prev
下一页2=next

那首页分页就是

<a class=“prev” href=“#”>上一页</a>
<a class=“next” href=“#”>下一页</a>

链接格式: 这是为了方便添加一些 元素 如插入 一个class 等等 不建议修改这里,不然后期麻烦

插入图片头,尾巴:

这里是第三者手动拖入图片在插入图片的,插入股则

插入图片头=![](
插入图片尾=)

这样插入的图片地址就是 ![](xxx.jpg)

当然你也可以改成

插入图片头=<img src=“
插入图片尾=” alt=“”>

那地址就是<img src=“xxx.jpg” alt=“”>

图片后端修改:

这里是为了修改 图片格式

如: 默认的 生成html 文件后 图片格式为 <img src=“”>

那我是添加了 图片延迟加载插件  格式为:<img src="加载动画地址" data-src="真图片地址">

这时候就需要在这里修改 了

图片后端修改=<img src="
图片后端修改1=<img src="../assets/loading.gif" data-src="
图片后端修改2=" alt="">
图片后端修改3=?x-oss-process=style/img">

这里我还添加了 阿里云oss 图片格式 所以在文件后面 添加?x-oss-process=style/img

最终生成后的格式如下:

<img src="../assets/loading.gif" data-src="../img/15/2020-0219-0901-02.jpg?x-oss-process=style/img">

首页封面获取:

因为我们把原本的 图片格式改成了 <img src="../assets/loading.gif" data-src="../img/15/2020-0219-0901-02.jpg?x-oss-process=style/img">真是图片的地址就在data-src="">中间了所以 获取规则如下

封面图获取1=data-src="
封面图获取2=">

如果是原本的呢?

那就以下下格式

<img src=“” alt=“”>

封面图获取1=src=“
封面图获取2=” alt=

文章图片

第三种插入的图片,保存在\index\img

图片存放和url ID一样 文章id=1 img 下就有img/1/ 的文件夹存放当前文章的图片

文章置顶

手动打开\assets\lib\top.txt 修改一下一下内容

<section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${0 * 0.2}s` }"> 
     <a href="文章链接" class="feature-image-wrapper bg-gray-100 rounded-lg flex-shrink-0 mr-8 w-full h-56 h-32 md:w-56 md:h-40"> 
      <div class="post-feature-image w-full h-56 h-32 md:w-56 md:h-40" data-bg="'图片地址'" style="background-image: url(&quot;图片地址&quot;);"> 
      </div> </a> 
     <div class="content"> 
      <a href="https://xiamuyourenzhang.cn/article/1.html"> <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">文章标题</h2> </a><font color="red">【手工置顶】</font> 
      <div class="post-abstract text-gray-700 font-light my-4">
        <p class="syms">文章描述</p>      
      </div> 
      <div class="text-gray-400 text-sm font-light">
       2020年03月01日 / 3.5k/12min
      </div> 
     </div> 
    </section>

如果你感觉麻烦,直接F12 审查元素,复制这段文章html代码直接粘贴到\assets\lib\top.txt 就行!!
(ps:置顶后的文章,记得在文章列表页面点击删除,这样文章就不会重复出现了!!)

修改主题

点击 设置>打开主题 在点击> Walker文件夹

手动打开 首页主题.txt 文章主题.txt 记得两个文件 都要改!!

修改以下github 推特 微博 知乎 为你的账号:

        <a href="https://github.com/xiamuguizhi" target="_blank" class="mr-4 text-xl text-gray-400 font-light hover:text-gray-900"> <i class="remixicon-github-line"></i> </a> 
        <a href="https://twitter.com/YeKaijian" target="_blank" class="mr-4 text-xl text-gray-400 font-light hover:text-gray-900"> <i class="remixicon-twitter-line"></i> </a> 
        <a href="#" target="_blank" class="mr-4 text-xl text-gray-400 font-light hover:text-gray-900"> <i class="remixicon-weibo-line"></i> </a> 
        <a href="https://www.zhihu.com/people/xiamuguizhi" target="_blank" class="mr-4 text-xl text-gray-400 font-light hover:text-gray-900"> <i class="remixicon-zhihu-line"></i> </a>

修改导航:

添加导航的文章,记得要在文章列表删除 在添加到这里!

     <a href="https://xiamuyourenzhang.cn/" class="menu" style="animation-delay: 0s"> 首页 </a> 
     <a href="https://xiamuyourenzhang.cn/article/4.html" class="menu" style="animation-delay: 0.2s"> 作品 </a> 
     <a href="https://xiamuyourenzhang.cn/article/5.html" class="menu" style="animation-delay: 0.4s"> 友人 </a> 
     <a href="https://xiamuyourenzhang.cn/search.html" class="menu" style="animation-delay: 0.4s"> 搜索 </a>           
     <a href="https://xiamuyourenzhang.cn/article/3.html" class="menu" style="animation-delay: 0.6000000000000001s"> 关于 </a>

修改\index\search.html

把里面的标题,关键词,导航啥的 改成你自己的!!

ps 因为一些原因,搜素页面 还是要手动修改 没自动生成…

可视化数据

所有标题链接都保存在\assets\lib 你可以打开查看,记事本就行

文章描述:\assets\description
文章数据html:\assets\html
文章数据hmarkdown:\assets\markdown
主题文件:\assets\theme

所有文件你都可以编辑查看!!而且方便你转移保存!文章数据html,能让你把数据转移到任何博客!!

注意

整站刷新用于:

  • 修改设置后保存后 店家
  • 修改主题后 或者 修改 配置.ini

平常一般不点击

清除文章:
点击就清除当前编写的文字了,一般不要乱点!!!不然就惨了

结尾

写这篇文章的时候!抱歉很多地方讲不详细,我实在不懂描述我的思路 奔溃!

有些细节大家自己体验吧!!!

下载地址

百度网盘:链接: https://pan.baidu.com/s/1fuFRWQI_65SXdedtJuhoNg 提取码: mpuv
微云:https://share.weiyun.com/53ICx2W
github下载:https://github.com/xiamuguizhi/Chronicle

采集测试

Chronicle静态博客生成器 3w9千篇 采集测试!预览地址:https://9i3.cn/

  • 优点:一点都不卡,我就放了个caddy 访问无压力!
  • 缺点:因为单线程,生成非常的慢 哈哈 我实在1核2g的 服务器测试的~ 1秒一篇吧 然后分页 3w9 有点卡 意思就是每次写一篇文章 要重新排序 分页 非常麻烦 占用时间