❄️ A Mini Comment web application, using Nodejs
, Vue.js
, Mongodb
.
You can use the raw format or markdown format.
❄️ This project support for deploying in any node server, as well as vercel.
The demo is here Yurisizuku.
minicomment_server.js
, main server of this app, the command line is as belowminicomment_api.js
, parse the api for get/submit the comment.minicomment_model.js
the defination of the comments model and some functions to manipulate the databaseminicomment_db.js
, some configs for connet database
In /public
, use minicomment.xhtml
, minicomment.js
, minicomment.css
to import minicoment client. The comment web UI can
- fetch the comments by ajax and render the comments in several pages
- go forward, backward, and jump to arbitary page
- show the reference (if has) of each comment, and jump to reference
- submit the comments , with the captcha support
❄️ It has some configs as bellow:
<meta article_title="Comments" api_host="http://localhost:3003"/>
<meta comment_view_limit="10" page_limit="10"/>
-
input the
jquery.js
,vue.js
,marked.js
,highlight.js
,highlightjs-line-numbers.js
libraries by<script src=""></scrpt>
-
use jquery load
minicomment.xhtml
into where you want to add comment view, see/public/minicomment.html
in detail.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta article_title="Comments" api_host="http://localhost:3003"/>
<meta comment_view_limit="10" page_limit="10"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/vs.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
<div id="mini_comment"></div>
<script>$("#mini_comment").load("./minicomment.xhtml");</script>
- In
hook_style.js
, use jQueryload
to import the html into the comment page, something like:
// hook_style.js
function add_mini_comment(){
$($('meta')[0]).after('<meta api_host="">');
var article_title = $('meta[property="og:title"]').attr('content');
if ($('meta[article_title]').length <= 0 ){
$($('meta')[0]).after('<meta article_title="">');
}
switch(article_title.toLowerCase()){
case "home":
case "archives":
case "tags":
case "catagories":
case "about": break;
case "comments":
$('meta[article_title]').attr('article_title', "Comments");
$('#page').append('<div id="mini_comment"></div>');
$('div#mini_comment').load("/hook/minicomment.xhtml");
break;
default:
$('meta[article_title]').attr('article_title', article_title);
$('#post').append('<div id="mini_comment"></div>');
$('div#mini_comment').load("/hook/minicomment.xhtml");
break;
}
}
- In
_config.butterfly.yml
, import theVue
andhook_style.js
# _config.butterfly.yml
inject:
head:
- <link rel="stylesheet" href="/hook/hook_style.css">
bottom:
- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
- <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
- put the
minicomment.xhtml
,minicomment.js
,minicomment.css
into<hexo>/source/hook/
directly (hexo generate html in wrong format, so rename it to xhtml). Maybe need to edit<meta api_host="YourHostName or empty"/>
and delete<meta article_title="xxx">
, because it is set by thehook_style.js
. Also change the path of js and css.
❄️ Finally, do not forget to purge the cdn caches to see the changes
<meta api_host="YourHostName or empty"/>
<link rel="stylesheet" type="text/css" href="/hook/minicomment.css" />
<script src="/hook/minicomment.js"></script>
- use command below to download,
git clone https://github.com/YuriSizuku/MiniComment.git && cd MiniComment && npm i
npm i minicomment && npm i # or just use npm to install pacakge
- create a file
./secret/SECRET_DB.TXT
and put a string likemongodb://username:password@host:port/database?authSource=admin
for connecting to your mongodb database. npm run start
orpm2 start server.js
to run it, have fun ~
Also you can simple run the commad as below, to deploy in any node server.
node minicomment_server.js [options]
--port=3003, or $port # you can use either secret_file or secret_url
--secret_url, or $secret_url # mongodb://username:password@host:port/database?authSource=admin
--secret_file=./secret/SECRET_DB.TXT
- create a project in vercel and fork this repository.
- in vercel config
settings/environment-variables
page, set enviroment,secret_url=mongodb://username:password@host:port/database?authSource=admin
as yours. - deploy and have fun ~
- v0.9, refract the code structure, support for vecel, serverless
- v0.8, add support for markdown
- v0.7, initial version, with comment view and submit function