搭建hexo博客以及优化

安装hexo

百度很多基本搭建hexo，我这里使用了ocean主题。 "ocean主题up主网站"

优化开始

添加点击爱心特效

创建love.js,下面代码copy到js中.

/*网页鼠标点击特效（爱心）*/
!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);

将love.js文件放到路径/themes/ocean/source/js/src里面，然后打开\themes\ocean\layout_partial\ after-footer.ejs文件, 在最后一行写入：

<% if (theme.lovejs){ %>
	<%- js('/js/love.js') %>
<% } %> 

是爱心生效 themes/ocean/_config.yml最后一行写入：

#点击爱心特效
lovejs: true

修改视频,手机端展示

hexo\themes\ocean\layout\_partial\ocean.ejs

#注销掉video
#把视频转换成动图 gif
<img src="<%- theme.ocean.path %>ocean.gif">

相册图片加载慢

2018年8月19日更新了一次 ocean ，使用了 justifiedGallery 。

优势：相对于 flex 布局的 object-fit:cover 属性而言，照片显示完整，浏览器兼容更好。
缺陷：慢，因为我没有解决掉照片懒加载的问题，所以需要照片都加载过来才能一起显示，希望喜欢 Ocean 设计的高手们能一起来开发。
现在情况下，如果还是更在意照片加载速度快一些的话，那么修改 layout/_partial/article.ejs 第 24 行：

<%- partial('post/justifiedGallery') %>
为：

<%- partial('post/albums') %>

Hexo-abbrlink生成唯一永久文章链接及小优化

Hexo原有的链接生成permalink包含中文，且标题更改之后原链接失效，现在采用hexo-abbrlink实现永久唯一链接

#1、安装abbrlink插件
npm install hexo-abbrlink --save 
#2、主题_config.yml 中修改
permalink: posts/:year:month:day:hour:minute:second-:abbrlink.html     # 将原来文章的地址修改为这个
 
# 并添加如下配置：
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

安装看板娘

github插件官网

#npm 安装
npm install --save  hexo-helper-live2d #官方的
npm install --save live2d-widget-model-haruto #喜欢的小人

#hexo config配置
live2d:
  enable: true  #是否显示看板娘
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-haruto  #模板目录，在node_modules里，就刚刚复制的那些，直接更换名字即可
  display:
    position: left   #宽高以及位置自己看着调
    width: 150 
    height: 250
    #起点左下角
    hOffset: -20  # 向左右偏移
    vOffset: -20  # 向上下偏移
  mobile:
    show: true  #是否在手机进行显示
  react:
    opacity: 0.8  # 模型透明度

hexo-all-minifier使用

这款工具它兼顾了hexo-neat的易用性，和gulp的功能。压缩文件到极致。

#npm 安装
npm install hexo-all-minifier --save
#hexo config配置
#集所有功能于一身。的缩小和优化插件花园
all_minifier: true

# html压缩
html_minifier:
  enable: true
  ignore_error: false
  silent: false
  exclude:

# css压缩
css_minifier:
  enable: true
  silent: false
  exclude: 
    - '*.min.css'
    
# js压缩
js_minifier:
  enable: true
  mangle: true
  silent: false
  output:
  compress:
  exclude: 
    - '*.min.js'
js_concator:
  enable: false
  bundle_path: 4
  front: false
  silent: false

# 图片优化
image_minifier:
  enable: true
  interlaced: true
  multipass: true
  optimizationLevel: 2
  pngquant: true
  progressive: false

hexo-lazyload-image图片懒加载使用

所有的延迟加载图像只有在当前视窗中才会显示。

# 1、在根目录下执行安装
npm install hexo-lazyload-image --save
# 2、添加配置_config.yml从你的hexo项目
lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: false # optional
  preloadRatio: 3 # optional, default is 1
# 3、配置解释
onlypost
	如果为真，则只有来自帖子或页面的图像支持延迟加载。
	如果为假，你的网站的所有图片将使用惰性加载，包括远离你的主题的图片，但不包括CSS样式的背景图片。
loadingImg
	如果你保持值nothing(默认)，那么它将使用默认的加载图像。
	如果你想定制图像，那么你需要把你的加载图像复制到你当前的主题图像文件夹，然后改变这个路径来找到它。
isSPA
	出于性能考虑，isSPA已添加。如果你的主题是一个SPA页面，请将其设置为true以使延迟加载生效，
preloadRatio 
	如果为真，则在滚动期间搜索每个图像以支持SPA页面，
	如果为false(默认值)，则性能最佳。预载比该选项是为了获得更好的体验，默认值为1。这个比率意味着预加载图像的比率在当前屏幕尺寸的多少倍之内，即使这些图像不在当前视点。

Hexo中使用emoji表情

知乎网emoji表情代码查询

# Tips：据说 hexo-renderer-markdown-it 的速度要比 Hexo 原装插件要快，而且功能更多
npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

完成插件安装后还需要修改 Hexo 站点配置文件 _config.yml（不是主题配置哦）

## markdown 渲染引擎配置，默认是hexo-renderer-marked，这个插件渲染速度更快，且有新特性
markdown:
  render:
    html: true # 不转义 HTML 内容，即允许 HTML
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    - markdown-it-sup
    - markdown-it-sub
    - markdown-it-abbr
    - markdown-it-emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true  ## 永久连接
    permalinkClass: 'header-anchor'
    permalinkSymbol: '¶'

这里需要注意 render 下的 html 配置项，它的作用是控制 Markdown 渲染引擎是否转义文档中出现的 html 标签，默认为 false ，这里要设置为 true，否则会导致 `` 渲染失败。

html: true # 不转义 HTML 内容，即允许 HTML
    ## OR
html: false # 转义 HTML，< > 尖括号会被转义成 &lt; &gt;等

文章中的图片增加点击查看，fancybox

打开主题js: hexo\themes\ocean\source\js\ocean.js

#添加代码
  $(document).ready(function ($) {
    $('.anchor').click(function (event) {
      event.preventDefault();
      $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 'smooth');
    });
	//将图片改为可点击
	$('img').each(function() {
		if ($(this).parent().hasClass('fancybox')) return;
		if ($(this).hasClass('nofancybox')) return;

		// 获取图片的alt属性
		var alt = this.alt;

		var imgSrc = this.dataset.original || $(this).attr('data-src') || this.src;

		// 将img标签替换为a标签，并添加Fancybox属性和样式
		if(imgSrc){
			var fancyboxLink = $('<a />', {
			class: 'fancybox',
			'data-fancybox': 'images',
			'data-caption': alt,
			target: '_blank',
			href: imgSrc,
			rel: 'gallery_clnofasqx00024rfy918v204c noopener',
			title: alt
		});

		$(this).attr("src",imgSrc);
		fancyboxLink.append($(this).clone().removeAttr('data-original'));

		// 将原img标签替换为新的a标签
		$(this).replaceWith(fancyboxLink);
		}
	});
  });