00018-Hexo博客进一步补充-ubuntu

前言

前两篇搭建博客的博文—— 00004-Hexo快速搭建一个博客-ubuntu 和 00012-Hexo博客补充-ubuntu，虽然已经介绍了方方面面，但是还有一些遗漏之处，并且它们包含的内容过多，导致它的加载很缓慢，影响观看。因此本篇博文将作为它们的补充为大家介绍其他内容。

操作系统：Ubuntu 20.04.4 LTS

参考文档

1. 注册谷歌账号时手机号码不能验证？（最新解决办法）

2. Hexo页脚养鱼效果

3. 网站背景

4. 代码框展开/关闭

5. Hexo在顶部增加天气小部件

6. Gitcalendar

7. Sidebar Card Clock

8. Hexo侧边栏添加微博热搜

9. 如何让你的博客拥有星空背景和流星特效

10. 从 object 到 iframe——其他嵌入技术

11. Hexo -18- 添加 PDF 阅读功能

12. hexo-pdf

13. jsDelivr域名遭到DNS污染的解决方案

14. hexo+腾讯cos搭建个人博客

15. 基于腾讯云COS对象存储部署hexo博客并实现一键部署

16. hexo博客主题 Butterfly优化之文章置顶

环境版本

git         2.25.1
node        v18.2.0
npm         8.9.0

cnpm -v
cnpm@7.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.17 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@18.2.0 (/usr/bin/node)
npminstall@5.8.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
linux x64 5.13.0-41-generic 
registry=https://registry.npmmirror.com

hexo -v
INFO  Validating config
INFO  
  ===================================================================
                                                                     
      #####  #    # ##### ##### ###### #####  ###### #      #   #    
      #    # #    #   #     #   #      #    # #      #       # #     
      #####  #    #   #     #   #####  #    # #####  #        #     
      #    # #    #   #     #   #      #####  #      #        #      
      #    # #    #   #     #   #      #   #  #      #        #    
      #####   ####    #     #   ###### #    # #      ######   #  

                            4.2.0
  ===================================================================
hexo: 6.1.0
hexo-cli: 4.3.0
os: linux 5.13.0-41-generic Ubuntu 20.04.4 LTS (Focal Fossa)
node: 18.2.0
v8: 10.1.124.8-node.13
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 108
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.6
openssl: 3.0.3+quic
cldr: 41.0
icu: 71.1
tz: 2022a
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

# 轻量应用服务器信息

实例规格                 CPU: 2核 内存: 2GB
系统盘                   40GB SSD云硬盘
带宽                    4Mbps
镜像名称                 宝塔Linux面板
镜像类型                 应用镜像
操作系统                 CentOS 7.9 64bit
预装应用软件              宝塔Linux面板 7.8.0 腾讯云专享版

Google | Bing | Baidu

Google 收录和 Bing 收录的流程与百度收录的流程一样，先使用文件验证添加网站，然后添加博客的 sitemap。收录流程请参考 00004-Hexo快速搭建一个博客-ubuntu 的 百度收录博客。

1. Google Search Console

2. Microsoft Bing Webmaster Tools

注：有可能注册谷歌账号的时候会出现问题，请参考下面这篇文章，也可以直接花 10 多元买一个谷歌账号。

• 注册谷歌账号时手机号码不能验证？（最新解决办法）

灰色养鱼

本节是在 00004-Hexo快速搭建一个博客-ubuntu 中养鱼的基础——5.6 页脚养鱼 和 11.2 页脚养鱼 上实现的。

原教程链接：Hexo页脚养鱼效果

1. 新建 blog/themes/butterfly/source/js/fish.js 文件，粘贴下面代码。

var RENDERER = {
	POINT_INTERVAL : 5,
	FISH_COUNT : 3,
	MAX_INTERVAL_COUNT : 50,
	INIT_HEIGHT_RATE : 0.5,
	THRESHOLD : 50,
	
	init : function(){
		this.setParameters();
		this.reconstructMethods();
		this.setup();
		this.bindEvent();
		this.render();
	},
	setParameters : function(){
		this.$window = $(window);
		this.$container = $('#jsi-flying-fish-container');
		this.$canvas = $('<canvas />');
		this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d');
		this.points = [];
		this.fishes = [];
		this.watchIds = [];
	},
	createSurfacePoints : function(){
		var count = Math.round(this.width / this.POINT_INTERVAL);
		this.pointInterval = this.width / (count - 1);
		this.points.push(new SURFACE_POINT(this, 0));
		
		for(var i = 1; i < count; i++){
			var point = new SURFACE_POINT(this, i * this.pointInterval),
				previous = this.points[i - 1];
				
			point.setPreviousPoint(previous);
			previous.setNextPoint(point);
			this.points.push(point);
		}
	},
	reconstructMethods : function(){
		this.watchWindowSize = this.watchWindowSize.bind(this);
		this.jdugeToStopResize = this.jdugeToStopResize.bind(this);
		this.startEpicenter = this.startEpicenter.bind(this);
		this.moveEpicenter = this.moveEpicenter.bind(this);
		this.reverseVertical = this.reverseVertical.bind(this);
		this.render = this.render.bind(this);
	},
	setup : function(){
		this.points.length = 0;
		this.fishes.length = 0;
		this.watchIds.length = 0;
		this.intervalCount = this.MAX_INTERVAL_COUNT;
		this.width = this.$container.width();
		this.height = this.$container.height();
		this.fishCount = this.FISH_COUNT * this.width / 500 * this.height / 500;
		this.$canvas.attr({width : this.width, height : this.height});
		this.reverse = false;
		
		this.fishes.push(new FISH(this));
		this.createSurfacePoints();
	},
	watchWindowSize : function(){
		this.clearTimer();
		this.tmpWidth = this.$window.width();
		this.tmpHeight = this.$window.height();
		this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL));
	},
	clearTimer : function(){
		while(this.watchIds.length > 0){
			clearTimeout(this.watchIds.pop());
		}
	},
	jdugeToStopResize : function(){
		var width = this.$window.width(),
			height = this.$window.height(),
			stopped = (width == this.tmpWidth && height == this.tmpHeight);
			
		this.tmpWidth = width;
		this.tmpHeight = height;
		
		if(stopped){
			this.setup();
		}
	},
	bindEvent : function(){
		this.$window.on('resize', this.watchWindowSize);
		this.$container.on('mouseenter', this.startEpicenter);
		this.$container.on('mousemove', this.moveEpicenter);
		this.$container.on('click', this.reverseVertical);
	},
	getAxis : function(event){
		var offset = this.$container.offset();
		
		return {
			x : event.clientX - offset.left + this.$window.scrollLeft(),
			y : event.clientY - offset.top + this.$window.scrollTop()
		};
	},
	startEpicenter : function(event){
		this.axis = this.getAxis(event);
	},
	moveEpicenter : function(event){
		var axis = this.getAxis(event);
		
		if(!this.axis){
			this.axis = axis;
		}
		this.generateEpicenter(axis.x, axis.y, axis.y - this.axis.y);
		this.axis = axis;
	},
	generateEpicenter : function(x, y, velocity){
		if(y < this.height / 2 - this.THRESHOLD || y > this.height / 2 + this.THRESHOLD){
			return;
		}
		var index = Math.round(x / this.pointInterval);
		
		if(index < 0 || index >= this.points.length){
			return;
		}
		this.points[index].interfere(y, velocity);
	},
	reverseVertical : function(){
		this.reverse = !this.reverse;
		
		for(var i = 0, count = this.fishes.length; i < count; i++){
			this.fishes[i].reverseVertical();
		}
	},
	controlStatus : function(){
		for(var i = 0, count = this.points.length; i < count; i++){
			this.points[i].updateSelf();
		}
		for(var i = 0, count = this.points.length; i < count; i++){
			this.points[i].updateNeighbors();
		}
		if(this.fishes.length < this.fishCount){
			if(--this.intervalCount == 0){
				this.intervalCount = this.MAX_INTERVAL_COUNT;
				this.fishes.push(new FISH(this));
			}
		}
	},
	render : function(){
		requestAnimationFrame(this.render);
		this.controlStatus();
		this.context.clearRect(0, 0, this.width, this.height);
		this.context.fillStyle = 'hsl(0, 0%, 95%)';
		
		for(var i = 0, count = this.fishes.length; i < count; i++){
			this.fishes[i].render(this.context);
		}
		this.context.save();
		this.context.globalCompositeOperation = 'xor';
		this.context.beginPath();
		this.context.moveTo(0, this.reverse ? 0 : this.height);
		
		for(var i = 0, count = this.points.length; i < count; i++){
			this.points[i].render(this.context);
		}
		this.context.lineTo(this.width, this.reverse ? 0 : this.height);
		this.context.closePath();
		this.context.fill();
		this.context.restore();
	}
};
var SURFACE_POINT = function(renderer, x){
	this.renderer = renderer;
	this.x = x;
	this.init();
};
SURFACE_POINT.prototype = {
	SPRING_CONSTANT : 0.03,
	SPRING_FRICTION : 0.9,
	WAVE_SPREAD : 0.3,
	ACCELARATION_RATE : 0.01,
	
	init : function(){
		this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE;
		this.height = this.initHeight;
		this.fy = 0;
		this.force = {previous : 0, next : 0};
	},
	setPreviousPoint : function(previous){
		this.previous = previous;
	},
	setNextPoint : function(next){
		this.next = next;
	},
	interfere : function(y, velocity){
		this.fy = this.renderer.height * this.ACCELARATION_RATE * ((this.renderer.height - this.height - y) >= 0 ? -1 : 1) * Math.abs(velocity);
	},
	updateSelf : function(){
		this.fy += this.SPRING_CONSTANT * (this.initHeight - this.height);
		this.fy *= this.SPRING_FRICTION;
		this.height += this.fy;
	},
	updateNeighbors : function(){
		if(this.previous){
			this.force.previous = this.WAVE_SPREAD * (this.height - this.previous.height);
		}
		if(this.next){
			this.force.next = this.WAVE_SPREAD * (this.height - this.next.height);
		}
	},
	render : function(context){
		if(this.previous){
			this.previous.height += this.force.previous;
			this.previous.fy += this.force.previous;
		}
		if(this.next){
			this.next.height += this.force.next;
			this.next.fy += this.force.next;
		}
		context.lineTo(this.x, this.renderer.height - this.height);
	}
};
var FISH = function(renderer){
	this.renderer = renderer;
	this.init();
};
FISH.prototype = {
	GRAVITY : 0.4,
	
	init : function(){
		this.direction = Math.random() < 0.5;
		this.x = this.direction ? (this.renderer.width + this.renderer.THRESHOLD) : -this.renderer.THRESHOLD;
		this.previousY = this.y;
		this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1);
		
		if(this.renderer.reverse){
			this.y = this.getRandomValue(this.renderer.height * 1 / 10, this.renderer.height * 4 / 10);
			this.vy = this.getRandomValue(2, 5);
			this.ay = this.getRandomValue(0.05, 0.2);
		}else{
			this.y = this.getRandomValue(this.renderer.height * 6 / 10, this.renderer.height * 9 / 10);
			this.vy = this.getRandomValue(-5, -2);
			this.ay = this.getRandomValue(-0.2, -0.05);
		}
		this.isOut = false;
		this.theta = 0;
		this.phi = 0;
	},
	getRandomValue : function(min, max){
		return min + (max - min) * Math.random();
	},
	reverseVertical : function(){
		this.isOut = !this.isOut;
		this.ay *= -1;
	},
	controlStatus : function(context){
		this.previousY = this.y;
		this.x += this.vx;
		this.y += this.vy;
		this.vy += this.ay;
		
		if(this.renderer.reverse){
			if(this.y > this.renderer.height * this.renderer.INIT_HEIGHT_RATE){
				this.vy -= this.GRAVITY;
				this.isOut = true;
			}else{
				if(this.isOut){
					this.ay = this.getRandomValue(0.05, 0.2);
				}
				this.isOut = false;
			}
		}else{
			if(this.y < this.renderer.height * this.renderer.INIT_HEIGHT_RATE){
				this.vy += this.GRAVITY;
				this.isOut = true;
			}else{
				if(this.isOut){
					this.ay = this.getRandomValue(-0.2, -0.05);
				}
				this.isOut = false;
			}
		}
		if(!this.isOut){
			this.theta += Math.PI / 20;
			this.theta %= Math.PI * 2;
			this.phi += Math.PI / 30;
			this.phi %= Math.PI * 2;
		}
		this.renderer.generateEpicenter(this.x + (this.direction ? -1 : 1) * this.renderer.THRESHOLD, this.y, this.y - this.previousY);
		
		if(this.vx > 0 && this.x > this.renderer.width + this.renderer.THRESHOLD || this.vx < 0 && this.x < -this.renderer.THRESHOLD){
			this.init();
		}
	},
	render : function(context){
		context.save();
		context.translate(this.x, this.y);
		context.rotate(Math.PI + Math.atan2(this.vy, this.vx));
		context.scale(1, this.direction ? 1 : -1);
		context.beginPath();
		context.moveTo(-30, 0);
		context.bezierCurveTo(-20, 15, 15, 10, 40, 0);
		context.bezierCurveTo(15, -10, -20, -15, -30, 0);
		context.fill();
		
		context.save();
		context.translate(40, 0);
		context.scale(0.9 + 0.2 * Math.sin(this.theta), 1);
		context.beginPath();
		context.moveTo(0, 0);
		context.quadraticCurveTo(5, 10, 20, 8);
		context.quadraticCurveTo(12, 5, 10, 0);
		context.quadraticCurveTo(12, -5, 20, -8);
		context.quadraticCurveTo(5, -10, 0, 0);
		context.fill();
		context.restore();
		
		context.save();
		context.translate(-3, 0);
		context.rotate((Math.PI / 3 + Math.PI / 10 * Math.sin(this.phi)) * (this.renderer.reverse ? -1 : 1));
		
		context.beginPath();
		
		if(this.renderer.reverse){
			context.moveTo(5, 0);
			context.bezierCurveTo(10, 10, 10, 30, 0, 40);
			context.bezierCurveTo(-12, 25, -8, 10, 0, 0);
		}else{
			context.moveTo(-5, 0);
			context.bezierCurveTo(-10, -10, -10, -30, 0, -40);
			context.bezierCurveTo(12, -25, 8, -10, 0, 0);
		}
		context.closePath();
		context.fill();
		context.restore();
		context.restore();
		this.controlStatus(context);
	}
};
$(function(){
	RENDERER.init();
});

2. 修改 _config.butterfly.yml 文件的 inject 的 bottom 处。

- - <script defer src="/js/colorfishes.js"></script> # 页脚养鱼(彩色)    
+ - <script defer src="/js/fish.js"></script>

3. 修改 _config.butterfly.yml 文件。

# Footer Background
footer_bg: false

网站背景

默认显示白色，可设置图片或者颜色。

修改 _config.butterfly.yml 文件。

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

代码框展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 > 可展开代码

• true: 全部代码框不展开，需点击 > 打开
• false: 代码框展开，有 > 点击按钮
• none: 不显示 > 按钮

修改 _config.butterfly.yml 文件。

highlight_shrink: true # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button

Hexo在顶部增加天气小部件

原教程链接：Hexo在顶部增加天气小部件

1. 在和风天气插件中创建一个模板，点击生成代码。需要登录。

2. 在 blog/themes/butterfly/source/js 目录下创建一个 weather.js 文件，将生成的代码写入。下面代码需要写入自己的 key 值。

WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "FF9900",
    "tmpSize": "16",
    "cityColor": "CCCCCC",
    "citySize": "16",
    "aqiColor": "D9D9D9",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "15px 10px 10px 20px",
    "shadow": "0",
    "language": "auto",
    "borderRadius": "5",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": ""
  }
}

3. 修改 _config.butterfly.yml 文件，在 inject 的 bottom 处引入 js 文件。

- <script defer src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
- <script defer src="/js/weather.js"></script>

4. 修改 blog/themes/butterfly/layout/includes/header/nav.pug 文件。

nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]
+  #he-plugin-simple
+  #none_space
    
  #menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search-button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
          span=' '+_p('search.title')
    !=partial('includes/header/menu_item', {}, {cache: true})

    #toggle-menu
      a.site-page
        i.fas.fa-bars.fa-fw

5. 修改 blog/themes/butterfly/source/css/_layout/head.styl 文件。

-  #blog_name
+  #none_space
    flex: 1

Gitcalendar

原教程链接：Gitcalendar

1. 安装插件。

npm install hexo-filter-gitcalendar --save

2. 访问Vercel官网，注册登录。点击 New Project 按钮。

3. 点击下图按钮，引入第三方 Git 仓库。

4. 输入 https://github.com/Zfour/python_github_calendar_api.git，然后点击 Continue 按钮。

5. 输入仓库名（任意），取消 Create private Git Repository 的勾选，点击 Create 按钮。

6. 点击 Go to Dashboard 按钮。获得 API，如 github-calendar-api-nine.vercel.app。

7. 在 _config.butterfly.yml 文件中，添加下面的代码。user：自己的 Github 用户名，apiurl：上面的获得的 API。

# hexo-filter-gitcalendar
# see https://akilar.top/posts/1f9c68c9/
gitcalendar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  # butterfly挂载容器
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  # volantis挂载容器
  # layout:
  #   type: class
  #   name: l_main
  #   index: 0
  # matery挂载容器
  # layout:
  #   type: id
  #   name: indexCard
  #   index: 0
  # mengd挂载容器
  # layout:
  #   type: class
  #   name: content
  #   index: 0
  user: LuYF-Lemon-love #git用户名
  apiurl: 'https://github-calendar-api-nine.vercel.app'
  minheight:
    pc: 280px #桌面端最小高度
    mibile: 0px #移动端最小高度
  color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
  # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
  # color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
  container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug语法
  gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
  gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js

注意，2022 年 8 月 27 日下午，中国大陆 IP 不能使用 Vercel 自动生成的域名，需要自定义域名，如 gitcalendar.luyf-lemon-love.space。首先，登录 Vercel，进入你的 github-calendar-api 项目，然后点击 Setting -> Domains，输入你的自定义域名。Vercel 会给出你的需要解析的 CNAME 记录，最后登录你的域名解析平台（如 DNSPod ）解析域名。Vercel 自定义域名可以参考00012-Hexo博客补充-ubuntu。

Sidebar Card Clock

原教程链接：Sidebar Card Clock

1. 安装插件。

npm install hexo-butterfly-clock --save

2. 在 _config.butterfly.yml 文件中，添加如下代码。

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif #加载动画自定义
  clock_css: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.css
  clock_js: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js
  ip_api: https://pv.sohu.com/cityjson?ie=utf-8

Hexo侧边栏添加微博热搜

原教程链接：Hexo侧边栏添加微博热搜

1. 在 blog/themes/butterfly/layout/includes/widget 目录下新建 card_weibo.pug 文件，并写入如下代码。

if theme.aside.card_weibo.enable
  .card-widget.card-weibo
    .card-content
      .item-headline
        i.fab.fa-weibo
        span 微博热搜
      #weibo-container
        .weibo-list

2. 修改 blog/themes/butterfly/layout/includes/widget/index.pug 文件中的 page 项代码。

else
  //- page
  !=partial('includes/widget/card_author', {}, {cache: true})
  !=partial('includes/widget/card_announcement', {}, {cache: true})
+  !=partial('includes/widget/card_weibo', {}, {cache: true})
  !=partial('includes/widget/card_top_self', {}, {cache: true})

3. 在 blog/themes/butterfly/source/js 目录中，新建 weibo.js 文件，并写入如下代码。

fetch('https://weibo-9qsvnblo6-pc-study.vercel.app/api').then(data=>data.json()).then(data=>{
    let html = '<style>.weibo-new{background:#ff3852}.weibo-hot{background:#ff9406}.weibo-jyzy{background:#ffc000}.weibo-recommend{background:#00b7ee}.weibo-adrecommend{background:#febd22}.weibo-friend{background:#8fc21e}.weibo-boom{background:#bd0000}.weibo-topic{background:#ff6f49}.weibo-topic-ad{background:#4dadff}.weibo-boil{background:#f86400}#weibo-container{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}#weibo-container::-webkit-scrollbar{display:none}.weibo-list-item{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:nowrap}.weibo-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto}.weibo-num{float:right}.weibo-hotness{display:inline-block;padding:0 6px;transform:scale(.8) translateX(-3px);color:#fff;border-radius:8px}</style>'
    html += '<div class="weibo-list">'
    let hotness = {
        '爆': 'weibo-boom',
        '热': 'weibo-hot',
        '沸': 'weibo-boil',
        '新': 'weibo-new',
        '荐': 'weibo-recommend',
        '音': 'weibo-jyzy',
        '影': 'weibo-jyzy',
        '剧': 'weibo-jyzy',
        '综': 'weibo-jyzy'
    }
    for (let item of data) {
        html += '<div class="weibo-list-item"><div class="weibo-hotness ' + hotness[(item.hot || '荐')] + '">' + (item.hot || '荐') + '</div>' + '<span class="weibo-title"><a title="' + item.title + '"href="' + item.url + '" target="_blank" rel="external nofollow noreferrer">' + item.title + '</a></span>' + '<div class="weibo-num"><span>' + item.num + '</span></div></div>'
    }
    html += '</div>'
    document.getElementById('weibo-container').innerHTML = html
}
).catch(function(error) {
    console.log(error);
});

4. 在 _config.butterfly.yml 文件 inject 的 bottom 处引入上面的脚本。

- <script defer src="/js/weibo.js"></script>

5. 在 blog/themes/butterfly/source/css/_custom 亩下创建 weibo.css 文件，写入下面代码。

#weibo-container{
  width: 100%; 
  height: 150px;
  font-size: 95%;
}

.weibo-new{
  background:#ff3852
}
.weibo-hot{
  background:#ff9406
}
.weibo-jyzy{
  background:#ffc000
}
.weibo-recommend{
  background:#00b7ee
}
.weibo-adrecommend{
  background:#febd22
}
.weibo-friend{
  background:#8fc21e
}
.weibo-boom{
  background:#bd0000
}
.weibo-topic{
  background:#ff6f49
}
.weibo-topic-ad{
  background:#4dadff
}
.weibo-boil{
  background:#f86400
}
#weibo-container{
  overflow-y:auto;
  -ms-overflow-style:none;
  scrollbar-width:none
}
#weibo-container::-webkit-scrollbar{
  display:none
}
.weibo-list-item{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  flex-wrap:nowrap
}
.weibo-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-right:auto
}
.weibo-num{
  float:right
}
.weibo-hotness{
  display:inline-block;
  padding:0 6px;
  transform:scale(.8) translateX(-3px);
  color:#fff;
  border-radius:8px
}

6. 在 _config.butterfly.yml 文件的 aside 处添加如下配置。

  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
+  card_weibo:
+    enable: true
+    sort_order:

星空背景和流星特效

原教程链接：如何让你的博客拥有星空背景和流星特效

1. 在 blog/themes/butterfly/source/js 目录下，新建 universe.js 文件，粘贴下面代码。

function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()

2. 在 blog/themes/butterfly/source/css/_custom 目录下，新建 universe.css 文件，粘贴下面代码。

/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

3. 修改 _config.butterfly.yml 文件，在 inject 的 bottom 处引入 js 文件。

- <canvas id="universe"></canvas>
- <script defer src="/js/universe.js"></script>

4. 只有夜间模式生效。

插入 PDF

1. 安装 hexo-pdf 插件:

hexo-pdf 代码仓库: https://github.com/superalsrk/hexo-pdf .

$ npm install --save hexo-pdf

2. 使用方法:

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

{% pdf ./bash_freshman.pdf %}

example

{% pdf https://gcore.jsdelivr.net/gh/LuYF-Lemon-love/susu-book/read/pybind11-230218.pdf %}

---

jsDelivr 域名

jsDelivr 域名: cdn.jsdelivr.net

jsDelivr 有很多的 CDN 赞助商共同支持，每一个服务商都会有自己的专有子域名:

• CloudFlare：test1.jsdelivr.net

• CloudFlare：testingcf.jsdelivr.net

• Fastly：fastly.jsdelivr.net

• GCORE：gcore.jsdelivr.net

![](https://test1.jsdelivr.net/gh/LuYF-Lemon-love/susu-girls/girls/002-%E8%93%9D%E8%89%B2%E5%A4%B4%E5%8F%91.png)

基于腾讯云 COS 对象存储部署 hexo 博客

源教程地址: https://www.jianshu.com/p/3d796ec56160 .

插件地址: https://github.com/wertycn/hexo-deployer-qcloud-cos .

腾讯云官方设置静态网站教程: https://cloud.tencent.com/document/product/436/14984#.E6.93.8D.E4.BD.9C.E6.AD.A5.E9.AA.A4 .

使用 CDN 域名无法访问配置好的静态网站怎么办？: https://cloud.tencent.com/document/product/436/56555#.E4.BD.BF.E7.94.A8-cdn-.E5.9F.9F.E5.90.8D.E6.97.A0.E6.B3.95.E8.AE.BF.E9.97.AE.E9.85.8D.E7.BD.AE.E5.A5.BD.E7.9A.84.E9.9D.99.E6.80.81.E7.BD.91.E7.AB.99.E6.80.8E.E4.B9.88.E5.8A.9E.EF.BC.9F .

1. 安装 hexo-deployer-qcloud-cos 插件:

npm install hexo-deployer-qcloud-cos --save

2. 在hexo项目配置文件_config.yml中添加如下部署配置：

deploy:
    type: qcloud-cos
    cosRegion: <您的cos bucket所在区域代码>
    cosSecretId: <您的cos accessKeyId>
    cosSecretKey: <您的cos accessKeySecret>
    cosBucket: <您的cos bucket名称>
    cosAppid:  <您的腾讯云账户appid>
    remotePath: <您要部署的目录,默认为根目录,默认无需设置>

3. 获取 APPID.

4. 获取 SecretId 和 SecretKey.

5. 获取 bucket 和 region.

首先从地域和访问域名中选择距离自己较近或者自己喜欢的区域.

bucket 是我们创建的对象存储的空间名称.

6. 将上面的键值填入配置文件 _config.yml 中.

deploy:
    type: qcloud-cos
    cosRegion: <您的cos bucket所在区域代码>
    cosSecretId: <您的cos accessKeyId>
    cosSecretKey: <您的cos accessKeySecret>
    cosBucket: <您的cos bucket名称>
    cosAppid:  <您的腾讯云账户appid>
    remotePath: <您要部署的目录,默认为根目录,默认无需设置>

7. 部署(将自动创建存储桶):

hexo cl
hexo g
hexo d

8. 修改存储桶 bucket 设置. 进入控制台对象存储管理页面, 点击刚刚创建的存储桶名称, 进入存储桶详情页面. 开启静态网站. 之后访问 https://blog-1311975210.cos-website.ap-nanjing.myqcloud.com 即可访问我们刚才部署的博客.

---

设置自定义域名

点击存储桶详情页面的域名管理选项卡，在自定义源站域名栏目下点击添加域名，源站类型选择【静态网站源站】，在域名位置输入博客要解析的域名，点击保存，复制CNAME值，到域名服务商处设置解析，此处需要设置的域名必须时已经备案过的域名，若域名尚未备案，则不能设置。

1. 登录 对象存储控制台 。 在左侧导航栏中，单击存储桶列表，进入存储桶列表页面。

2. 单击需要配置域名的存储桶，进入存储桶配置页面。

3. 单击左侧的域名与传输管理 > 自定义 CDN 加速域名配置项，单击添加域名，配置如下选项。若您之前在老版本 COS 控制台使用过“自定义域名”，则在新版控制台不显示“自定义 CDN 加速域名”，仍显示“自定义域名”。

4. 我们选择域名为 server.luyf-lemon-love.space，加速地域为 中国境内，源站类型为 静态网站源站，由于我们的 COS 为公有读私有写，因此不开启回源鉴权。

5. 点击保存。点击 去 CDN 控制台配置进入 CDN 控制台，点击域名管理。

6. 配置 CNAME，当您在腾讯云 CDN 内成功完成添加域名后，腾讯云 CDN 会为您的域名分配一个专属的 CNAME 地址，您还需要完成 CNAME 配置，才可以将用户的访问指向腾讯云 CDN 节点，使CDN加速生效。因为 DNS 变更解析到实际生效需要一段时间，期间可能会导致网站暂时不可访问，请您留意变更操作对业务的影响。请注意，CNAME 域名不可以直接作为访问域名使用。

7. 如果您当前的域名已托管于腾讯云 DNSPod 内，且当前账号有该域名的解析权限，则可以在添加完域名后，使用一键配置完成域名配置。您可后续前往 dnspod 控制台 管理解析记录。

8. 在域名管理列表内，鼠标悬浮在 CNAME 前的图标上，即可看到相关提示，单击一键配置进入 CNAME 配置界面。

9. 腾讯云 CDN 将默认为您在 DNSPod 内针对该域名增加一条 CNAME 解析记录值，TTL 默认值为600。如果您的域名内已有一条 CNAME 解析记录值，为了防止 CNAME 解析冲突，将会为您自动删除原有的 CNAME 解析记录并增加一条新的 CNAME 解析记录值。

10. 点击 去 CDN 控制台配置进入 CDN 控制台，进行 HTTPS配置，并开启 强制跳转。

11. 合并回源配置.

文章置顶

源教程地址：https://blog.csdn.net/weixin_43372529/article/details/114176470 。

1. 运行下面命令安装插件：

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

2. 在需要置顶的文章的Front-matter中加上top: true/数字即可，数字越大，文章越靠前。

引用块

源教程地址：https://hexo.io/zh-cn/docs/tag-plugins 。

在文章中插入引言，可包含作者、来源和标题。语法如下:

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

没有提供参数，则只输出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

@DevDocstwitter.com/devdocs/status/356095192085962752

引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Seth GodinWelcome to Island Marketing

B站视频

参考：http://www.87com.com/tag/bilibili嵌入代码禁止自动播放

{% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=209733780&bvid=BV17a411r7AV&cid=462112443&page=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe>
</div>
{% endraw %}

index_img 图片变亮

参考：

1. http://www.manongjc.com/detail/32-aljnzxruwdmhmvc.html
2. https://blog.csdn.net/m0_71172453/article/details/128977978

修改文件：themes\butterfly\source\css\_layout\head.styl

#page-header
  position: relative
  width: 100%
  background-color: $light-blue
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
  transition: all .5s

  &:not(.not-top-img):before
    position: absolute
    width: 100%
    height: 100%
-   background-color: alpha($dark-black, .3)
+   background-color: alpha($dark-black, .0)
    content: ''

结语

第十八篇博文写完，开心！！！！

今天，也是充满希望的一天。