hexo的使用

发表于 2021-12-10 更新于 2021-12-22 阅读次数：本文字数： 6.7k 阅读时长 ≈ 6 分钟

hexo 插件

next 主题

新版的 8.8 提供了另一种安装方式

// 在网站根目录 blog 下面执行
npm install hexo-theme-next

github 部署

安装下面插件，配置完成后，还需要做些配置

npm install hexo-deployer-git --save

// 网站配置文件
deploy:
- type: git
  repo: git@github.com:MeZhengJun/MeZhengJun.github.io.git
  branch: master
  name: MeZhengJun
  email: aslucky1977@gmail.com

阅读时间和字数

npm install hexo-symbols-count-time --save
npm i hexo-wordcount --save

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

在顶部增加一个阅读进度条

reading_progress

# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#6666FF"
  height: 3px

阅读进度百分比

pace

pace:
    enable: true
    # Themes list:
    # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
    # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
    theme: minimal

评论插件

为 Next 主题添加 Gitalk 支持

next 8 添加代码折叠

添加code-unfold.js
由于是在next主题中添加js逻辑，所以我们把code-unfold.js放置在了themes/next/source/js/code-unfold.js：

var CODE_MAX_HEIGHT = 200;
var containers = [];

// 展开
$('body').on('click', '.js_unfold_code_btn', function () {
  $(this).closest('.js_highlight_container').addClass('on');
});
// 收起
$('body').on('click', '.js_retract_code_btn', function () {
  var $container = $(this).closest('.js_highlight_container').removeClass('on');
  var winTop = $(window).scrollTop();
  var offsetTop = $container.offset().top;
  $(this).css('top', 0);
  if (winTop > offsetTop) {
    // 设置滚动条位置
    $('body, html').animate({
      scrollTop: $container.offset().top - CODE_MAX_HEIGHT
    }, 600);
  }
});
// 滚动事件，触发动画效果
$(window).on('scroll', function () {
  var scrollTop = $(window).scrollTop();
  var temp = [];
  for (let i = 0; i < containers.length; i++) {
    var item = containers[i];
    var { $container, height, $hide, hasHorizontalScrollbar } = item;
    if ($container.closest('body').length === 0) {
      // 如果 $container 元素已经不在页面上, 则删除该元素
      // 防止pjax页面跳转之后，元素未删除
      continue;
    }
    temp.push(item);
    if (!$container.hasClass('on')) {
      continue;
    }
    var offsetTop = $container.offset().top;
    var hideBtnHeight = $hide.outerHeight();
    // 减去按钮高度，减去底部滚动条高度
    var maxTop = parseInt(height - (hasHorizontalScrollbar ? 17 : 0) - hideBtnHeight);
    let top = parseInt(
      Math.min(
        Math.max(scrollTop - offsetTop, 0), // 如果小于 0 ，则取 0
        maxTop,// 如果大于 height ，则取 height
      )
    );
    // 根据 sin 曲线设置"收起代码"位置
    var halfHeight = parseInt($(window).height() / 2 * Math.sin((top / maxTop) * 90 * (2 * Math.PI/360)));
    $hide.css('top', Math.min(top + halfHeight, maxTop));
  }
  containers = temp;
});

// 添加隐藏容器
function addCodeWrap($node) {
  var $container = $node.wrap('<div class="js_highlight_container highlight-container"><div class="highlight-wrap"></div></div>').closest('.js_highlight_container');

  // 底部 "展开代码" 与 侧边栏 "收起代码"
  var $btn = $(`
    <div class="highlight-footer">
      <a class="js_unfold_code_btn show-btn" href="javascript:;">展开代码<i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </div>
    <a class="js_retract_code_btn hide-btn" href="javascript:;"><i class="fa fa-angle-up" aria-hidden="true"></i>收起代码</a>
  `);

  $container.append($btn);
  return $container;
};

function codeUnfold () {
  $('.highlight').each(function () {
    // 防止重复渲染
    if (this.__render__ === true) {
      return true;
    }
    this.__render__ = true;
    var $this = $(this);
    var height = $(this).outerHeight();
    if (height > CODE_MAX_HEIGHT) {
      // 添加展开&收起容器
      var $container = addCodeWrap($this, height);
      containers.push({
        $container,
        height,
        $hide: $container.find('.js_retract_code_btn'),
        hasHorizontalScrollbar: this.scrollWidth > this.offsetWidth,
      });
    }
  });
};

引用code-unfold.js
修改文件themes/next/layout/_scripts/index.njk

// 在最后添加
{{- next_js('code-unfold.js') }}

下面找到文件themes/next/source/js/next-boot.js：

NexT.boot.refresh = function () {
  // 添加一行代码
  codeUnfold()
  
  // ...

创建highlight.styl
可以添加theme/next/source/css/_common/components/highlight.styl文件：

// 展开收起效果
.highlight-container
  position: relative
  background-color: highlight-background
  &.on
    .highlight-footer
      display: none
    .hide-btn
      display: flex
    .highlight-wrap
      max-height: none
  .highlight-wrap
    overflow: hidden
    max-height: 200px
  .highlight-footer
    position absolute
    width: 100%
    left: 0
    bottom: 0
    height: 60px
    background-image: 'linear-gradient(-180deg, rgba(255,255,255,0) 0%, %s 65%)' % highlight-background;
    text-align: center
  .show-btn
    font-size: 12px
    color: #fff
    position: absolute
    left: 50%
    transform: translateX(-50%)
    bottom: 0
    line-height: 2em
    text-decoration: none
    padding: 0 0.8em
    text-align: center
    border-radius: 4px 4px 0
    &:hover
      text-decoration: none
  .hide-btn
    color: #fff
    font-size: 12px
    width: 22px
    position: absolute
    left: -21px
    top: 0
    line-height: 1em
    text-decoration: none
    text-align: center
    display: none
    flex-direction: column
    background-color: highlight-background
    border-radius: 4px 0 0 4px
    padding: 0.1em 0 0.6em
    transition: top ease 0.35s
  .fa-angle-up,
  .fa-angle-down
    font-style: normal
    color: #fff
  .fa-angle-up:before
    content:"\f106"
  .fa-angle-down:before
    content:"\f107"
    margin-left: 0.5em
  .js_unfold_code_btn, .js_retract_code_btn
    background: rgba(0,0,0,0.5)
    border-bottom: none !important
    &:hover
      border-bottom-color: none !important

引用样式
找到文件themes/next/source/css/_common/components/index.styl：

@import 'post';
@import 'pages';
@import 'third-party';
// 添加这一行
@import 'highlight'

背景及透明化

把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码

body {
 	background:url(/images/background.jpg);
 	background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
}

再在主题_config.yml文件中找到对应的custom_file_path

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

博客内容透明化
在上文中新建的style.styl文件中可以使博客内容透明化

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
 // opacity: 0.8;
}

.post-block {
	background: rgba(255,255,255,0.7) none repeat scroll !important;
}

.post-header{
  opacity: 1;
}
//侧边框的透明度设置
//.sidebar {
//  opacity: 0.8;
//}

.sidebar-inner {
  background: rgba(255,255,255,0.7) none repeat scroll !important;
  }

.comments {
	background: rgba(255,255,255,0.7) none repeat scroll !important;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.8;
}