devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Hexo进阶高级教程（二）

作者：盐析白兔 | 2024-07-28 23:43:55

赞

踩

Hexo进阶高级教程（二）

前言

接上一篇Hexo进阶高级教程(一)继续探讨Hexo,主要的功能都有了，要想让整个博客更丰富，访问速度更快更流畅，就需要添加一些附加的功能，做一些优化处理。
下面会讲解：

  • 七牛云图床--用来做图片存储管理
  • SEO优化--让更多的人通过搜索引擎搜到我们
  • 网易云跟帖--文章的留言区
  • leancloud阅读统计--统计阅读量
  • 百度、谷歌统计--网站流量统计

本文地址：http://tigerliu.site/2017/06/hexo-2

七牛云图床

在写博文的时候，难免都会添加一些图片在文章内，正常情况下，我们都使用外链形式添加到我们的博文，为什么要选七牛云呢？让我们来看看它的特点：

  • 10G 免费流量（图片尽量压缩 200k 以内）
  • 服务稳定（写作才是核心，就别总折腾图片的事情了）
  • 便宜（就算付费也相对比较便宜，作为学生党觉得可以接受）

注册七牛云

永远不变的第一步，骚年得先去注个册，有了ID才能继续玩，链接：七牛云注册 ，按照提示一步一步来就好了。

PS：登录七牛云，验证邮箱， 实名认证 ，可选择支付宝实名认证--前提是你支付宝已经实名认证 ，正常情况下 支付宝实名认证 即刻就可以通过（推荐）

创建对象存储

登录七牛云，默认进来就是资源主页，然后在七牛云官方资源栏--》对象存储 点击立即添加，如下图：

按照提示填写好存储空间名称，存储区域默认就好了，访问控制--选择公开空间

PS：选择私有空间 需要有Key值才能访问，这里选择公开空间 上传完后 直接就可以获取外链 比较方便

上传图片，获取外链

选择内容管理--》点击上传文件 ，上传完成之后 点关闭，回到列表页就可以看到刚才上传的图片了

鼠标悬浮在文件名上 可点击蓝色的笔重命名，右边的眼睛Icon点击 可以获取外链地址，复制外链就可以使用了。

新增图片样式

图片样式--》新建图片样式 根据不同业务需要选择场景--》选择合适的缩放方式，是否剪裁，图片水印 这个功能用的比较多（可设置图片水印，文字水印），设置输出格式，然后保存样式。给处理样式命名， 点击下面的保存按钮。

我们看到右侧的处理代码，这个是干嘛的呢？我们保存完了之后又怎么使用呢？
小编刚开始也是一脸懵逼，复制这段代码，打开刚才上传的图片外链，然后在地址后面用连接符?加上处理的代码，回车就可以看到我们的图片已经加上了水印。不加处理代码就是我们的原图。

  1. //图片外链?处理代码或者样式名称
  2. //示例：
  3. http://orzlwnnoa.bkt.clouddn.com/logo.jpg?watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/240/fill/IzAwMDAwMA==/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim

与极简图床的结合

在写博客的时候，每次都要做这样重复的操作，有没有一键上传并且获取外链的方式呢，必须有啊。这里介绍下极简图床与七牛云的结合。
打开极简图床 注册，登录 点击右侧的小齿轮 绑定七牛云账号信息

  • 空间名称：填写在创建对象存储时的空间名称
  • 域名：拷贝外链默认域名
  • AK: 点击左侧的导航栏个人中心--》密钥管理 获取AK信息
  • SK:点击左侧的导航栏个人中心--》密钥管理 获取SK信息

点击保存就OK了，极简支持截图粘贴，拖拽或者点击上传，上传完可以复制链接/MD链接生成/预览, 有木有很赞，省了很多事！！！

SEO优化

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！
SEO是指通过对网站进行站内优化(网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。

除开站外SEO，我们能做的有两方面。一是针对个人网站的页面排版进行SEO的优化；二是针对搜索引擎进行主动的优化。

SEO准备工作

  • sitemap插件安装
  1.     npm install hexo-generator-sitemap --save     
  2.     npm install hexo-generator-baidu-sitemap --save
  • 修改博客配置文件
    在根目录配置文件_config.yml中修改url为你的站点地址
  1. # URL
  2. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  3. url: http://tigerliu.site
  4. root: /

执行完之后就会在网站根目录生成sitemap.xml文件（搜索引擎通用文件）和baidusitemap.xml文件（百度专用文件），然后执行hexo d -g 提交到我们站点，打开链接http://tigerliu.site/sitemap.xml 查看该文件是否能正确访问。

  • 添加蜘蛛协议robots
    在根目录source文件下新建robots.txt文件，添加以下文件内容（将Sitemap中的域名切换成自己网站域名）
  1. # hexo robots.txt
  2. User-agent: * 
  3. Allow: /
  4. Allow: /archives/
  5. Disallow: /vendors/
  6. Disallow: /js/
  7. Disallow: /css/
  8. Disallow: /fonts/
  9. Disallow: /vendors/
  10. Disallow: /fancybox/
  11.  
  12. Sitemap: http://tigerliu.site/sitemap.xml
  13. Sitemap: http://tigerliu.site/baidusitemap.xml

参数说明： User-agent: * 允许所有robot访问，Allow 允许访问X目录，Disallow 禁止访问X目录

  • 出站链接添加 “nofollow” 标签
    nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签，并被百度、yahoo等各大搜索引擎广泛支持，引用nofollow标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有nofollow属性的任何出站链接，以减少垃圾链接的分散网站权重。

以next主题为例：

1.themes/next/layout/_partials目录 修改footer.swig文件,将下面代码中的a标签 加上rel="external nofollow" 属性

  1. <div class="theme-info">
  2.   {{ __('footer.theme') }} -
  3.   <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
  4.     NexT.{{ theme.scheme }}
  5.   </a>
  6. </div>

2.themes/next/layout/_macro目录,修改sidebar.swig文件,将下面代码中的a标签 加上rel="external nofollow"属性

  1.  <li class="links-of-blogroll-item">
  2.   <a href="{{ link }}" title="{{ name }}" target="_blank" rel="external nofollow">{{ name }}</a>
  3. </li>

百度收录

生在我大天朝，使用频率最多的当属百度了，下面简单介绍下百度的一些优化处理。

  • 注册账号
    打开百度站长，注册登录账号
  • 添加网站
    左侧 我的网站--》站点管理 添加网站，按照引导步骤来就好了。见下图：

在第三步 验证网站这里 建议选择文件验证或者CNAME验证，验证规则选项下面已经给出了。

PS：将下载下来的文件放至根目录/source目录下，若为HTML格式，需要在文件内加上layout: false 否则在编译的时候 也会一起编译。

  1. ---
  2. layout: false
  3. ---
  4. J9sxxxxx

继续hexo d -g 将文件上传至我们的网站，查看刚才的文件是否成功上传，然后点击完成验证。

  • 链接提交
    在左侧找到链接提交，右边可以看到提交方式有两种：自动提交，手动提交

手动提交我们就不谈了，看看自动提交。主要分为 主动推送，自动推送，sitemap 三种方式。

1 主动推送
安装推送插件

npm install hexo-baidu-url-submit --save

在根目录的_config.yml配置文件中新增字段：

  1. baidu_url_submit:
  2.   count: 100 # 提交最新的一个链接
  3.   host: tigerliu.site # 在百度站长平台中注册的域名
  4.   token: bwxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  5.   path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

deploye属性 新增字段

  1. deploy:
  2.  - type: baidu_url_submitter

2 自动推送
这里以next主题为例,打开主题配置文件_config.yml将baidu_push设置为true

  1. # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
  2. baidu_push: true

3 sitemap
将上面我们生成的sitemap文件地址 提交到百度，如下图：

所有配置完后，可以利用site:域名 在百度搜索栏测试我们的结果 例如： site:tigerliu.site

结果是不是什么也没找到，百度收录需要一段时间，耐心等待吧！！！

谷歌收录

还是google收录快，比百度快的不是一点半点，设置完成基本2分钟左右即可看到效果。一起来看看！！！

  • 注册登录
    google站长
  • 添加网站
    跟百度收录类似，验证网站 使用google的推荐方法，也就是百度收录的文件验证。

  • 提交站点地图
    验证完网站后，回到我们的网站列表，点击网站，如下图：

在左侧的抓取--》点击站点地图 ，添加站点地图（把我们刚才生成的sitemap.xml地址添加进去），如图：

  • Google 抓取工具
    点击左侧的google抓取工具，输入抓取地址，点击右边的抓取按钮，即可抓取我们的网站。默认不输入 即为抓取首页，状态栏显示完成即为抓取成功，然后将该地址提交至索引。如图：

ps: 至此google配置已经完成了，等待2分钟，回到google搜索页，赶紧试一试！！！

网易云跟帖

博文怎么能少评论功能呢，之前的多说目前已经不可用了，在畅言和网易云跟帖之间，我选了后者。使用之前需要有自己的域名，没有见我的上一篇Hexo进阶高级教程(一)文章，注册一个，也不贵。下面就来谈谈云跟帖：

畅言需要备案，如果你的网站已经备案可以添加

  • 注册登录
    万年不变的注册登录，网易云跟帖注册
  • 设置站点信息
    登录后，点击后台管理，填写站点信息，站点名称随便取，站点网址填我们购买的域名，保存。
  • 获取productKey
    点击获取代码，在左侧找到App SDK,右侧的APP KEY 即为我们需要的key,点击复制。如图：


以next主题为例，在next主题配置文件_config.yml中设置productKey

  1. # Gentie productKey
  2. gentie_productKey: ea08xxxxx

效果预览：

阅读统计功能

next主题集成了leancloud，在使用的时候设置好app_key和app_id 就可以使用了。

  • 注册登录
    leancloud注册
  • 创建应用
    登录后在右上角选择国内节点，创建应用。如图：

  • 主题配置
    鼠标悬浮到新创建的应用上，点击右上角的齿轮进入设置界面,点击应用key获取app_key和app_id 如图：


将刚才获取到的key,id填入主题配置文件

  1. # Show number of visitors to each article.
  2. # You can visit https://leancloud.cn get AppID and AppKey.
  3. leancloud_visitors:
  4.   enable: true
  5.   app_id: yourapp_id
  6.   app_key: yourapp_key
  • 创建Class
    在左侧点击存储，创建一个名为Counter的Class文件，这里的名称一定为Counter 不能随意取！！！

PS：设置完后，回到我的博客，随便点击一篇博文，刷新几次 就可以在leancloud--》存储--》Counter看到我们的浏览记录了，在我们的博文副标题也可以看到浏览记录。

百度、谷歌统计

如何查看自己的博客每天被多少人访问呢~ 下面一起来看看在hexo中如何使用统计插件，每天看到自己的博客访问量越来越高也是一种享受。


拷贝统计代码ID

  • 谷歌统计
    登录后，新增一个统计网站，填写网站信息，点击下面的获取跟踪ID，如图：


进入页面后，你会看到跟踪ID，复制它，如图：

  • 修改配置文件
    以next主题为例，修改主题配置文件，添加baidu、googleId
  1. # Baidu Analytics ID
  2. baidu_analytics: 9758xxxx
  3. # Google Analytics
  4. google_analytics: UA-3534xxxx

PS：谷歌统计用的比较少，因为有墙，在加载代码的时候，很容易阻塞。故在国内我们使用百度、CNZZ比较多！！！

结语

看完上面的介绍，有木有感觉配置还是蛮多的，正所谓工欲善其事，必先利其器。当初小编也花了一周多星期才搭建好一个稍微满意点的博客，总之喜欢博客爱折腾，功夫不负有心人，终会弄出一个非常6的博客。祝大家在HEXO的路上玩的嗨皮！！！

相关链接：
Hexo+github博客搭建
Hexo进阶高级教程(一)
Hexo进阶高级教程(三)

实际效果展示可移步个人博客 -- Tigerliu Blog

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/896250
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号