博客二之博客美化

基于NexT主题,设置站点统计信息,摘要,更新时间,打赏,sitemap设置,音乐插件…

主题:NexT主题
内容较多,建议点击右边导航栏查看

优化分类

生成新post

生成新文章

  1. 生成新文章。默认模板是scaffolds/post.md,由站点配置文件中default_layout参数设置。使用默认模板时,
    下面主题可简化为hexo new <title>,当文章名有空格时,需用引号,引起来。

    1
    hexo new <layout> <title>
  2. 查看新文章

    1
    2
    hexo g 
    hexo s
  3. 推送新文章

    1
    hex d

生成草稿

  1. 生成草稿。生成文章在sources/_drafts目录下。

    1
    hexo new draft <title>
  2. 查看草稿。本地预览草稿

    1
    2
    hexo g --draft
    hexo s --draft
  3. 发布草稿。移动到sources/_post目录下

    1
    hexo publish draft <titile>

生成新菜单

  1. 生成新菜单即生成新目录

    1
    hexo new page <title>

    如何生成一篇新的post

标题信息:字数统计+阅读时长

  1. 在根目录下安装 hexo-wordcount,运行:

    1
    $ npm install hexo-wordcount --save
  2. 然后在主题的配置文件中,配置如下:

    1
    2
    3
    4
    5
    6
    #Post wordcount display settings
    #Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
    item_text: true
    wordcount: true
    min2read: true

底部信息:字数统计

  1. 切换到根目录,运行命令

    1
    npm install hexo-wordcount --save
  2. 然后在themes/next/layout/_partials/footer.swig文件尾部加上:

    1
    2
    3
    4
    <div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
    </div>

底部信息:访问量统计

  1. 打开\themes\next\layout_partials\footer.swig文件,将下面代码粘贴在第一行:

    1
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    在最后一行添加显示统计的代码:

    1
    2
    3
    4
    5
    <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>
  2. 在这里有两种不同计算方式的统计代码:
    pv的方式,单个用户连续点击n篇文章,记录n次访问量

    1
    2
    3
    <span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
    </span>

    uv的方式,单个用户连续点击n篇文章,只记录1次访客数

    1
    2
    3
    <span id="busuanzi_container_site_uv">
    本站总访问量<span id="busuanzi_value_site_uv"></span>次
    </span>

    添加之后再执行hexo d -g,然后再刷新页面就能看到效果

  3. 一般把访问量与字数统计放在一起,则有:

    1
    2
    3
    4
    5
    6
    7
    <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>

本文结束显示”感谢阅读”

  1. 在路径 \themes\next\layout\_macro 中新建passage-end-tag.swig文件,并添加以下内容:

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
    </div>
  2. 打开\themes\next\layout\_macro\post.swig文件,在post-body 之后添加如下代码:

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
    </div>
  3. 打开主题配置文件theme/next/_config.yml,在末尾添加:

    1
    2
    passage_end_tag:
    enabled: true

背景图片:

  1. 打开themes\next\source\css/_custom/custom.styl。这是一个自定义设置样式的文件,这里的css设置可以覆盖主题原来的。

    1
    2
    3
    4
    5
    6
    body {
    background:url(/uploads/background3.png);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    }

    把图片添加到目录themes\next\source\uploads下,如果没有,新建一个。或者采用CDN引用。

设置阅读全文显示摘要图片

摘要配图,文章也有

  1. 在文章中使用 手动进行截断

    1
    2
    3
    4
    5
    <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 -->

    参考:阅读全文

摘要配图,文章没有

  1. 在custom.styl(hexo/themes/next/source/css/ _custom/custom.styl)里设计一个专有容器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //图片外部的容器方框 
    .out-img-topic {
    display: block;
    margin-bottom: 24px;
    }
    //图片
    img.img-topic {
    width: 100%;
    }
  2. 修改/themes/next/layout/ _macro/post.swig,在if is_indexif post.description and theme.excerpt_description
    之间添加以下代码:

    1
    2
    3
    4
    5
    {% if post.images %}
    <div class="out-img-topic">
    <img src={{ post.images }} class="img-topic">
    </div>
    {% endif %}
  3. 在front-matter中加一个images字段

    1
    images: "/images/摘要配图/"

    参考:博客摘要配图
    备注:我的博客于2018/1/29删除此设置

取消power,theme

  1. 在主题配置文件,设置powered为false,enable为false即可:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # -------------------------------------------------------------
    # Hexo link (Powered by Hexo).
    powered: false

    theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

添加来必力评论

  1. 在主题配置文件_config.yml 中添加如下配置:

    1
    2
    3
    # Support for LiveRe comments system.
    # You can get your uid from https://livere.com/insight/myCode (General web site)
    livere_uid: your uid

    uid在安装后可获得

添加jiathis分享

  1. 在主题配置文件中,设置jiathis为true。

    1
    jiathis: true

    尝试没成功

添加打赏

1
2
3
4
reward_comment: 说不定手滑呢!
wechatpay: http://res.cloudinary.com/chenfengkg/image/upload/v1514352686/blog/wechat.png
alipay: http://res.cloudinary.com/chenfengkg/image/upload/v1514352691/blog/alipay.jpg
#bitcoin: /images/bitcoin.png

添加搜索

  1. 安装hexo-generator-searchdb。在站点的根目录下执行以下命令:

    1
    npm install hexo-generator-searchdb --save
  2. 配置站点配置文件,新增以下内容到任意位置:

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  3. 配置主题配置文件

    1
    2
    3
    # Local search
    local_search:
    enable: true

    配置完先hexo clean,再hexo generate

添加菜单

  1. hexo new page “photography” //新建摄影菜单
  2. 在主题配置文件中menu下添加photography: /photography || 图标名,图标名在FontAwesome上找,/photography是访问路径,修改为http://www.baidu.com 则直接跳转到百度。
  3. 在hexo>theme>next>languages>zh-Hans.yml中,在menu下添加photography: 摄影
    参考:添加菜单分类

添加更新时间

  1. 在主题文件设置display_updated: true
  2. 在文章开头增加updated: 2015-12-13 20:18:54
    参考:文章更新时间设置

使用MathJax

  1. 启用mathjax

    1
    2
    3
    mathjax:
    enable: true
    cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

    如果出现字符识别错误,在前面手动加\来escape它。

生成站点地图

googlesitemap

  1. 安装插件npm install hexo-generator-sitemap --save
  2. 打开站点配置文件,添加

    1
    2
    sitemap:
    path: sitemap.xml
  3. 输入 hexo g -d,然后输入chenfengkg.cn/sitemap.xml可看到生成的文件

  4. 登陆Webmaster Central,点击ADD A PROPERTY输入博客网址
  5. 验证网页所有权,使用HTML tag验证。将元数据添加到theme/next/layout/_partial/head.swig这个文件下,然后hexo g -d,然后点击Verify验证。
  6. 点击提交网页,点击sitmap,然后点击ADD/TEST SITMAP输入sitemap.xml的地址,然后点击提交。
    参考:如何向google提交sitemap

百度sitemap

  1. 安装插件npm install hexo-generator-baidu-sitemap
  2. 打开站点配置文件,添加

    1
    2
    baidusitemap:
    path: baidusitemap.xml
  3. 输入 hexo g -d,然后输入chenfengkg.cn/baidusitemap.xml可看到生成的文件

  4. 登录百度站长平台,点击 网页抓取-> 链接提交,在自动提交中选择 sitemap,输入域名+ baidusitemap.xml。
  5. 推送方式,自动推送。在主题配置文件中修改:

    1
    baidu_push: true
  6. 然后等待
    参考:提交 sitemap 及解决百度爬虫无法抓取 GitHub Pages 链接问题
    让Baidu和Google收录Hexo博客

添加robot.txt

登录百度站长平台 , 点击 网页抓取->Robots-> 检测并更新。 这样百度爬虫会检测并更新 robots.txt,
并会在新的 ip 地址上抓取内容,不然还是会抓取原来的 GitHub 上的 ip 地址,导致抓取失败。更新完成
后,我们再次在抓取诊断中测试,这时应该就会抓取成功了。
tips:如果之前已经上传过 robots.txt 导致更新不成功的话,可以试着删除 robots.txt, 重新上传。

  1. 在sources目录下创建robots.txt文件
  2. 在robots.txt中添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    User-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.xml
    Sitemap: http://chenfengkg.cn/baidusitemap.xml
  3. hexo g -d提交
    参考:hexo优化
    Sitemap和Robots.txt SEO优化技巧

小技巧

  1. 插件生成的 sitemap 的文章链接,都是以站点配置文件中的 url 为基础的,如果将博客绑定了域名,最好将 url 字段填写为绑定的域名。
  2. 不想生成 sitemap 的页面,可在页面最上方以 — 分割的区域内,即 Front-matter 中,添加代码 sitemap: false。

文章链接优化

  1. 去除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 形式。

添加音乐

  1. 网易云音乐。网易云音乐->某首歌曲->生成外链播放器,在layout\_macro\sidebar.swig文件,在<section></section>标签下添加:

    1
    2
    3
    4
    <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>
  2. 使用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>
  3. 使用插件
    安装插件npm install hexo-tag-aplayer --save,在文章中添加

    1
    {% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

    歌单:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    {% 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 %}

加密文件

  1. 安装加密插件npm install hexo-bolg-encrypt --save
  2. 启用插件。在站点配置文件中添加

    1
    2
    3
    4
    # Security
    ##
    encrypt:
    enable: true
  3. 加密文章。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: hello world
    date: 2016-03-30 21:18:02
    tags:
    - fdsafsdaf
    password: Mike
    abstract: Welcome to my blog, enter password to read.
    message: Welcome to my blog, enter password to read.
    ---

在首页隐藏指定的文章

  1. 修改文件。修改文件theme/next/layout/index.swig,定位修改 post_template.render(post, true)为:

    1
    2
    3
    {% if post.visible !== 'hide'%}
    {{ post_template.render(post, true) }}
    {% endif %}
  2. 设置文章

    1
    2
    3
    4
    5
    6
    7
    title: 关于Hexo next主题如何在首页隐藏指定的文章
    date: 2016-05-08 22:21:29
    tags:


    categories: Notes-随笔
    visible: hide 这里如果加上hide则该文章就不会在文章首页显示,如果留空则表示默认显示

    关于Hexo next主题如何在首页隐藏指定的文章

设置cnd加速前端

  1. 在主题配置文件theme/next/_config.yml,修改vendor:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    vendors:
    # Internal path prefix. Please do not edit it.
    _internal: lib
    # Internal version: 2.1.3
    jquery: //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.js
    fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
    # Internal version: 1.0.6
    fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
    # Internal version: 1.9.7
    lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
    # Internal version: 1.2.1
    velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js
    # Internal version: 1.2.1
    velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js
    # Internal version: 0.7.9
    ua_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博客next主题修改静态资源为CDN

添加留言板

  1. 打开主题配置文件,即 Hexo/themes/next/_config.yml 在 menu 下添加board 字段:

    1
    board: /board/ || book
  2. 执行hexo new page board

  3. 在hexo>theme>next>languages>zh-Hans.yml中,在menu下添加board: 留言
    参考:hexo怎么添加留言板?

网站分析

  1. 添加google analytics,在主题配置文件中设置:

    1
    google_analytics: your track id

    博客分析

实践问题

图片存放地点

解决办法:采用CDN引用,CDN选择cloudinary
参考:Hexo博客搭建之在文章中插入图片

CNAME重定向无效

原因:CNAME文件位置放错
解决:将CNAME文件放在sources/目录下,与_posts目录并列

百度无法抓取github上的文章

原因:github拒绝百度的抓取
解决方法:同时部署到github和coding

  1. 注册coding,新建项目,配置SSH
  2. 在站点配置文件修改部署配置:

    1
    2
    3
    4
    5
    6
    7
    deploy:
    - type: git
    repo: https://github.com/chenfengkg/chenfengkg.github.io.git
    branch: master
    - type: git
    repo: https://git.coding.net/chenfengk/blog-my.git
    branch: master
  3. hexo clean,hexo g-d将博客部署到coding上

  4. 点击项目中的pages服务页面,部署来源选择master分支,与站点文件要一致,然后填写自定义域名。
  5. DNS配置,登陆阿里云,点击用户名下管理控制找到云解析服务。
    在解析codingnet时选择默认,解析github时选择世界
  6. 修改主题目录下layout/_partials/footer.swig文件,去除广告。

    1
    2
    3
    4
    <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窗口中输入:

1
git config --global core.autocrlf false

参考:Windows git “warning: LF will be replaced by CRLF”

摘要图按比例缩放,图片不一样,各摘要大图片小不一样

解决方法,添加一个div,用image填充div:

1
2
3
4
5
<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 -->

参考:用image填充div

摘要图片大小不一样

解决办法:用算法修改某个文件夹下所有文件的尺寸
opencv修改图片大小

参考

  1. hexo的next主题个性化教程:打造炫酷网站
  2. Next主题打造炫酷的个性化Hexo博客
  3. swig语法介绍
  4. 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化
-------------本文结束感谢您的阅读-------------
鼓励鼓励!