博客二之博客美化

发表于 | 更新于: | 分类于
字数统计: 4,171 | 阅读时长 ≈ 19

基于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_index与if 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 %}

参考:
mp3歌曲网站
lrc歌词网站

加密文件

  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

    博客分析

添加豆瓣阅读，电影

  1. 安装npm install hexo-douban --save

  2. 设置，将下面的配置写入站点的配置文件_config.yml里(不是主题的配置文件).

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    douban:
      user: mythsman
      book:
        title: 'This is my book title'
        quote: 'This is my book quote'
      movie:
        title: 'This is my movie title'
        quote: 'This is my movie quote'
      game:
        title: 'This is my game title'
        quote: 'This is my game quote'
      timeout: 10000 #optional

    user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，就可以在这个URL里看到你的ID了: “https://www.douban.com/people/xxxxxx/“.
    title: 该页面的标题.
    quote: 写在页面开头的一段话,支持html语法.
    timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
    如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

  3. 显示,如果上面的配置都没问题，就可以在生成站点之后打开 //yourblog/books 和 //yourblog/movies, //yourblog/games, 来查看结果.

  4. 菜单,如果上面的显示没有问题就可以在主题的配置文件_config.yml里添加如下配置来为这些页面添加菜单链接.

    1
    2
    3
    4
    5
    6
    menu:
      Home: /
      Archives: /archives
      Books: /books     #This is your books page
      Movies: /movies   #This is your movies page
      Games: /games   #This is your games page

  5. 修改文字，打开theme/hexo-theme-next/languages/zh-Hans.yml,在menu下添加：

    1
    2
    3
    Movies: 电影
    Books: 书籍
    Games: 游戏

    github地址
    作者博客

实践问题

图片存放地点

解决办法：采用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修改图片大小

首页隐藏指定文档，用hexo-generator-index分页后部分页面post文章数量缺少

将index_generator的per_page设置为0，不分页

参考

  1. hexo的next主题个性化教程:打造炫酷网站
  2. Next主题打造炫酷的个性化Hexo博客
  3. swig语法介绍
  4. 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化
-------------本文结束感谢您的阅读-------------
鼓励鼓励！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多