Hexo主题我还是喜欢next,主要是简洁,我是初学者所以暂时做简单的改动。_config.yml  来达成。我安装的next版本是v7.7.1。
Next7.0版本注意 参考:小丁的博客 
选择next主题的布局 在主题配置文件中搜索Scheme
1 2 3 4 5 # Schemes #scheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini 
我选择的是Gemini,大家可以切换选择,找到自己喜欢的布局。
首页文章不展示全文显示摘要 
官方公告:auto_excerpt 可以自动截断文章内容作为摘要。此功能不是一个 Hexo 主题应当负责的,这为主题的维护者带来了太大压力。自 7.6.0 版本开始,此功能被移除,请自行安装第三方插件,或阅读 Hexo 有关文档。当然,我们仍然建议通过 <!-- more --> 来精确控制 Read More 的位置。
 
因此,这个功能在新版的 NexT 已经被废弃了,大家可以直接在文章中添加 <!-- more --> 来精确控制摘要内容。
页面菜单 next默认只有两个页面菜单,首页home 和归档archives ,搜索menu 我们按需选择。
1 2 3 4 5 6 7 8 9 menu:   home: / || home #首页   #about: /about/ || user #关于   #tags: /tags/ || tags #标签   #categories: /categories/ || th #分类   archives: /archives/ || archive #归档   #schedule: /schedule/ || calendar #日程表   #sitemap: /sitemap.xml || sitemap #站点地图   #commonweal: /404/ || heartbeat #公益404 
斜线// 之间的文字是该页面的名称,除了归档 其他的如关于 about、标签 tags和分类 categories是需要自行添加页面文件夹的。
在博客根目录下输入命令:;
1 2 3 hexo new page about hexo new page tags hexo new page categories 
会在/source 下对应生成页面文件夹和里面的index.md 。对于tags和categories需要修改*index.md 
内容如下:
1 2 title: 分类 #页面的头部显示 type: categories 
1 2 title: 标签 #页面的头部显示 type: tags 
添加站内搜索按钮 
1 npm install hexo-generator-searchdb --save 
1 2 3 4 5 6 #添加站内搜索按钮 search:   path: search.xml   field: post   format: html   limit: 10000 
1 2 local_search:   enable: true 
设置网站图标”favicon.ico” 找自己喜欢的ico图标文件,32x32,修改为favicon.ico 。
然后把图标文件放在/themes/next/source/images里面。
修改next配置文件,搜索favicon :
1 2 3 4 5 6 7 favicon:   #原始small: /images/favicon-16x16-next.png   #原始medium: /images/favicon-32x32-next.png   medium: /images/favicon.ico   small: /images/favicon.ico   apple_touch_icon: /images/apple-touch-icon-next.png   safari_pinned_tab: /images/logo.svg 
添加字数统计及阅读时长 安装hexo-symbols-count-time 在博客文件夹里执行命令:
1 npm install hexo-symbols-count-time --save 
修改相关配置文件 
1 2 3 4 5 6 7 symbols_count_time:  #文章内是否显示   symbols: true   time: true  # 网页底部是否显示   total_symbols: true   total_time: true 
在Next主题 配置文件修改
搜索symbols_count_time 
 
1 2 3 4 5 6 symbols_count_time:   separated_meta: true  # 是否换行显示 字数统计 及 阅读时长   item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示   item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示   awl: 4   wpm: 275 
Next的其他小功能 代码块增加一件复制 该功能next主题已经内置,我们只要打开就行,主题配置文件搜索copy_button :
1 2 3 4 5 # Add copy button on codeblock copy_button:   enable: true #是否开启复制功能   # Show text copy result. #是否显示提示的复制结果   show_result: true 
复制模式mac主题 就在上面一件复制代码的下面
1 2 3 4 5 6 copy_button:   enable: true #原始false   # Show text copy result.   show_result: true #原始false   # Available values: default | flat | mac   style: mac 
增加打赏功能 这个也是next具备了。先把需要的收款码放到/themes/next/source/images里面。
搜索reward_settings 修改:
1 2 3 4 5 6 7 8 9 10 reward_settings:   # If true, reward will be displayed in every article by default.   enable: true   animation: true   #comment: Donate comment here. reward:   wechatpay: /images/wechatpay.png   alipay: /images/alipay.png   #bitcoin: /images/bitcoin.png 
增加版权信息 搜索creative_commons :
1 2 3 4 5 creative_commons:   license: by-nc-sa   sidebar: false #首页边栏是否显示   post: true #文章底部是否显示   language: 
修改标签样式 默认的标签前面是一个#号,我们把它改成标签的符号并删除下划线:
打开/themes/next/layout/_macro/post.swig ,搜索post-footer 
找到:
1 {%- set tag_indicate = '#' %} 
把# 修改为:<i class="fa fa-tag"></i>,这个样子:
1 2 3 4 5 6 <footer class="post-footer">   {%- if post.tags and post.tags.length %}     {%- if theme.tag_icon %}       {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}     {% else %}       {%- set tag_indicate = '<i class="fa fa-tag"></i>' %} 
添加本站运行时间 修改/blog/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 20 <br /> #换行 <!-- 网站运行时间的设置 --> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script>     var now = new Date();     function createtime() {         var grt= new Date("04/21/2019 15:54:40");//此处修改你的建站时间或者网站上线时间         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> 
添加站点访问人数和总访问量 修改next主题配置文件,搜索busuanzi_count 
1 2 3 4 5 6 7 8 busuanzi_count:   enable: true   total_visitors: true   total_visitors_icon: user   total_views: true   total_views_icon: eye   post_views: true   post_views_icon: eye 
代码块主题 Next主题内置了tomorrow代码块高亮主题,一共有五个,可以去Tomorrow 查看预览效果,搜索highlight_theme ,在highlight_theme:中改成自己想要的即可。
1 2 3 4 5 codeblock:   # Code Highlight theme   # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic   # See: https://github.com/chriskempson/tomorrow-theme   highlight_theme: night #原始normal 
页面加载条 Next主题使用的是PACE 功能,有多种加载动画可选。
pace-theme-big-counter
 
需要安装pace模块到theme/next/source/lib 文件夹下。
1 2 cd themes/next git clone https://github.com/theme-next/theme-next-pace source/lib/pace 
然后修改next主题配置文件,搜索pace 定位到如下代码:
1 2 3 4 5 6 pace:   enable: true #原始false   # Themes list:   # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple   # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal   theme: minimal 
动态背景 Next主题默认提供了三种动态背景
按需选择,我选择的是canvas-nest,需要安装模块到theme/next/source/lib 文件夹下。
1 2 cd themes/next git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest 
然后修改next主题配置文件,搜索Canvas-nest 定位到如下代码:
1 2 3 4 5 6 7 canvas_nest:   enable: true   onmobile: true # Display on mobile or not   color: "0,0,255" # RGB values, use `,` to separate   opacity: 0.5 # The opacity of line: 0~1   zIndex: -1 # z-index property of the background   count: 99 # The number of lines