LiteBlog - 渲染原理及主题开发教程

LiteBlog 主要由两个模块组成

  • 主页卡片模块
  • 文章模块

两个模块相互独立,无任何依赖,意味着你可以编写一篇文章,但不把他加入到主页渲染中,那么这篇文章只能被你自己看到/或者发给别人看到,并不能被收录进RSS或主页中.甚至你可以在link处引用他人的文章,可以被直接跳转或在rss中显示.

文本如何被渲染进页面中的

使用 {{ 中间包裹变量 }} 即可将变量渲染进页面,其中卡片类型可直接使用变量名,会自动代入,不需要渲染模组
渲染模组的作用是区分不同变量的存储位置,如果需要渲染模组,则在中间包裹变量前使用模组名+: 设置变量模组,例如需要渲染global中的变量app_name 则可以使用{{global:appname}}

三个模块的主要渲染模组

  • global
  • rendered
  • file

其中

glolbal

主要存放 /configs/global.json 中设置的各种变量,和comment设置中的sitekey用于混淆token,所有变量均为文本型 以下是一些代表变量

rendered

主要存放渲染完成之后的内容,代表性的有以下

cards

用于存放渲染完成的所有卡片

rss_feed

用于存放渲染之后的RSS

token_encrypt_key

用于存放用于混淆的混淆key

file

将文件直接加入需要渲染的文件,例如{{file:bottom_bar}},则会将templates/bottom_bar.html文件的内容渲染进需要渲染的文件,注意:被渲染进入的文件不会被二次渲染,意思是bottom_bar.html这个文件中的任何{{ }}包裹的变量都不会被渲染.

主页卡片模块

主页卡片会根据在configs/card.json文件中定义的cards数组分别渲染每个卡片,所有定义的卡片元素都会被渲染进入模板,渲染完成之后的卡片存储在 rendered 模组中,以 cards 作为变量名,在卡片的渲染中有以下几个重要元素

  • template : 用于决定渲染模板,存放于templates
  • id : 主要卡片元素,用于前后端通信

文章模块

文章以 文章id + .json 的格式存储在configs/articles/中,文章的渲染全部都由 templates/article.html文件作为模板,已以下几个参数作为渲染内容

  • title : 文章标题
  • content : 以markdown格式存储的文章内容
  • content_html : 以HTML格式存储的文章内容
  • author : 作者
  • edit_date : 编辑日期,由api被调用时生成/修改
  • pub_date : 发布日期,由api被调用时生成
  • comments : 评论数组

子模块:评论

每个评论都由模板: templates/comment.html 渲染,由以下几个参数组成

  • author : 作者
  • email : 邮箱
  • content : 内容
  • pub_date : 发布时间
  • id : 评论id
  • reply_to : 回复到id

以下是一些例子

templates/comment.html

<div id="article-comment" class="article-comment" comment-id="{{comment_id}}">
    <div id="comment-Author" class="comment-author">{{comment_author}}
        <button id="comment-Reply" class="comment-reply" onclick='OnReplyButtonClick("{{comment_id}}")'>Reply</button>
    </div>
    <div id="comment-Date" class="comment-date">{{comment_date}}</div>
    <div id="comment-Content" class="comment-content">{{comment_content}}</div>
</div>

templates/context_menu.html

此文件多见用于{{file:context_menu}}中被应用

<div id="context-menu" class="context-menu display-flex position-fixed flex-direction-column justify-content-center radius-5px boarder-1px">
    
</div>

后端API参见: LiteBlog - API文档

Powered by  LiteBlog
|