完善Blog

学习经历
317 字

主页展示方式的修改

添加abstract

1
Blog\node_modules\hexo-theme-vivia\source\css\_partial

在上述文件夹中，创建 abstract.styl 文件，文件中代码如下

1
2
3
4
5
6
7
8
9
10
.abstract-box
  border-left 4px solid skyblue
  color #000
  padding-left 10px
  line-height 1.6
  margin 16px 0
  display block

html[theme="dark"] .abstract-box
  color #fff

修改展示方式

1
Blog\node_modules\hexo-theme-vivia\layout\_partial\artical.ejs

在上述文件中，把以下部分进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="e-content article-entry" itemprop="articleBody">
  <% if (post.excerpt && index){ %>
    <%- post.excerpt %>
  <% } else if (is_home() && !post.excerpt && theme.home.style != 'detail') { %>
    <div class="truncate-text">
     <% if(description){ %>
      <%- strip_html(post.description) %>
     <% } else{ %>
      <%- truncate(strip_html(post.content), {length: 500}) %>
     <% } %>
    </div>
  <% } else { %>
    <%- post.content %>
  <% } %>
</div>

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="e-content article-entry" itemprop="articleBody">
  <% if (is_home() && post.abstract) { %>
    <div class="post-abstract abstract-box">
      <%= post.abstract %>
    </div>
  <% } else if (post.excerpt && index) { %>
    <%- post.excerpt %>
  <% } else if (is_home() && !post.excerpt && theme.home.style != 'detail') { %>
    <div class="truncate-text">
     <% if(description){ %>
      <%- strip_html(post.description) %>
     <% } else{ %>
      <%- truncate(strip_html(post.content), {length: 500}) %>
     <% } %>
    </div>
  <% } else { %>
    <%- post.content %>
  <% } %>
</div>

在修改之后，若加入了abstract，则会直接显示abstract；否则显示原文内容

修改About的显示方式

1
Blog\node_modules\hexo-theme-vivia\layout\_partial\article.ejs

在以上文件路径中，找到以下代码：

1
2
3
4
5
6
7
8
9
<div class='meta-info-bar'>    
  <%- partial('post/date', {class_name: 'meta-info', date_format: null}) %>    
  <div class="need-seperator meta-info">    
    <%- partial('post/category') %>     
  </div>    
  <div class="wordcount need-seperator meta-info">    
    <%- symbolsCount(post) %> <%- __('words') %>     
  </div>    
</div>

修改为：

1
2
3
4
5
6
7
8
9
10
11
<% if (post.layout !== 'page') { %>
  <div class='meta-info-bar'>    
    <%- partial('post/date', {class_name: 'meta-info', date_format: null}) %>    
    <div class="need-seperator meta-info">    
      <%- partial('post/category') %>     
    </div>    
    <div class="wordcount need-seperator meta-info">    
      <%- symbolsCount(post) %> <%- __('words') %>     
    </div>    
  </div>
<% } %>

在修改之后，About界面就不再显示时间、分类与字数。

完善Blog字数的计算

1
Blog\node_modules\hexo-theme-vivia\languages\zh-CN.yml

以上文件中把 words 中的“词”改为“字”，则主页显示的则为字而不是词。

1
Blog\node_modules\hexo-theme-vivia\scripts

在以上文件夹中添加文件wordcount.js，以下为代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo.extend.helper.register('symbolsCount', function(post) {
  let content = post.content || '';

  // 1. 去掉多行代码块 <pre><code>...</code></pre>
  content = content.replace(/<pre.*?>[\s\S]*?<\/pre>/g, '');

  // 2. 去掉行内代码 <code>...</code>
  content = content.replace(/<code.*?>[\s\S]*?<\/code>/g, '');

  // 3. 去掉 HTML 标签
  content = content.replace(/<[^>]*>/g, '');

  // 4. 去掉空格、换行、制表符
  content = content.replace(/\s+/g, '');

  return content.length;
});

修改之后，Blog计数统计就不会计算代码。

PS：因为不支持ejs语法高亮，此处使用的html来添加代码高亮，实际为ejs。