hexo等靜態(tài)博客楚午，現(xiàn)在有很多可使用的評(píng)論插件踪古，基本都需要繁瑣的注冊(cè)，國內(nèi)的還需要實(shí)名制審核
我仔細(xì)思考了一下钟沛，可以試著自己做一個(gè)畔规，不過是一個(gè)前端界面和一個(gè)后端服務(wù)器。但是作為一個(gè)“插件”和一個(gè)前端頁面還是有區(qū)別的恨统，我希望能盡量讓使用者簡(jiǎn)單的引入叁扫，最好啟用一個(gè)服務(wù)器+引入一個(gè)js文件+少量配置就可以完成三妈。
首先，不要太復(fù)雜的功能：基本功能針對(duì)每個(gè)頁面的評(píng)論莫绣、回復(fù)即可畴蒲，考慮后續(xù)加上markdown語法支持，管理界面等功能对室。
界面
我嘗試使用了一些現(xiàn)有的插件模燥，并試圖模仿他們的樣式并簡(jiǎn)化功能，于是我做出了下面這樣的界面：
是不是還挺像那么回事的??掩宜？
這部分的代碼如下:
#tiny-comment{
margin: 10px 0;
background: #ffffff;
border: 1px solid #C0C4CC;
}
#tiny-comment .tiny-container{
padding: 20px 20px 5px;
}
#tiny-comment .tiny-footer{
padding: 5px 20px;
background: #262A30;
color: #999999;
font-size: 12px;
}
#tiny-comment .tiny-footer a{
color: #258FB8;
text-decoration:none;
}
#tiny-comment input{
width: 150px;
border: none;
border-bottom: 1px solid #C0C4CC;
outline: none;
margin-right: 10px;
}
#tiny-comment input:focus{
border-bottom: 1px solid #409EFF;
}
#tiny-comment .input-wrapper{
border: 1px dashed #C0C4CC;
border-radius: 3px;
padding: 5px;
margin-bottom: 20px
}
#tiny-comment .input-wrapper textarea{
/* border: 1px dashed #C0C4CC; */
border: none;
margin-top: 5px;
width: 100%;
resize: vertical;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
}
#tiny-comment button{
padding: 5px 20px;
border: 1px solid #DCDFE6;
border-radius: 3px;
background: transparent;
outline: none;
cursor: pointer;
}
#tiny-comment button:active{
border: 1px solid #409EFF;
color: #409EFF;
}
#tiny-comment .comment-count{
margin: 10px 0;
}
#tiny-comment .segment{
margin: 10px 0;
border-bottom: 1px solid #DCDFE6;
}
#tiny-comment .secondary{
font-size: 12px;
color: #C0C4CC;
}
#tiny-comment .segment .nickname{
color: #409EFF;
cursor: default;
}
#tiny-comment .comment-content{
margin: 12px;
}
#tiny-comment .reply-btn{
font-size: 12px;
padding: 0;
border: none;
cursor: pointer;
color: #F56C6C;
outline: none;
}
#tiny-comment .reply-btn:active{
border: none;
color: rgb(214, 0, 0);
}
#tiny-comment .reply{
margin: 5px 0 5px 20px;
padding: 5px;
border-top: 1px solid #DCDFE6;
font-size: 13px;
}
#tiny-comment .reply .comment-content{
margin: 5px;
}
<div id="tiny-comment">
<div class="tiny-container">
<div class="input-wrapper">
<input type="text" placeholder="昵稱">
<input type="text" placeholder="郵箱" title="郵箱不會(huì)公布蔫骂，有新的回復(fù)時(shí)接收郵件">
<div>
<textarea id="tiny-comment-textarea" placeholder="你的留言..." rows="5"></textarea>
</div>
<div style="height:35px;"> <button style="float:right;">回復(fù)</button></div>
</div>
<div class="comment-count"><span style="font-weight: bold">2</span> 評(píng)論</div>
<div class="segment">
<span class="nickname">匿名用戶</span>
<span class="secondary">13秒前</span>
<button class="reply-btn" style="float: right">回復(fù)</button>
<div class="comment-content">
這是一條評(píng)論
</div>
</div>
<div class="segment">
<span class="nickname">匿名用戶</span>
<span class="secondary">13秒前</span>
<button class="reply-btn" style="float: right">回復(fù)</button>
<div class="comment-content">
這是一條評(píng)論
</div>
</div>
<div class="segment">
<span class="nickname">匿名用戶</span>
<span class="secondary">13秒前</span>
<button class="reply-btn" style="float: right">回復(fù)</button>
<div class="comment-content">
這是一條評(píng)論
</div>
<div class="reply">
<span class="nickname">匿名用戶</span>
<span class="secondary">13秒前</span>
<button class="reply-btn" style="float: right">回復(fù)</button>
<div class="comment-content">這是一條回復(fù)</div>
</div>
<div class="reply">
<span class="nickname">匿名用戶</span>
<span class="secondary">13秒前</span>
<button class="reply-btn" style="float: right">回復(fù)</button>
<div class="comment-content">這是一條回復(fù)</div>
</div>
<div class="reply">
<span class="nickname">匿名用戶</span>
<span class="secondary">13秒前</span>
<button class="reply-btn" style="float: right">回復(fù)</button>
<div class="comment-content">這是一條回復(fù)</div>
</div>
</div>
<div class="load-more" style="text-align: center">
<button>加載更多...</button>
</div>
</div>
<div class="tiny-footer">
Powerd by <a href="javascript:void(0)">lzlz000</a>
</div>
</div>
接下來，我們考慮如何讓前端能簡(jiǎn)單的引入這個(gè)節(jié)點(diǎn)呢牺汤？
