Yilia主題文章增加"原創/轉載"標識

yuanandzhuan

給博客文章增加類型說明:“原創”或“轉載”。

準備工作

這個標識是添加在博客的“字數統計”功能裏的,所以需要先配置字數統計功能,點擊跳轉:https://anyway1314.cn/post/25766.html#3、字數、閱讀時長統計

添加配置

在博客根目錄的_config.yml添加:

# 文章類型,在上面word_count: true的前提下可以進行開啓
# 文章類型具體在對應的md文件開頭的 article_type屬性進行定義。原創:article_type:0 ,,轉載:article_type:1 :
article_type: true

添加代碼

找到themes\yilia\layout\_partial\post\word.ejs,代碼替換爲:

<div style="margin-top:10px;margin-bottom:-15px;">
    <% if (theme.article_type == true){ %>
      <% if(post.article_type == 0){ %>
        <span class="article-type" style="
          color: white;
          font-size: 14px;
          background: #bf59f3;
          padding: 0 5px 1px 5px;
          margin-right: 5px;
          border-radius: 2px;">原創</span>
      <% } else if (post.article_type == 1){ %>
        <span class="article-type" style="
          color: white;
          font-size: 14px;
          background: #8BC34A;
          padding: 0 5px 1px 5px;
          margin-right: 5px;
          border-radius: 2px;">轉載</span>
      <% } %>
    <% } %>
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text" style="font-size: 15px;color: navy">  字數統計: </span>
        <span class="post-count" style="font-size: 14px;color: navy"><%= wordcount(post.content) %></span>
      </span>
    </span>
    
    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text" style="font-size: 15px;color: navy">  閱讀時長: </span>
        <span class="post-count" style="font-size: 14px;color: navy"><%= min2read(post.content) %></span>
      </span>
    </span>
</div>

文章修改

根據自己的文章內容,在其對應的md文件裏,需要聲明爲“原創”的開頭寫上article_type: 0,“轉載”則是article_type: 1

20200413202026

*hexo new生成優化

畢竟每次手動寫article_type: 0挺費時間,直接把它寫在博客根目錄的scaffolds\post.md裏,每次創建自動生成。

20200413203418

移動端細節調整

在沒有增加“字數統計”的功能前,文章標題有一個下邊框

20200413202819

可以在themes\yilia\source\main.xxxxx.css裏進行修改,如圖:

20200413203030

完結、✿✿ヽ(°▽°)ノ✿

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章