hexo博客优化

最新推荐文章于 2020-07-20 14:59:06 发布
最新推荐文章于 2020-07-20 14:59:06 发布
阅读量322 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hexo-client：Hexo博客系统客户端
02-04
Hexo客户端 依赖 需要保证有Node.JS运行环境和Git 。 开发 编译 $ npm start // 编译前后端资源，后端资源需重启后才生效 运行 $ npm run client 打包 $ npm run pack:mas # 各平台的打包命令请查看 package.json ...
JS实现鼠标点击处烟花爆炸效果
热门推荐
我有一颗五角星
02-22 1万+
JS实现鼠标点击处烟花爆炸效果（面向对象版） 程序由网上开源“JS实现放烟花效果”代码改编，实现在鼠标点击处出现烟花爆炸效果。
hexo笔记十三：next主题增加点击特效
Awt_FuDongLai的博客
07-20 1541
博客搭建得差不多后，是时候整点花里胡哨的东西了。 本篇博文记录如何实现点击(包括单击、双击)特效。 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
Java基础笔记
qq_43235247的博客
08-27 617
原文在我的个人博客里，我会发布在我的个人博客里，再将链接分享到csdn （https://byackblog.com/Java%E5%9F%BA%E7%A1%80%E7%AC%94%E8%AE%B0.html）
嵌入式(4中断编程)
qq_43235247的博客
10-28 1068
EXTI (外部中断/事件)控制器 STM32单片机的EXTI的工作机制 互联型产品，一共有20个外部中断/事件控制EXTIx，对于其它产品，共有19个外部中断/事件控制EXTIx。 ARM Cortex-M3中，对于每个中断（异常）源，在被挂起的情况下，都会有一个对应的 “挂起状态寄存器” 保存其中断（异常）请求，直到该中断（异常）能够执行为止。当进入该中断的中断处理程序时，必须手动清除该中...
如何给博客添加看板娘详解（面向新手）
CN_BIT的博客
03-09 5274
1.在我的博客页面，点击"管理"，进入博客园后台。 2.选择“文件”，从本地上传四个文件 flat-ui.min.css (看板娘的侧边选项栏) live2d.js(看板娘的动作) waifu.css（看板娘在页面的位置（左边）、大小） waifu1.css（看板娘在页面的位置（右边）、大小）//我没有试过这个 waifu-tips.js(看板娘的语言) 需要的文件我已经上传...
hexo-theme-aomori:A Hexo Theme. Hexo 博客主题
04-27
Hexo是一个快速，简单，功能强大的博客框架，具有超快的生成速度，对Markdown的支持，一键式部署和高可伸缩性。 该项目是基于Hexo的一系列优点而开发的主题。 丰富的网站风格 丰富的主题配置 优化多媒体播放 出色的...
yinwang:Hexo的博客主题
05-10
我觉得这样的版式设计很好，就在王垠博客的主题基础上，增加了一些优化，得到了这个Hexo主题。NEW新增 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。默认使用 白色的 normal 主题，可选的值有 normal，night...
hexo matery主题博客解析bug问题及主题优化
01-08
matery主题优化时解析出bug matery是个好的主题这个我就不详细地说了，但是优化也难 越好的主题、越丰富的主题，插件越多，配置越多，就容易出错 最要命的是这种静态网页的部署还要用最原始的方法进行，先在命令行...
hexo-filter-responsive-images:为响应式Hexo博客生成图像的多版本
04-30
使用Hexo> = 3.x为响应式博客生成图像的多版本。 它使用库来转换图像。 与类似插件的比较： 添加了一个单独的命令，不适用于hexo server 。 需要安装ImageMagick。 该插件与hexo generate集成在一起，并可以与...
【插件】博客 - 看板娘
LawssssCat的博客
01-22 1399
1 <style type="text/css"> canvas#live2dcanvas { border: 1 !important; right: 0 ; } </style> ......................................... <!-- 看板娘 --> <script src="ht...
编辑器之神——vim
qq_43235247的博客
08-27 305
原文在我的个人博客里： （ 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 ）
PyQuery库学习笔记
qq_43235247的博客
12-29 145
PyQuery库学习笔记 一个强大又灵活的网页解析库。正则太麻烦，BeautifulSoup语法太难记，如果熟悉 jQuery 语法，那么PyQuery就是最好的选择。 初始化 字符串初始化 html = ''' <div> <ul> <li class="item-0">first item</li> ...
细数我建HEXO站时踩过的坑
u010025179的博客
06-22 694
细数我建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
使用JavaFx模拟windows记事本
qq_43235247的博客
12-25 1048
实现效果 代码 import javafx.application.Application; import javafx.application.Platform; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; ...
git基本使用
qq_43235247的博客
08-27 131
原文在我的个人博客里： （ https://byackblog.com/git%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html ）
hexo 炫酷主题配置
qq_41061303的博客
07-25 1310
文章目录hexo的一些问题配置博客目录添加文章摘要添加点击小红心特效配置next主题安装及配置next主题设置中文页面设置menu设置动态背景左上角图标设置修改文章内链接文本样式修改底部标签样式文章末尾添加“文章结束”主页文章添加阴影效果动态头像底部加上访问量底部统计字数自带的统计字体插件添加网页顶部进度加载条注释配置点击爆炸特效修改字体大小修改图标修改背景图hexo增加评论功能侧边栏显示时机图片...
ubuntu常用命令
qq_43235247的博客
08-27 191
文章原内容在我的个人博客里，链接如下，用电脑看的话观感好很多 https://byackblog.com/ubuntu%E5%B8%B8%E7%94%A8%E4%BB%A4.html
给自己的博客添加看板娘
起风了的博客
11-19 1363
给自己的博客添加能动会说话，可爱又萌萌哒看板娘 原博客地址： 详细步骤：https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 模型大全：https://www.cnblogs.com/dxdblog/p/10255503.html ...
hexo博客 fluid
最新发布
09-19
hexo博客的fluid指的是一种响应式布局，使得博客在不同设备上可以自适应地展示。在hexo中，默认情况下并没有内置fluid布局，但你可以使用第三方主题来实现这一功能。其中，一款常用的Material Design风格的主题是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值