基于NexT主题,设置站点统计信息,摘要,更新时间,打赏,sitemap设置,音乐插件…
主题:NexT主题
内容较多,建议点击右边导航栏查看
优化分类
生成新post
生成新文章
生成新文章。默认模板是
scaffolds/post.md
,由站点配置文件中default_layout
参数设置。使用默认模板时,
下面主题可简化为hexo new <title>
,当文章名有空格时,需用引号,引起来。1hexo new <layout> <title>查看新文章
12hexo ghexo s推送新文章
1hex d
生成草稿
生成草稿。生成文章在sources/_drafts目录下。
1hexo new draft <title>查看草稿。本地预览草稿
12hexo g --drafthexo s --draft发布草稿。移动到
sources/_post
目录下1hexo publish draft <titile>
生成新菜单
生成新菜单即生成新目录
1hexo new page <title>
标题信息:字数统计+阅读时长
在根目录下安装 hexo-wordcount,运行:
1$ npm install hexo-wordcount --save然后在主题的配置文件中,配置如下:
123456#Post wordcount display settings#Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount:item_text: truewordcount: truemin2read: true
底部信息:字数统计
切换到根目录,运行命令
1npm install hexo-wordcount --save然后在
themes/next/layout/_partials/footer.swig
文件尾部加上:1234<div class="theme-info"><div class="powered-by"></div><span class="post-count">博客全站共{{ totalcount(site) }}字</span></div>
底部信息:访问量统计
打开
\themes\next\layout_partials\footer.swig
文件,将下面代码粘贴在第一行:1<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>在最后一行添加显示统计的代码:
12345<div class="theme-info"><div class="powered-by"></div><i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">本站总访问量:<span id="busuanzi_value_site_pv"></span></span></div>在这里有两种不同计算方式的统计代码:
pv的方式,单个用户连续点击n篇文章,记录n次访问量123<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>uv的方式,单个用户连续点击n篇文章,只记录1次访客数
123<span id="busuanzi_container_site_uv">本站总访问量<span id="busuanzi_value_site_uv"></span>次</span>添加之后再执行hexo d -g,然后再刷新页面就能看到效果
一般把访问量与字数统计放在一起,则有:
1234567<div class="theme-info"><div class="powered-by"></div><i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">本站总访问量:<span id="busuanzi_value_site_pv"></span></span><span class="post-meta-divider">|</span><span class="post-count">博客全站共{{ totalcount(site) }}字</span></div>
本文结束显示”感谢阅读”
在路径
\themes\next\layout\_macro
中新建passage-end-tag.swig
文件,并添加以下内容:12345<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>{% endif %}</div>打开
\themes\next\layout\_macro\post.swig
文件,在post-body 之后添加如下代码:12345<div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %}</div>打开主题配置文件
theme/next/_config.yml
,在末尾添加:12passage_end_tag:enabled: true
背景图片:
打开
themes\next\source\css/_custom/custom.styl
。这是一个自定义设置样式的文件,这里的css设置可以覆盖主题原来的。123456body {background:url(/uploads/background3.png);background-repeat: no-repeat;background-attachment:fixed;background-position:50% 50%;}把图片添加到目录themes\next\source\uploads下,如果没有,新建一个。或者采用CDN引用。
设置阅读全文显示摘要图片
摘要配图,文章也有
在文章中使用 手动进行截断
12345<div id="zhaiyao" style="width: 735px;height: 372px;"><img src="image.jpg" style="width: 100%;height: 100%" alt="wechat_jump_game" align=center /></div>摘要内容<!-- more -->参考:阅读全文
摘要配图,文章没有
在custom.styl(hexo/themes/next/source/css/ _custom/custom.styl)里设计一个专有容器
123456789//图片外部的容器方框.out-img-topic {display: block;margin-bottom: 24px;}//图片img.img-topic {width: 100%;}修改
/themes/next/layout/ _macro/post.swig
,在if is_index
与if post.description and theme.excerpt_description
之间添加以下代码:12345{% if post.images %}<div class="out-img-topic"><img src={{ post.images }} class="img-topic"></div>{% endif %}在front-matter中加一个images字段
1images: "/images/摘要配图/"参考:博客摘要配图
备注:我的博客于2018/1/29删除此设置
取消power,theme
- 在主题配置文件,设置powered为false,enable为false即可:123456789# -------------------------------------------------------------# Hexo link (Powered by Hexo).powered: falsetheme:# Theme & scheme info link (Theme - NexT.scheme).enable: false# Version info of NexT after scheme info (vX.X.X).version: false
添加来必力评论
在主题配置文件
_config.yml
中添加如下配置:123# Support for LiveRe comments system.# You can get your uid from https://livere.com/insight/myCode (General web site)livere_uid: your uiduid在安装后可获得
添加jiathis分享
在主题配置文件中,设置jiathis为true。
1jiathis: true尝试没成功
添加打赏
|
|
添加搜索
安装hexo-generator-searchdb。在站点的根目录下执行以下命令:
1npm install hexo-generator-searchdb --save配置站点配置文件,新增以下内容到任意位置:
12345search:path: search.xmlfield: postformat: htmllimit: 10000配置主题配置文件
123# Local searchlocal_search:enable: true配置完先hexo clean,再hexo generate
添加菜单
- hexo new page “photography” //新建摄影菜单
- 在主题配置文件中
menu
下添加photography: /photography || 图标名
,图标名在FontAwesome上找,/photography
是访问路径,修改为http://www.baidu.com 则直接跳转到百度。 - 在hexo>theme>next>languages>zh-Hans.yml中,在menu下添加
photography: 摄影
参考:添加菜单分类
添加更新时间
- 在主题文件设置
display_updated: true
- 在文章开头增加
updated: 2015-12-13 20:18:54
参考:文章更新时间设置
使用MathJax
启用mathjax
123mathjax:enable: truecdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML如果出现字符识别错误,在前面手动加
\
来escape它。
生成站点地图
googlesitemap
- 安装插件
npm install hexo-generator-sitemap --save
打开站点配置文件,添加
12sitemap:path: sitemap.xml输入
hexo g -d
,然后输入chenfengkg.cn/sitemap.xml可看到生成的文件- 登陆Webmaster Central,点击
ADD A PROPERTY
输入博客网址 - 验证网页所有权,使用
HTML tag
验证。将元数据添加到theme/next/layout/_partial/head.swig
这个文件下,然后hexo g -d
,然后点击Verify验证。 - 点击提交网页,点击sitmap,然后点击ADD/TEST SITMAP输入sitemap.xml的地址,然后点击提交。
参考:如何向google提交sitemap
百度sitemap
- 安装插件
npm install hexo-generator-baidu-sitemap
打开站点配置文件,添加
12baidusitemap:path: baidusitemap.xml输入
hexo g -d
,然后输入chenfengkg.cn/baidusitemap.xml可看到生成的文件- 登录百度站长平台,点击 网页抓取-> 链接提交,在自动提交中选择 sitemap,输入域名+ baidusitemap.xml。
推送方式,自动推送。在主题配置文件中修改:
1baidu_push: true然后等待
参考:提交 sitemap 及解决百度爬虫无法抓取 GitHub Pages 链接问题
让Baidu和Google收录Hexo博客
添加robot.txt
登录百度站长平台 , 点击 网页抓取->Robots-> 检测并更新。 这样百度爬虫会检测并更新 robots.txt,
并会在新的 ip 地址上抓取内容,不然还是会抓取原来的 GitHub 上的 ip 地址,导致抓取失败。更新完成
后,我们再次在抓取诊断中测试,这时应该就会抓取成功了。
tips:如果之前已经上传过 robots.txt 导致更新不成功的话,可以试着删除 robots.txt, 重新上传。
- 在sources目录下创建robots.txt文件
在robots.txt中添加:
12345678910111213User-agent: *Disallow: /vendors/Disallow: /js/Disallow: /css/Disallow: /fonts/Disallow: /vendors/Disallow: /fancybox/Allow: /Allow: /archives/Allow: /categories/Allow: /tags/Sitemap: http://chenfengkg.cn/sitemap.xmlSitemap: http://chenfengkg.cn/baidusitemap.xmlhexo g -d
提交
参考:hexo优化
Sitemap和Robots.txt SEO优化技巧
小技巧
- 插件生成的 sitemap 的文章链接,都是以站点配置文件中的 url 为基础的,如果将博客绑定了域名,最好将 url 字段填写为绑定的域名。
- 不想生成 sitemap 的页面,可在页面最上方以 —- 分割的区域内,即 Front-matter 中,添加代码 sitemap: false。
文章链接优化
- 去除URL中的时间
Hexo 默认的文章链接形式为 domain/year/month/day/postname,分级较多,造成 URL较长,不利于搜索引擎检索。编辑站点配置文件_config.yml,将 permalink 字段改为 permalink: :title/。将其改为 domain/postname的形式。 也可以将permalink字段改为 permalink: :year-:month-:day/:title/,变成domain/year-month-day/postname 形式。
添加音乐
网易云音乐。网易云音乐->某首歌曲->生成外链播放器,在
layout\_macro\sidebar.swig
文件,在<section></section>
标签下添加:1234<div id="music163player"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66"></iframe></div>使用html标签
1<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>使用插件
安装插件npm install hexo-tag-aplayer --save
,在文章中添加1{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}歌单:
1234567891011121314151617181920212223{% aplayerlist %}{"autoplay": false,"showlrc": 3,"mutex": true,"music": [{"title": "歌曲名","author": "歌手名","url": "https://什么什么什么.mp3","pic": "https://封面图.jpg","lrc": "https://歌词.lrc"},{"title": "歌曲名","author": "歌手名","url": "https://什么什么什么.mp3","pic": "https://封面图.jpg","lrc": "https://歌词.lrc"}]}{% endaplayerlist %}
加密文件
- 安装加密插件
npm install hexo-bolg-encrypt --save
启用插件。在站点配置文件中添加
1234# Security##encrypt:enable: true加密文章。
123456789---title: hello worlddate: 2016-03-30 21:18:02tags:- fdsafsdafpassword: Mikeabstract: Welcome to my blog, enter password to read.message: Welcome to my blog, enter password to read.---
在首页隐藏指定的文章
修改文件。修改文件theme/next/layout/index.swig,定位修改 post_template.render(post, true)为:
123{% if post.visible !== 'hide'%}{{ post_template.render(post, true) }}{% endif %}设置文章
1234567title: 关于Hexo next主题如何在首页隐藏指定的文章date: 2016-05-08 22:21:29tags:……categories: Notes-随笔visible: hide 这里如果加上hide则该文章就不会在文章首页显示,如果留空则表示默认显示
设置cnd加速前端
在主题配置文件
theme/next/_config.yml
,修改vendor:12345678910111213141516171819202122vendors:# Internal path prefix. Please do not edit it._internal: lib# Internal version: 2.1.3jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js# Internal version: 2.1.5# Fancybox: http://fancyapps.com/fancybox/fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.jsfancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css# Internal version: 1.0.6fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js# Internal version: 1.9.7lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js# Internal version: 1.2.1velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js# Internal version: 1.2.1velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js# Internal version: 0.7.9ua_parser: //cdn.bootcss.com/UAParser.js/0.7.12/ua-parser.min.js# Internal version: 4.4.0# http://fontawesome.io/fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css
添加留言板
打开主题配置文件,即
Hexo/themes/next/_config.yml
在 menu 下添加board 字段:1board: /board/ || book执行
hexo new page board
- 在hexo>theme>next>languages>zh-Hans.yml中,在menu下添加
board: 留言
参考:hexo怎么添加留言板?
网站分析
添加google analytics,在主题配置文件中设置:
1google_analytics: your track id
实践问题
图片存放地点
解决办法:采用CDN引用,CDN选择cloudinary
参考:Hexo博客搭建之在文章中插入图片
CNAME重定向无效
原因:CNAME文件位置放错
解决:将CNAME文件放在sources/目录下,与_posts目录并列
百度无法抓取github上的文章
原因:github拒绝百度的抓取
解决方法:同时部署到github和coding
- 注册coding,新建项目,配置SSH
在站点配置文件修改部署配置:
1234567deploy:- type: gitrepo: https://github.com/chenfengkg/chenfengkg.github.io.gitbranch: master- type: gitrepo: https://git.coding.net/chenfengk/blog-my.gitbranch: masterhexo clean
,hexo g-d
将博客部署到coding上- 点击项目中的pages服务页面,部署来源选择master分支,与站点文件要一致,然后填写自定义域名。
- DNS配置,登陆阿里云,点击用户名下管理控制找到云解析服务。
在解析codingnet时选择默认,解析github时选择世界 修改主题目录下
layout/_partials/footer.swig
文件,去除广告。1234<div class="theme-info">{{ __('Hosted by') }}<a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></div>还需要在coding主页项目page页面设置,勾选已放置Hosted by Coding Pages。可查看coding帮助文档。
将博客同时部署到 github 与 coding
coding.net绑定自定义域名
hexo部署远程库
coding帮助文档
百度链接提交抓取失败,ip为以前githubip
原因:以前博客放在github上,现在采用coding.net作为国内访问,github作为国外访问。
解决办法:用抓取诊断工具抓取,ip出错点击报错。
参考:百度站点ip变更
hexo git部署警告 warning: LF will be replaced by CRLF
Git会把LF替换为CRLF,不重要, 可以禁用此功能。在MinGW窗口中输入:
参考:Windows git “warning: LF will be replaced by CRLF”
摘要图按比例缩放,图片不一样,各摘要大图片小不一样
解决方法,添加一个div,用image填充div:
参考:用image填充div
摘要图片大小不一样
解决办法:用算法修改某个文件夹下所有文件的尺寸
opencv修改图片大小