基于Hexo的NexT主题---从入门到入土

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 15k | 阅读时长 ≈ 14 分钟

前言

本篇文章主要是针对nexT主题的优化说明，使用hexo其他主题的童靴请绕道~~
整理一下大概优化：
1.标题部分优化，颜色样式；
2.设置博客文章连接为year/month/day/title.html格式
3.Menu增加关于、标签、分类、互动、搜索菜单
4.禁用关于、标签、分类菜单评论功能
5.添加RSS
6.设置背景图片
7.Canvas_nest动态背景
8.图片快速加载设置
9.微信支付宝打赏功能
10.点击出现桃心效果
11.主页文章添加阴影效果
12.设置代码高亮
13.顶栏背景色
14.底栏背景色
15.修改文章内链接文本样式
16.修改文章底部标签样式
17.在文章末尾添加“文章结束”标记
18.设置头像
19.网站底部加上访问量
20.网站底部字数统计
21.网站底部添加网站运行时间
22.网站底部添加动态桃心
23.底部隐藏由Hexo强力驱动、主题–NexT.Mist
24.设置网站的图标Favicon
25.实现文章文字统计功能和阅读时长
26.加来必力云跟帖功能
27.去掉底部重复字数统计
28.修改字体大小
29.侧边栏社交小图标设置
30.添加侧栏推荐阅读
31.修改侧边栏背景图片
32.添加侧边栏音乐
33.修改侧边栏文字颜色
34.在文章底部增加版权信息
35.Hexo博客添加站内搜索
36.修改选中字符的颜色
37.添加aplay音乐播放
38.添加博客左下角门神(看门🐶)
39.增加了3D库three_waves，默认关闭
40.增加了canvas页面丝带(话说这玩意真的很吃cpu，一开我的mac就铁板烧了)
41.增加了首页pace加载进度
42.增加图片懒加载lazyload
43.增加了fancybox
44.增加了fastclick解决延迟问题
45.增加了gulp压缩网页css js样式
46.截断首页文章内容
47.代码复制功能

hexo目录结构

主目录结构

image.png

_config.yml

全局配置文件，网站的很多信息都在这里配置，诸如网站名称，副标题，描述，作者，语言，主题，部署等等参数。

package.json

hexo框架的参数和所依赖插件。

scaffolds

scaffolds是“脚手架、骨架”的意思，当你新建一篇文章（hexo new ‘title’）的时候，hexo是根据这个目录下的文件进行构建的。基本不用关心。

source

这个目录很重要，新建的文章都是在保存在这个目录下的._posts，需要新建的博文都放在_posts目录下。_posts目录下是一个个 markdown 文件。你应该可以看到一个 hello-world.md 的文件，文章就在这个文件中编辑。_posts 目录下的md文件，会被编译成html文件，放到 public （此文件现在应该没有，因为你还没有编译过）文件夹下。里面还有一个重要文件夹：images，是用来存放博文的图片的，这里建议使用七牛云图床来存储图片，因为可以更快的加载图片。同时强烈建议大家用一款hexo—client来进行可视化博客的书写，一站式服务，支持七牛云图床，接好传送门：hexoclient。

themes

网站主题目录，我用的就是nexT主题。

node_modules

hexo依赖的组件都在其中。

主题目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _header.swig    #头部样式
|   |   ├── _sidebar.swig   #侧边栏样式
|   ├── _macro        #可以自己修改的模板，覆盖原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial       #局部的布局
|   |   ├── head       #头部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主页面模板
|   ├── index.swig     #主页面模板
|   ├── page           #页面模板
|   └── tag.swig       #tag模板
├── scripts            #script源码
|   ├── tags           #tags的script源码
|   ├── marge.js       #页面模板
├── source             #源码
|   ├── css            #css源码
|   |   ├── _common    #*.styl基础css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字体
|   ├── images         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

高度定制优化篇

标题部分优化，颜色样式

首先你要确定你是主题中的哪个scheme：Muse、Mist、Pisces、Gemini，我的是Mist,所以我就去themes/nexT/source/css/_schemes/Mist/_header.styl下，添加以下代码：

1
2
3
4
5
//可以加图片，也可以自己调色彩
.header { 
  //background: url('/images/headbg.jpg') repeat !important; 
  background: rgba(#EBF2EA,1) none repeat scroll !important; 
}

设置背景图片

默认禁用，可以在themes/nexT/source/css/_custom/custon.styl文件中启用

1
2
3
4
5
6
7
8
//设置背景图片
body {
    background:url(http://pw5u1sbg2.bkt.clouddn.com/145676.jpg);
    background-repeat: repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:cover;
}

Canvas_nest动态背景

背景的几何线条是采用的nest效果, 一个基于html5 canvas绘制的网页背景效果, 非常赞！来自github的开源项目canvas-nest

特性

  • 不依赖任何框架或者内库，比如不依赖jQuery，使用原生的javascript
  • 非常小，只有1.66kb，如果开启gzip，可以更小
  • 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定

    说明

  • color：线条颜色，默认： ‘0,0,0’ ；三个数字分别为(R,G,B)，这里推荐一个颜色采集器：ColorSlurp，在AppStore中就可以搜到
  • opacity：线条透明度（0~1），默认: 0.5
  • count：线条的总数量， 默认：150
  • zIndex：背景的z-index属性，css属性用于控制所在层的位置，默认：-1

    不足

    内存占用过高

    做法

    直接找到主题配置文件，将canvas改为true即可。

    RSS

    在你的hexo站点目录下：
    1
    $ npm install hexo-generator-feed --save

打开站点目录下的_config.yml:

1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

来必力评论系统等第三方插件

登录 来必力 ，获取LiveRe UID，编辑主题配置文件，编辑livere_uid字段，将id填入即可，更多第三方集成插件可见：nexT官网，包括评论系统、数据统计与分析、内容分享服务、搜索服务等等。

打赏功能

nexT集成了支付宝微信打赏功能，直接在主题配置文件搜索wechat或者alipay即可,然后跟上自己的微信和支付宝的收钱码图片地址即可。

点击出现桃心效果

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
  • 新建 clicklove.js 文件并且将以上代码复制进去，然后保存。
  • 将 clicklove.js文件放到路径 /themes/next/source/js/src 里面
  • 然后打开 \themes\next\layout\_layout.swig 文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：
    1
    2
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/clicklove.js"></script>

主页文章添加阴影效果

打开 themes/next/source/css/_custom/custom.styl，向里面加代码:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

代码高亮

直接在主题配置文件搜索 highlight_theme：

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright

顶部底部背景色改变

首先你要确定你是主题中的哪个scheme：Muse、Mist、Pisces、Gemini，我的是Mist,所以我就themes/nexT/source/css/_schemes/Mist/_header.styl下，将颜色进行修改即可。
底部颜色则在themes/nexT/source/css/_schemes/Mist/index.styl中进行修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Footer
// --------------------------------------------------
.footer {
  margin-top: 80px;
  padding: 10px 0;
  //background: url('/images/headbg.jpg') repeat !important; 
  background: rgba(#EBF2EA,1) none repeat scroll !important;
  color: $grey-dim;
}
.footer-inner {
  margin: 0 auto;
  text-align: left;

  +mobile() {
    width: auto;
    text-align: center;
  }
}

修改文章内文本连接样式

打开 themes/next/source/css/_custom/custom.styl,添加代码：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

修改网页底部

  • 在图标库中找到你自己喜欢的图标, 修改桃心,打开 themes/next_config.yml ,搜索关键字 authoricon,替换图标名：

    1
    2
    # icon between year and author @Footer
    authoricon: id-card

  • 隐藏网页底部 Hexo 强力驱动

打开主题配置文件,搜索关键字 copyright ，如下:

1
2
# Footer `powered-by` and `theme-info` copyright
copyright: false

添加文章结束标记

在themes/next/layout/_macro/post.swig中, 在wechat-subscriber.swig之前添加如下代码:

1
2
3
<div style="text-align:center;color: #ccc;font-size:14px;">
---------------- The End ----------------
</div>

统计功能，统计功能,显示文章字数统计,阅读时长,总字数

在站点的根目录下：

1
$ npm i --save hexo-wordcount

打开 themes/next/_config.yml ，搜索关键字 post_wordcount：

1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: true
  separated_meta: true

设置头像

打开 themes/next/_config.yml ，搜索关键字 avatar：

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: http://pw5u1sbg2.bkt.clouddn.com/avatar.png  #/images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

底部添加访问量和字数统计

运用第三方插件，见nexT官网，推荐百度统计和不蒜子统计。

底部添加运行时间

找到\themes\next\layout\_partials\下面的footer.swig文件，在末尾添加所示代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="run_time" style=" text-align:center;">
  <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
  <script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("08/06/2019 19:00:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
    setInterval("createtime()",250);
  </script>
</div>

底部添加红心

打开 themes/next/_config.yml ，搜索关键字 footer：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2019

  # visitors count
  counter: true  
  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

添加侧边栏音乐框

去往网易云音乐搜索喜欢的音乐，点击生成外链播放器， 复制代码直接放到博文末尾即可，height设为0可隐藏播放器，但仍然可以播放音乐，auto设成0可手动播放，默认是1自动播放，可把代码放到themes/next/layout/_custom/sidebar.swig文件里，播放器会显示在站点预览中,示例代码如下：

1
2
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 
src="//music.163.com/outchain/player?type=0&id=2588481240&auto=1&height=90"></iframe>

添加aplayer音乐播放

由于我想在单独的页面加入歌单，所以额外创了个页面，也可以直接在文章中插入，原理都是一样的。

  • 新建页面，命名为guestbook：

    1
    hexo new page guestbook

  • 这时候在 /Hexo/source 文件夹下会生成一个guestbook文件夹，打开里面的index.md，示例如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: 留言互动
    date: 2019-08-15 12:18:09
    type: "guestbook"
    ---

    <div align="center"> 
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558956326532&di=82cc9907fc903cfb978a35206986d3f6&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160809%2F31283a3e2d7f411492d3fb27297180ec_th.jpg" />
    </div>

    [//]: #(aplay音频播放https://github.com/MoePlayer/hexo-tag-aplayer)
    {% meting "2331951308" "netease" "playlist" "autoplay" "mutex:false" "order:random" "listmaxheight:250px" "preload:none"  "theme:#f7f7f7"%}

meting中配置参数含义如下：

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启固定模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
theme #ad7a86 播放器风格色彩设置
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto

  • 打开主题_config.yml文件，在menu下新建一个名为guestbook的类，完成后如下所示：

    1
    2
    3
    4
    5
    6
    7
    menu:
      home: / || home
      tags: /tags/ || tags
      categories: /categories/ || bookmark
      archives: /archives/ || archive
      about: /about/ || user
      互动: /guestbook/ || comments

  • 打开/Hexo/themes/hexo-theme-next/languages/zh-Hans.yml，添加对应的中文翻译：

    1
    2
    menu:
      guestbook: 互动

  • 至此，歌单页面创建完成，现在只需要在站点配置文件中开启meting模式，在_config.yml中搜索meting：

    1
    2
    aplayer:
      meting: true

Tip
同一个歌单不能做到实时刷新，需要24小时后aplayer才会自动更新缓存

添加博客左下角门神

安装依赖:

1
2
npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-wanko

站点配置添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-helper-live2d配置, 参考https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    scale: 1
    use: live2d-widget-model-wanko
  display:
    superSample: 2 # 超采样等级
    width: 100 
    height: 100
    position: left # 位置
  mobile:
    show: false
  react:
    opacityDefault: 0.9 # 默认透明度
    opacityOnHover: 0.5 # 鼠标移上透明度

增加首页pace加载进度

打开主题配置文件：

1
2
3
4
5
6
7
8
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-bounce

增加图片懒加载lazyload

打开主题配置文件：

1
2
3
# Vanilla JavaScript plugin for lazyloading images.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

增加fancybox和fastclick解决延迟问题

打开主题配置文件：

1
2
3
4
5
6
7
8
9
# Fancybox. There is support for old version 2 and new version 3.
# Choose only one variant, do not need to install both.
# To install 2.x: https://github.com/theme-next/theme-next-fancybox
# To install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

# Polyfill to remove click delays on browsers with touch UIs.
# Dependencies: https://github.com/theme-next/theme-next-fastclick
fastclick: true

截断首页文章内容

打开主题配置文件，搜索auto_excerpt：

1
2
3
4
5
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

代码复制功能

  • 复制该网页的代码，传送门：clipboard.min.js，然后在themes\next\source\js\src下新建clipboard.min.js文件，将以上内容复制进去即可；

  • 在themes\next\source\js\src目录下，创建clipboard-use.js，文件内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
      /*页面载入完成后，创建复制按钮*/
      !function (e, t, a) { 
        /* code */
        var initCopyCode = function(){
          var copyHtml = '';
          copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
          //fa fa-globe可以去字体库替换自己想要的图标
    copyHtml += '  <i class="fa fa-clipboard"></i><span>copy</span>';
          copyHtml += '</button>';
          $(".highlight .code pre").before(copyHtml);
          new ClipboardJS('.btn-copy', {
              target: function(trigger) {
                  return trigger.nextElementSibling;
              }
          });
        }
        initCopyCode();
      }(window, document);

  • 在themes\next\source\css\_custom\custom.styl样式文件中添加下面代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    //代码块复制按钮
    .highlight{
      //方便copy代码按钮（btn-copy）的定位
      position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc,#eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy{
      opacity: 1;
    }

  • 在themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签（）之前添加）：

    1
    2
    3
    <!-- 代码块复制功能 -->
    <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
    <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

尝试了但未实现的功能

1.用mob_share的app_key未能实现share的功能，经过其官方人员电话沟通，已经不再支持pc端博客服务
2.aplay音乐播放歌单，不能做到实时更新歌单，究其原因是其api设置了24小时缓存，同一个歌单24小时内不会发生改变

非常有益的网址

Thank you for your accept. mua！
-------------本文结束感谢您的阅读-------------