前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >让你的专属博客更加漂亮

让你的专属博客更加漂亮

作者头像
编程珠玑
发布2019-07-12 14:02:39
6940
发布2019-07-12 14:02:39
举报
文章被收录于专栏:编程珠玑编程珠玑

前言

hexo+github搭建专属个人博客的教程很多,这里也就不再介绍了,当然你也可以点击阅读原文查看。但是在初始搭建完成后,需要进行很多配置,使得网站功能更加健全,因此本文主要介绍网站的功能补全和优化。

本文以next主题为例,但很多设置对其他主题也通用。

增加cnzz站点统计PV,UV等信息

如何在网站上添加访问信息统计呢?

1.注册友盟账号:https://www.umeng.com/ 2.选择-产品-网站统计添加要统计的网站信息 3.站点设置-获取代码,注意是复制图中所示的代码之一,而不是前面的代码,否则只会显示图标而不显示统计结果。

cnzz统计

找到主题下cnzz的文件,例如next主题修改/next/layout/_third-party/analytics/cnzz-analytics.swig 文件内容如下:

代码语言:javascript
复制
{% if theme.cnzz_siteid %}
<div>

这里替换成你复制的内容
</div>
{% endif %}

添加完成后,记得修改next主题配置文件,将cnzz相关信息修改:

代码语言:javascript
复制
cnzz_siteid: 这里替换成你自己的id

效果可访问https://www.yanbinghu.com

文章添加置顶功能

1.安装插件:

代码语言:javascript
复制
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

2.修改样式,打开next/layout/_macro/post.swig,找到class为post-meta的div,插入下面的内容:

代码语言:javascript
复制
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="green">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

使用时,只需要在文章的开头加:

代码语言:javascript
复制
top: true

即可。

置顶

效果:

添加标签云

安装插件:

代码语言:javascript
复制
npm install hexo-tag-cloud --save

打开next/layout/_custom/sidebar.swig

代码语言:javascript
复制
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

效果(不同主题展示的效果可能不太一样):

为网站添加关键字,seo优化

1.增加页面关键字,修改next主题配置文件中的keywords:

代码语言:javascript
复制
keywords: "C语言,Cpp,Linux,Go,Python,算法"

解决hexo 公式渲染不完整的问题

原来的渲染引擎有问题,过于复杂的公式没法正确显示,需要卸载,并重新安装完好的MathJax渲染引擎:

代码语言:javascript
复制
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

效果:

解决卜算子计数脚本失效问题

原因:通过浏览器右键检查元素查看控制台可以看到,有一个js文件加载失败。 打开next主题next/layout/_third-party/analytics/busuanzi-counter.swig 中卜算子脚本地址 修改为:

代码语言:javascript
复制
https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

让百度收录网站地址

与google收录类似,但是时间比较长,并且由于github屏蔽了百度爬虫,因此在百度自动爬取时会出现403错误。

强制https访问网站

github pages默认情况下是http访问的,有时候http会被浏览器标识为不安全。因此,需要更改github pages的设置,强制https访问网站。 设置方法:进入github pages项目-->setting-->勾选Enfoce HTTPS

添加微信公众号

代码语言:javascript
复制
wechat_subscriber:
  enabled: true
  qcode: /pictures/qrcode.jpg   #二维码路径
  description: 欢迎关注个人微信公众号#描述

修改字体

修改字体大小,可通过修改/source/css/_variables/base.styl 中的font-size-base,这是修改除标题以外的其他内容字体大小。 code-font-size修改代码字体大小。 font-family-base 修改字体

修改链接样式

原先的链接样式只有下划线,颜色并无特别之处,因此修改链接样式为传统样式。效果:

修改文件source\css_common\components\post\post.styl 增加内容

代码语言:javascript
复制
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

增加gitment和gitalk评论系统

之前用过很多评论系统,但是不幸的是一个个地关闭了。但是gitment和gitalk依托于github,因此它基本是不可能被关闭的。新版的next主题已经默认可以支持gitment评论系统了。关于如何集成gitalk评论系统可阅读原文查看。

修改tag标签

默认的tag标签符号是一个井号,我们需要更换为tag图标。修改layout/_macro/post.swig 搜索 rel="tag">#,将 # 换成

代码语言:javascript
复制
<i class="fa fa-tag"></i>

效果:

添加RSS订阅

安装插件并修改配置文件即可:

代码语言:javascript
复制
npm install hexo-generator-feed --save

添加打赏功能

修改配置文件

代码语言:javascript
复制
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /wechatpay.jpg
alipay: /alipay.jpg

wechatpay.jpg 和alipay.jpg分别是微信和支付宝的收款二维码。可放在hexo的resource目录下。

添加文章的字数统计和阅读时长统计

修改配置文件

代码语言:javascript
复制
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

另外,在hexo根目录下执行命令

代码语言:javascript
复制
npm i --save hexo-wordcount

安装成功后即可。

添加站内搜索

需要安装hexo-generator-search

代码语言:javascript
复制
npm install hexo-generator-searchdb --save

在站点的_config.yml中添加

代码语言:javascript
复制
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

同时在next主题中开启local search,这样站内的内容就可以搜索了。

缩短优化链接

hexo博客默认链接是以标题命名的,一旦标题变了,链接也就变了,而且链接过长,因此需要优化。

代码语言:javascript
复制
npm install hexo-abbrlink --save

打开hexo主配置文件,将permalink部分修改为下面的格式。

代码语言:javascript
复制
permalink: :year/:month/:day/:abbrlink.html

当然为了避免链接层级过深,也可以去掉日或者月,以达到seo优化的目的。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-04-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程珠玑 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 增加cnzz站点统计PV,UV等信息
  • 文章添加置顶功能
  • 添加标签云
  • 为网站添加关键字,seo优化
  • 解决hexo 公式渲染不完整的问题
  • 效果:
  • 解决卜算子计数脚本失效问题
  • 让百度收录网站地址
  • 强制https访问网站
  • 添加微信公众号
  • 修改字体
  • 修改链接样式
  • 增加gitment和gitalk评论系统
  • 修改tag标签
  • 效果:
  • 添加RSS订阅
  • 添加打赏功能
  • 添加文章的字数统计和阅读时长统计
  • 添加站内搜索
  • 缩短优化链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档