Posts List
  1. 修改article.ejs
  2. 修改article.styl

文章标题底下添加评论及分享按钮

landscape+主题默认的评论及分享按钮是在文章下方的,而评论框一般情况下也在文章下文,这就这个评论按钮有点多余。
参考csdn博客等,评论按钮一般都是在文章标题下面的,用户可以直接点击然后跳转至评论框进行评论。因此决定将评论移至文章标题下面。

修改article.ejs

打开 themes/landscape-plus/layout/_partial/article.ejs
找到以下代码

1
2
3
4
5
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
</header>
<% } %>

修改成如下,然后保存.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
</header>
<% } %>
<!-- header-footer -->
<footer class="header-footer">
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
<% if (!index && post.comments){ %>
<!-- ds-thread为多说对话框的id,具体怎么添加多说对话框可以百度-->
<a href="<%- post.permalink %>#ds-thread" class="article-comment-link">评论</a>
<% } %>
<%- partial('post/tag') %>
</footer>

修改article.styl

打开文件themes/landscape-plus/source/css/_partial/article.styl
在末尾添加如下代码

1
2
3
4
5
6
7
8
9
10
11
.header-footer
clearfix()
font-size: 0.85em
line-height: line-height
padding-top: line-height
margin: 0 30px 8px 25px
a
color: color-grey
text-decoration: none
&:hover
color: color-default

本文作者:JeremyHe
本文链接:http://www.alzz.me/posts/2014/07/24/01_文章标题底下添加评论及分享按钮/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

有问题?
微信。◕‿◕。