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

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

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