hexo博客优化

最新推荐文章于 2020-07-20 14:59:06 发布
最新推荐文章于 2020-07-20 14:59:06 发布
阅读量361 收藏
点赞数
分类专栏： hexo 文章标签： hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43235247/article/details/100096362
版权

一些推荐

图床选择

这里我推荐的是聚合图床：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上的博文，因为太多，操作过程忘记记录了，对各位博主表示感谢，由于我也是一次操作，所以截图较少。希望对你有所帮助。

坤城~byack
关注
专栏目录
【插件】博客 - 看板娘
LawssssCat的博客
01-22 1426
1 <style type="text/css"> canvas#live2dcanvas { border: 1 !important; right: 0 ; } </style> ......................................... <!-- 看板娘 --> <script src="ht...
JS实现鼠标点击处烟花爆炸效果
我有一颗五角星
02-22 1万+
JS实现鼠标点击处烟花爆炸效果（面向对象版） 程序由网上开源“JS实现放烟花效果”代码改编，实现在鼠标点击处出现烟花爆炸效果。
如何给博客添加看板娘详解（面向新手）
CN_BIT的博客
03-09 5411
1.在我的博客页面，点击"管理"，进入博客园后台。 2.选择“文件”，从本地上传四个文件 flat-ui.min.css (看板娘的侧边选项栏) live2d.js(看板娘的动作) waifu.css（看板娘在页面的位置（左边）、大小） waifu1.css（看板娘在页面的位置（右边）、大小）//我没有试过这个 waifu-tips.js(看板娘的语言) 需要的文件我已经上传...
编辑器之神——vim
qq_43235247的博客
08-27 333
原文在我的个人博客里： （ https://byackblog.com/%E7%BC%96%E8%BE%91%E5%99%A8%E4%B9%8B%E7%A5%9E%E2%80%94%E2%80%94vim.html ）
使用JavaFx模拟windows记事本
qq_43235247的博客
12-25 1097
实现效果 代码 import javafx.application.Application; import javafx.application.Platform; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; ...
Hexo博客优化之内容编辑
huangpiao
01-26 4174
前言 之前介绍了Hexo博客平台的搭建，这次我们来看看博客内容怎么编辑。Hexo要求博客必须用Github风格的Markdown语言进行编辑，因此我们就需要了解文字、图片、公式等内容的编辑和排版方式。其中，图片的存储需要利用云服务器的对象存储服务或者图床，下面会具体介绍。 1. Markdown编辑器 既然Markdown是一门语言，那么与之对应的就有很多种编辑器，不仅如此，Markdow...
Hexo博客优化之Next主题美化
热门推荐
huangpiao
01-26 5万+
前言 有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Ne...
Hexo博客优化之Next主题功能强化
huangpiao
01-26 2375
前言 这里是Hexo博客优化的最后一篇了，主要讲的是讲的是功能层面的优化，如：网站加速、评论功能、在线聊天功能、一键分享功能等等。 1. 添加网站评论功能 1.1来必力 来必力是一款韩国的评论软件，先进入注册登录，然后安装免费版本： 安装之后获取安装代码里面的uid，放入主题配置文件： livere_uid: 你的uid 效果如下： 进入管理后台可以管理评论： 1.2Valine ...
HexoBlogCode:Hexo博客框架修改的源代码
03-23
Hexo博客框架是一款基于Node.js的静态博客生成器，它为个人或团队提供了一种高效、简洁且强大的方式来创建和管理个人博客。这个名为"HexoBlogCode"的压缩包文件很可能包含了整个Hexo博客项目的源代码，方便用户进行...
嵌入式(4中断编程)
qq_43235247的博客
10-28 1160
EXTI (外部中断/事件)控制器 STM32单片机的EXTI的工作机制 互联型产品，一共有20个外部中断/事件控制EXTIx，对于其它产品，共有19个外部中断/事件控制EXTIx。 ARM Cortex-M3中，对于每个中断（异常）源，在被挂起的情况下，都会有一个对应的 “挂起状态寄存器” 保存其中断（异常）请求，直到该中断（异常）能够执行为止。当进入该中断的中断处理程序时，必须手动清除该中...
hexo笔记十三：next主题增加点击特效
Awt_FuDongLai的博客
07-20 1623
博客搭建得差不多后，是时候整点花里胡哨的东西了。 本篇博文记录如何实现点击(包括单击、双击)特效。 1 在博客目录/themes/next/source/js/src目录下新建一个js文件，命名为fireworks.js。将下面的代码复制到这个js文件中。 "use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointer
PyQuery库学习笔记
qq_43235247的博客
12-29 191
PyQuery库学习笔记 一个强大又灵活的网页解析库。正则太麻烦，BeautifulSoup语法太难记，如果熟悉 jQuery 语法，那么PyQuery就是最好的选择。 初始化 字符串初始化 html = ''' <div> <ul> <li class="item-0">first item</li> ...
细数我建HEXO站时踩过的坑
u010025179的博客
06-22 761
细数我建HEXO站时踩过的坑 一、网站搭建 基本参考https://blog.csdn.net/qq_35561857/article/details/81590953和腾讯云使用宝塔面板部署Hexo 建立SSH信任时，如果ssh-copy-id不存在时，使用 cat ~/.ssh/id_*.pub | ssh root@服务器IP 'cat >> .ssh/authorized_keys' 二、解决图片显示问题 需要安装一个图片路径转换的插件，这个插件名字是hexo-ass
ubuntu常用命令
qq_43235247的博客
08-27 222
文章原内容在我的个人博客里，链接如下，用电脑看的话观感好很多 https://byackblog.com/ubuntu%E5%B8%B8%E7%94%A8%E4%BB%A4.html
hexo 炫酷主题配置
qq_41061303的博客
07-25 2460
文章目录hexo的一些问题配置博客目录添加文章摘要添加点击小红心特效配置next主题安装及配置next主题设置中文页面设置menu设置动态背景左上角图标设置修改文章内链接文本样式修改底部标签样式文章末尾添加“文章结束”主页文章添加阴影效果动态头像底部加上访问量底部统计字数自带的统计字体插件添加网页顶部进度加载条注释配置点击爆炸特效修改字体大小修改图标修改背景图hexo增加评论功能侧边栏显示时机图片...
给自己的博客添加看板娘
起风了的博客
11-19 1394
给自己的博客添加能动会说话，可爱又萌萌哒看板娘 原博客地址： 详细步骤：https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 模型大全：https://www.cnblogs.com/dxdblog/p/10255503.html ...
git基本使用
qq_43235247的博客
08-27 154
原文在我的个人博客里： （ https://byackblog.com/git%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html ）
Java基础笔记
qq_43235247的博客
08-27 660
原文在我的个人博客里，我会发布在我的个人博客里，再将链接分享到csdn （https://byackblog.com/Java%E5%9F%BA%E7%A1%80%E7%AC%94%E8%AE%B0.html）
快速搭建Hexo博客全攻略
"Hexo博客网站的快速搭建" Hexo是一个基于Node.js的快速、简洁且高效的博客框架，它使用Markdown或者其他渲染引擎解析文章，并能够迅速生成静态网页，提供多种美观的主题供用户选择。通过简单的配置和操作，用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值