Hexo 优化汇总

custom_file_path:
  header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  variable: source/_data/variables.styl
  mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

npm install -g browser-sync
npm install hexo-browsersync --save

npm install gulp --save

npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save

// gulp 间距调整
span.leancloud-visitors-count, span.post-comments-count.valine-comment-count {
  padding-left: 2px;
}
i.fa.fa-ravelry {
  padding-left: 5px;
}

set "a=%date:~,4%"
set "b=%date:~5,2%"
set "c=%date:~8,2%"
hexo new "%a%-%b%-%c%"

{{ __('symbol.comma') }}

{{ __('>') }}

.category-list ul {
  list-style: none;
  li:before {
    content: '>>';
  }
}

h1, h2, h3, h4, h5, h6 {
  border-bottom: 2px solid #8c8c8c;
  padding: 0 5% 2px 0;
}

// 底部字体
.footer {
  color: $fontColor;
  font-size: 16px;
  +mobile() {
    font-size: 12px;
  }
  .busuanzi-value {
    font-weight: bold;
  }
}

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

// 记忆浏览位置
$(function() {
  if (localStorage.tempScrollTop) {
    $(window).scrollTop(localStorage.tempScrollTop);
  }
});
$(window).on("scroll", function() {
  localStorage.setItem("tempScrollTop", $(window).scrollTop());
});
window.onbeforeunload = function() {
  var tempScrollTop = $(window).scrollTop();
  localStorage.setItem("tempScrollTop", tempScrollTop);
};

$content-desktop                = 850px
$content-desktop-large          = 950px
$content-desktop-largest        = 1100px

  {% for post in page.posts %}
    {{ post_template.render(post) }}
  {% endfor %}

  {% for post in page.posts %}
    {# Show year #}
    {% set year %}
    {% set post.year = date(post.date, 'YYYY') %}
    {% if post.year !== year %}
    {% set year = post.year %}
    <div class="collection-title">
      <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
    </div>
    {% endif %}
    {# endshow #}
    {{ post_template.render(post) }}
  {% endfor %}

{% block script_extra %}
  {% if theme.use_motion %}
  <script type="text/javascript" id="motion.page.archive">
    $('.archive-year').velocity('transition.slideLeftIn');
  </script>
  {% endif %}
{% endblock %}

  {% for post in page.posts %}
    {{ post_template.render(post) }}
  {% endfor %}

  {% for post in page.posts %}
    {# Show year #}
    {% set year %}
    {% set post.year = date(post.date, 'YYYY') %}
    {% if post.year !== year %}
    {% set year = post.year %}
    <div class="collection-title">
      <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
    </div>
    {% endif %}
    {# endshow #}
    {{ post_template.render(post) }}
  {% endfor %}

{% block script_extra %}
  {% if theme.use_motion %}
  <script type="text/javascript" id="motion.page.archive">
    $('.archive-year').velocity('transition.slideLeftIn');
  </script>
  {% endif %}
{% endblock %}

#SOHUCS #SOHU_MAIN .module-cmt-notice{display:none !important;}
.section-service-w{display:none !important;}
#SOHUCS #SOHU_MAIN .module-cmt-box .post-wrap-w .post-wrap-main{background:none;background-image:url(https://i.loli.net/2017/08/05/5985668d58744.png) !important;}
#SOHUCS{position:relative;z-index:0 !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .split-hr{display:none !important;}
.phone-login{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper.changyan-login-dialog-wrapper-main{height:250px !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-group .login-item .login-logo-phone{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-instruction{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-group .login-item .login-logo-wechat{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper.changyan-login-dialog-wrapper-main{background:none;background-image:url(https://i.loli.net/2017/08/05/59856762568bb.png) !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .cy-logo{background:none !important;}
#SOHUCS #SOHU_MAIN .module-cmt-box .post-wrap-w .wrap-action-w .action-issue-w .issue-btn-w a .btn-fw{background:none;background-image:url(https://i.loli.net/2017/08/05/5985612ad66f5.png) !important;}
#SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w, #SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w .service-wrap-w, #SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w .service-wrap-w a{height:0px !important;overflow:hidden !important;}

{% include '_custom/custom.njk' %}

<script type="text/javascript" src="/lib/zclip/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>

{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:15px;"><br><br><br>
-------------文章结束啦 ~\(≧▽≦)/~ 感谢您的阅读-------------</div>
<br>

  <div>
  {% if not is_index %}
  {% include 'passage-end-tag.njk' %}
  {% endif %}
</div>

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

<!-- 点击特效 -->
<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/src/fireworks.js"></script>

{{ live2d() }}

live2d:
  model: koharu
  width: 150
  height: 300
  scaling: 2
  mobileShow: true
  mobileScaling: 0.5
  opacityDefault: 1
  position: left
  horizontalOffset: 10
  verticalOffset: -40
  className: live2d
  id: live2dcanvas

#Share
mob_share:
  appkey: ******

 {% include '../_partials/share/mob_share.njk' %}

---
title: Hexo 优化汇总
categories: 开发
tags:
  - 前端
  - Hexo
---

// 文章置顶标签样式
.post-sticky-flag {
  position: absolute;
  right: 0px;
  bottom: 32px;
  pointer-events: none;
+mobile() {
  bottom: 38px;
  right: -25px;
  }
}
.post-sticky-flag {
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

// 评分留白更改
.post-widgets {
  padding-top: 0px;
}
.post-nav {
  margin-top: 30px;
}

// 点击侧栏以外区域时关闭侧栏
$('body').on('click',function(e){
  var bSidebarShow = $('#sidebar').css('display')==='block' && $('#sidebar').width() > 0;
  var bFlag = $(e.target).parents('#sidebar,.sidebar-toggle').length > 0;
  if(bSidebarShow && !bFlag){
    $('.sidebar-toggle-line-wrap').trigger('click');
    e.preventDefault();
  }
});

<div class="top-scroll-bar"></div>

//顶部阅读进度条
.top-scroll-bar {
  position: fixed;
  height: 3px;
  top: 0;
  left: 0;
  transition-duration: 0.7s,0.7s;
  transiton-property: width,background;
  z-index: 99999;
  display: none;
  background: #37C6C0;
}

(function pngackUniversalModuleDefinition(root,factory){if(typeof exports==='object'&&typeof module==='object')module.exports=factory();else if(typeof define==='function'&&define.amd)define([],factory);else if(typeof exports==='object')exports["POWERMODE"]=factory();else root["POWERMODE"]=factory()})(this,function(){return(function(modules){var installedModules={};function __pngack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__pngack_require__);module.loaded=true;return module.exports}__pngack_require__.m=modules;__pngack_require__.c=installedModules;__pngack_require__.p="";return __pngack_require__(0)})([function(module,exports,__pngack_require__){'use strict';var canvas=document.createElement('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText='position:fixed;top:0;left:0;pointer-events:none;z-index:999999';window.addEventListener('resize',function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight});document.body.appendChild(canvas);var context=canvas.getContext('2d');var particles=[];var particlePointer=0;POWERMODE.shake=true;function getRandom(min,max){return Math.random()*(max-min)+min}function getColor(el){if(POWERMODE.colorful){var u=getRandom(0,360);return'hsla('+getRandom(u-10,u+10)+', 100%, '+getRandom(50,80)+'%, '+1+')'}else{return window.getComputedStyle(el).color}}function getCaret(){var el=document.activeElement;var bcr;if(el.tagName==='TEXTAREA'||(el.tagName==='INPUT'&&el.getAttribute('type')==='text')){var offset=__pngack_require__(1)(el,el.selectionStart);bcr=el.getBoundingClientRect();return{x:offset.left+bcr.left,y:offset.top+bcr.top,color:getColor(el)}}var selection=window.getSelection();if(selection.rangeCount){var range=selection.getRangeAt(0);var startNode=range.startContainer;if(startNode.nodeType===document.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();return{x:bcr.left,y:bcr.top,color:getColor(startNode)}}return{x:0,y:0,color:'transparent'}}function createParticle(x,y,color){return{x:x,y:y,alpha:1,color:color,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function POWERMODE(){{var caret=getCaret();var numParticles=5+Math.round(Math.random()*10);while(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+1)%500}}{if(POWERMODE.shake){var intensity=1+2*Math.random();var x=intensity*(Math.random()>0.5?-1:1);var y=intensity*(Math.random()>0.5?-1:1);document.body.style.marginLeft=x+'px';document.body.style.marginTop=y+'px';setTimeout(function(){document.body.style.marginLeft='';document.body.style.marginTop=''},75)}}};POWERMODE.colorful=false;function loop(){requestAnimationFrame(loop);context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<particles.length;++i){var particle=particles[i];if(particle.alpha<=0.1)continue;particle.velocity.y+=0.075;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3)}}requestAnimationFrame(loop);module.exports=POWERMODE},function(module,exports){(function(){var properties=['direction','boxSizing','width','height','overflowX','overflowY','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','paddingTop','paddingRight','paddingBottom','paddingLeft','fontStyle','fontVariant','fontWeight','fontStretch','fontSize','fontSizeAdjust','lineHeight','fontFamily','textAlign','textTransform','textIndent','textDecoration','letterSpacing','wordSpacing','tabSize','MozTabSize'];var isFirefox=window.mozInnerScreenX!=null;function getCaretCoordinates(element,position,options){var debug=options&&options.debug||false;if(debug){var el=document.querySelector('#input-textarea-caret-position-mirror-div');if(el){el.parentNode.removeChild(el)}}var div=document.createElement('div');div.id='input-textarea-caret-position-mirror-div';document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace='pre-wrap';if(element.nodeName!=='INPUT')style.wordWrap='break-word';style.position='absolute';if(!debug)style.visibility='hidden';properties.forEach(function(prop){style[prop]=computed[prop]});if(isFirefox){if(element.scrollHeight>parseInt(computed.height))style.overflowY='scroll'}else{style.overflow='hidden'}div.textContent=element.value.substring(0,position);if(element.nodeName==='INPUT')div.textContent=div.textContent.replace(/\s/g,"\u00a0");var span=document.createElement('span');span.textContent=element.value.substring(position)||'.';div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed['borderTopWidth']),left:span.offsetLeft+parseInt(computed['borderLeftWidth'])};if(debug){span.style.backgroundColor='#aaa'}else{document.body.removeChild(div)}return coordinates}if(typeof module!="undefined"&&typeof module.exports!="undefined"){module.exports=getCaretCoordinates}else{window.getCaretCoordinates=getCaretCoordinates}}())}])});

<!-- 打字礼花及震动特效 -->
<script type="text/javascript" src="https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/js/activate-power-mode.js"></script>
<script>
  POWERMODE.colorful = true; // ture 为启用礼花特效
  POWERMODE.shake = false; // false 为禁用震动特效
  document.body.addEventListener('input', POWERMODE);
</script>

// 折叠
$(document).ready(function(){
  $(document).on('click', '.fold_hider', function(){
    $('>.fold', this.parentNode).slideToggle();
    $('>:first', this).toggleClass('open');
  });
  //默认情况下折叠
  $("div.fold").css("display","none");
});

/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
  var text = args[0];
  if(!text) text = "点击展开／折叠内容";
  return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

// 折叠
.hider_title {
  cursor: pointer;
  color: #ef4a05;
  margin-bottom: 20px;
}
.close:after {
  content: " ▼";
}
.open:after {
  content: " ▲";
}

<span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>

  <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">

  <span class="post-meta-item">
    <a title="valine" href="{{ url_for(post.path) }}#valine-comments" itemprop="discussionUrl">
    <i class="far fa-comment"></i>评论数
      <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
    </a>
  </span>

{{ __('cheers.' + cheers) }}

# LazyLoad
lazyload:
  enable: true
  onlypost: false
  loadingImg: /images/loading.gif

![Alt text](./imageurl)

lazyload:
  enable: true
  # thumbPath: '/images/thumb'
  # className: #optional e.g. .J-lazyload-img
  # loadingImg: #optional eg. /images/loading.png

vendors:
  fontawesome: /fontawesome/all.min.css