Hexo主题我还是喜欢next,主要是简洁,我是初学者所以暂时做简单的改动。 主要通过修改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-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/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