Hexo博客搭建系列Chapter5——Hexo博客功能扩展(1/5)


浏览次数 :  次   
博文字数统计 : 1.5k字   |   阅读所需时长 : 6分
× 文章目录
  1. 1. Hexo博客搭建系列——Chapter 5
    1. 1.1. 五、高级功能实现
      1. 1.1.1. 1. 微信分享功能
      2. 1.1.2. 2. 文章置顶功能
        1. 1.1.2.1. 2.1 安装插件
        2. 1.1.2.2. 2.2 配置置顶标准
        3. 1.1.2.3. 2.3 配置文章
        4. 1.1.2.4. 2.4 优先级配置
      3. 1.1.3. 3. 文章标签分类功能
        1. 1.1.3.1. 3.1 文章分类功能
        2. 1.1.3.2. 3.2 文章标签分类功能
      4. 1.1.4. 4. 添加404网页
      5. 1.1.5. 5. 头像旋转功能
      6. 1.1.6. 6. 修改默认文章格式
  • 在Windows系统上利用Hexo搭建博客系列——Chapter5
  • Chapter5：
    • 具备Yilia主题自带原始功能
    • 扩展了微信分享功能、文章置顶功能、文章分类功能
    • 扩展了404默认公益网页、头像旋转、文章默认格式功能

Hexo博客搭建系列——Chapter 5

五、高级功能实现

1. 微信分享功能

  • Yilia主题的默认微信分享

    • 初始时微信分享功能失效
    • 解决方法：修改themes\yilia\layout\_partial\post\share.ejs文件

  • 由于百度云已经不支持二维码生成功能，修改share.ejs的度盘链接，改为qrserver.com的api

    1
    2
    3
    4
    5
    <!--查找-->
    //pan.baidu.com/share/qrcode?url=

    <!-- 修改为-->
    //api.qrserver.com/v1/create-qr-code/?size=150x150&data=

  • 查找share.ejs中的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!--查找-->
    var sUrl = url.replace(/index\.html$/, '');
    sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;

    <!--添加-->
    test=sUrl.substring(29);
    <!-- 注意：substring截取的位数与你的主页网址长度相等>
      <!--注意：如果博客只部署在一个服务端，可以省略这一步，微信二维码分享的地方，直接使用sUrl>
      <!--注意：如果博客只部署在多个服务端，不可省略，使得二维码为主博客的网址>

  • 再将share.ejs中的

    1
    2
    3
    4
    5
    <!--查找-->
    '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl

    <!-- 修改为-->
    '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=你的主页网址' + test

  • 最终结果

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 最终修改结果-->
    <div class="page-modal wx-share js-wx-box">
     <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
     <p>扫一扫，分享到微信</p>
     <div class="wx-qrcode">
       <img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://githubName.github.io' + test  %>" alt="微信分享二维码">
     </div>
    </div>

2. 文章置顶功能

2.1 安装插件

  • 安装hexo-generator-index-pin-top模块

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

2.2 配置置顶标准

  • 打开/themes/yilia/layout/post.ejs在最前面加入代码

    1
    2
    3
    4
    5
    <% if (page.top) { %>
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
    <% } %>

2.3 配置文章

  • 在需要置顶的文章的Front-matter中加上top属性

    top后面的数字越大，优先级越高

    1
    2
    3
    4
    5
    ---
    title: 博客简介
    date: xxx
    top: 5
    ---

2.4 优先级配置

  • 修改根目录配置文件_config.yml，top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 查找
    index_generator:
    path: ''
    per_page: 10
    order_by: -date

    # 改为
    index_generator:
    path: ''
    per_page: 10
    order_by:
     top: -1
     date: -1

3. 文章标签分类功能

3.1 文章分类功能

  • 通过hexo新建一个页面，命名为categories

    1
    $ hexo new page categoties

  • 编辑刚新建的页面，将页面的类型type设置为categories，主题将自动为这个页面显示所有分类。

    通过设置categoties，并在menu中添加对应链接来实现博文分类，categoties是不同级的，适合纵向文件分类 

    1
    2
    3
    4
     >title: 分类
    date: 2020-07-29 10:36:40
    type: "categories"
    comments: false

  • 菜单中添加链接。编辑主题的_config.yml ，将categories添加到menu中

    1
    2
    3
    4
    5
    menu:
    home: /
    categories: /categories
    archives: /archives
    tags: /tags

3.2 文章标签分类功能

  • MarkDown 各种标签设置

    通过设置tags，并在menu中添加对应链接来实现博文分类，tags标签是同级的，适合横向文件分类 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     >---
    title: 				 #文章标题
    subtitle:            #子标题
    categories:          #文章分類目錄 可以省略    
    toc: true            #目录 需要安装插件或者主题自带
    reward: true         #打赏 需要安装插件或者主题自带
    declare: true        #版权 需要安装插件或者主题自带
    date:                #文章日期
    header-img:          #顶部背景图片
    tags:                #标签
    ---

4. 添加404网页

  • 在/source/目录下新建404.md在头部添加属性permalink: /404.html，页面内容可以自定义。

    • 推荐使用腾讯公益404页面（注意要把首页链接换成自己的）

    • 参考：自定义Github Pages

    • 404.md文件内容

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      ---
      # example 404.md 
      title: 404 Not Found：该页无法显示 
      date: 2019-07-26 21:51:29 
      permalink: /404.html
      ---

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8" />
        <title>404</title>                              
      </head>    
      <body>
        <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://chthollists.github.io/"></script> 
      </body>
      </html>

5. 头像旋转功能

  • 第一步：在themes\yilia\source\文件夹下增加一个css文件avatarrotation.css用来旋转360度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* avatarrotation.css文件的内容 */

    .left-col #header .profilepic img {
    	/* 控制旋转速度时间*/
    -webkit-transition: -webkit-transform 1.0s ease-out;
    -moz-transition: -moz-transform 1.0s ease-out;
    transition: transform 1.0s ease-out;
    }
    .left-col #header .profilepic img:hover {
    	/* 鼠标经过360% */
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    }

  • 第二步：在themes\yilia\layout\_partial\head.ejs文件中添加进去创建的css文件：

    • 找到<%- partial('css') %>，在它的下面添加代码，把刚才写的文件添加进去

    • 注意：是在它的下面添加，不然旋转速度将不会生效

      1
      2
      3
      4
      <!-- 示例 -->
      <% if (theme.avatarrotation){ %>
      	<link rel="stylesheet" type="text/css" href="/./avatarrotation.css">
      <% } %>

  • 第三步：在theme\_config.yml中添加

    1
    2
    #头像是否旋转(如果不要旋转取false)
    avatarrotation: true

6. 修改默认文章格式

  • 修改根目录下的scaffolds文件夹的post.md，或修改hexo new “article” 的Front-matter的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    title: {{ title }}
    date: {{ date }}
    subtitle:                         #子标题
    categories:                       #文章分类 可以省略    
    toc: true                         #目录 需要安装插件或者主题自带
    reward: true                      #打赏 需要安装插件或者主题自带
    declare: true                     #版权 需要安装插件或者主题自带
    header-img:                       #顶部背景图片
    top: 
    password: 
    abstract: 
    message: 
    tags:                             #标签
本文作者： Chthollists
发布时间： 2020-07-31 16:27:15
最后更新： 2022-01-21 23:09:05
本文标题： Hexo博客搭建系列Chapter5——Hexo博客功能扩展(1/5)
本文链接： https://chthollists.github.io/post/95d7a133.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明作者和出处！
知识共享许可协议
支持

感谢您的支持

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<font color="purple" face="Microsoft YaHei" size= 5><b>待到雄图卷毕 &nbsp;&nbsp;隐居山水里<br>坐看炊烟旖旎 &nbsp;&nbsp;浅池戏双鲤<br> </b></font>