Skip to content

Latest commit

 

History

History
80 lines (60 loc) · 2.43 KB

README.md

File metadata and controls

80 lines (60 loc) · 2.43 KB

Loquor-落客

Loquor(落客)是一个款轻量级的博客评论组件,包括一个基于Flask的评论Web服务端,以及一个仅依赖jQuery的前端评论组件。

你可以自己搭建一个评论服务器,或者直接使用我们提供的服务。

使用方法

在需要添加评论的地方添加

<script src="http://jayveestorage.qiniudn.com/dev/js/loquor.js"></script>
<div id="loquor_container"
    data-loquor-id="1"
    data-loquor-page-id="1"
    data-loquor-pagetitle="Test"
    data-loquor-pageurl="#"
    style="width: 90%; margin: 0 auto">
</div>

其中data-loquor-id为区别博客的id,data-loquor-page-id为页面独立id,data-loquor-pagetitle为页面标题,data-loquor-pageurl为页面url。 为便于区分评论组,请利用博客模板填上以上值。

效果图


主流静态博客示例

Hexo

主要的思路即是利用模板生成相应的loquor-idloquor-page-id等。下面以本人修改版的Yilia主题为示例:

1.首先在主题根目录下的_config.yml内添加如下配置(同时):

#开启落客
loquor: true

2.在layout/_partial/article.ejs文件内容的最下方(或者找到duoshuo的位置),添加如下代码:

<% if (!index && theme.loquor && post.comments){ %>
<%- partial('post/loquor', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>

大意就是如果符合条件,则调用该文件目录下相对路径为post/loquor的模板,并传入相应的context。

3.在post目录下创建一个loquor.ejs,内容为:

<div class="container">
    <script src="http://jayveestorage.qiniudn.com/dev/js/loquor.js"></script>

	<!-- Loquor评论框 start -->
	<div id="loquor_container"
	  data-loquor-id="jayvee_loquor"
	  data-loquor-page-id="jayvee_loquor_<%=key%>"
	  data-loquor-pagetitle="<%=title%>"
	  data-loquor-pageurl="<%=url%>"
	  style="width: 95%; margin: 0 auto">
</div>
	<!-- Loquor评论框 end -->
</div>

其中jayvee_loquor可以替换为任意值,用于区分不同用户。

至此,你就可以在博客中使用Loquor了


ToDo List

  1. 服务端修改为Django,直接使用Django的Admin进行评论管理
  2. 其他静态博客(如Jekyll)的接入示例