hexo博客优化

一些推荐

图床选择

这里我推荐的是聚合图床:https://www.superbed.cn/

聚合图床

注册完账号,首页就可以上传了,速度很快

next主题

更改主题

git clone https://github.com/iissnan/hexo-theme-next themes/next

主题有很多,大家可以自行百度,这里我用的是next主题,next主题官方网站:http://theme-next.iissnan.com/

在博客的配置文件_config.yml修改主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

这样,博客的主题就换为next了

主题配置

主题默认的主题样式

更改主题配置文件next/_config.yml:

override: false

修改网站默认的标志

找到一个自己喜欢的.ico格式的图标,将这个文件命名为favicon.ico,将这个文件放到next/source/images路径下,然后更改主题配置文件next/_config.yml:

favicon:
  small: /images/favicon.ico

创建分类和关于的页面

在终端窗口下进入你博客站点的路径,然后运行如下命令:

hexo new page categories
hexo new page about

运行完这两个命令,会在博客站点的source文件夹下多出以下几个文件:

source/
├── about
│   └── index.md
└── categories
     └── index.md

打开categories/index.md这个文件,加入一行type

---
title: 分类
date: 2019-08-06 01:57:14
type: "categories"  // 加上这一行就好了
---

网站显示分类和关于页面

修改主题的配置文件如下:

menu:
  home: / || home
  archives: /archives/ || archive
  categories: /categories/ || th
  #tags: /tags/ || tags
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

用#注释掉的页面不会显示出来,你可以根据自己的需求来选择需要哪些页面,自行更改

更改主题样式

# Schemes
# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

喜欢哪个样式把#号去掉就好,可以自行选择,这里我选用的是Pisces样式

设置社交链接:

social:
  GitHub: https://github.com/byack || github
  E-Mail: mailto:18788748257@163.com || envelope

大家根据自己的需求进行设置就好

修改头像

找到选定图片的url,将url写到主题配置文件的这个地方就好:

avatar: 头像的url地址

修改博客侧栏的显示

可以自行设置,我的设置如下

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Sidebar Display, available value (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  #display: post
  display: always
  #display: hide
  #display: remove

添加博客打赏功能

修改主题的配置文件

reward_comment: 感谢你的支持
wechatpay: 微信收款图片的url地址
alipay: 支付宝收款图片的url地址

更改背景图片和设置面板的透明度

修改主题文件夹source/css/_custom下的custom.styl文件,加入如下代码,参数可以自己调

@media screen and (min-width:1200px) {

    body {
    background-image:url(背景图片的url);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%; 
    }

    #footer a {
        color:#eee;
    }
}

.header-inner{
    opacity: 1;
}
.main-inner { 
   opacity: 0.9;
}

博客侧栏显示页面的面板透明度我设置的是1,也就是不透明,因为在后面我加入站内搜索功能的时候,这个如果有透明效果,那站内搜索功能显示出来的效果很差,看不清,所以这里我设置为1,其余面板的透明度设置为0.9

博客加入看板娘

先安装插件,并建立一个文件夹

npm install --save hexo-helper-live2d  # 安装插件
mkdir live2d_models  # 在项目更目录下建立文件夹

下载模型:https://github.com/summerscar/live2dDemo

git clone https://github.com/summerscar/live2dDemo  # 任意位置clone都可以

这个过程比较漫长,如果百度网盘的下载对于你而言更快的话,以下是我当时安装的文件,可以下载

百度网盘链接:https://pan.baidu.com/s/154_ggNV2jXXB9FhFMRMqmw
提取码:5juw

下载下来之后进行解压,选着自己喜欢的模型,将整个文件夹复制到我们建立的文件夹live2d_models下,然后在博客的配置文件中加入一下代码:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: poi  # 选择的模型名字
  display:
    position: right
    width: 250
    height: 400
  mobile:
    show: false  # 手机端不显示

具体的部分参数可以根据自己修改,这里我用的是poi这个模型。如果启动服务时发生异常,可以运行以下命令:

npm install hexo --save

鼠标点击出现烟花爆炸效果

在next\source\js下新建文件firework.js文件,其中加入代码如下:

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

然后修改文件next/layout/_layout.swig,在< head >< /head >标签里添加如下代码:

<!-- 爆炸红心效果 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/firework.js"></script>

鼠标点击还有其它效果,大家可以自行百度


数据分析

这里我选用的是腾讯分析:http://ta.qq.com

很简单,登录腾讯分析后,(我忘记截图了),获取分析的ID,注意,只要这个ID值就好,复制这个ID值,打开主题配置文件,将ID值放置到tencent_analytics字段就好。

# Tencent analytics ID
tencent_analytics: 你复制的ID值

然后你就可以在腾讯分析上看到网站的访问数据了。


站内搜索

这里我选用的是Local Search,先安装插件

npm install hexo-generator-searchdb --save

在博客的配置文件中加入搜索配置

# Local search 站内搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在主题的配置文件中启用站内搜索服务

# Local search
local_search:
  enable: true

站内搜索就完成了


百度收录站点

判断收录情况

判断百度是否已经收录你的站点,在百度的搜索框中输入:***site:<你网站的域名>***,一般刚创建的网站是没有被收录的。

登录百度站长平台

http://zhanzhang.baidu.com

添加网站

登录完成后点击添加网站进行添加,我在这一步之前还提示我要注册一个熊掌ID,那就直接按照提示注册就好了,注册完成后在添加网站,在最后一步网站验证我选择的是CNAME验证,在自己的域名管理那添加一条解析就可以了,比较简单。

生成网站地图

先安装sitemap插件

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

然后修改博客的配置文件,改为自己的url

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://byackblog.com
root: /
permalink: :title.html  # 文章的url显示格式,默认为:year/:month/:day/:title/
permalink_defaults:

执行完成后会在网站的public文件夹中生成sitemap.xml文件和baidusitemap.xml文件

提交链接

这里我选用的是sitemap,比较简单,打开百度站长平台,点击链接提交,选择sitemap,将上一步生成的sitemap文件提交到百度就可以了,收录的过程需要一些时间,我当时也是很糊涂的操作,过了几天查看是否收录时发现已经收录了。


整个过程参考了很多文章,包括官方文档和CSDN上的博文,因为太多,操作过程忘记记录了,对各位博主表示感谢,由于我也是一次操作,所以截图较少。希望对你有所帮助。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值