Sakura Blog
0%

Sakura Blog备忘录

发表于

这里是博客建立时的备忘录，用于以后的数据迁移和备份

安装Hexo

全局安装

必须12.13.0版本以上，否则会出现不可预知错误

1
npm install -g hexo-cli

初始化

没有指定[folder]时默认在当前目录建站

1
hexo init [folder]

生成静态文件

1
2
3
hexo generate
// 简写
hexo g
选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
-b, --bail 生成过程中如果发生任何未处理的异常则抛出异常
-f, --force 强制重新生成文件
Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。
使用该参数的效果接近 hexo clean && hexo generate
-c, --concurrency 最大同时生成文件的数量，默认无限制

创建本地服务器

1
hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式

部署网站

1
2
3
hexo deploy 
// 简写
hexo d

部署网站。

参数 描述
-g, --generate 部署之前预先生成静态文件

使用

创建文章

1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1
hexo new "post title with whitespace"
参数 描述
-p, --path 自定义新文章的路径
-r, --replace 如果存在同名文章，将其替换
-s, --slug 文章的 Slug，作为新文章的文件名和发布后的 URL

创建标签

1
hexo new page tags
  • 文章设置
1
2
3
title: tags
date: 2017-12-02 21:01:24
type: "tags"

创建分类

1
hexo new page categories
  • 文章设置
1
2
3
title: categories
date: 2017-12-02 21:01:24
type: "categories"

清理缓存

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

小技巧

配置文件和主题分离

自从 NexT-7.3.0 开始，官方推荐使用数据文件将配置和主题分离，这样可以在不修改主题源码的情况下完成主题的配置，便于后续 next 版本更新。

我们将所有的主题配置都放在 hexo/source/_data/next.yml 中，所有的修改都将在这个文件中进行，不修改主题配置文件 next/_config.yml 。

具体步骤：

  • 在 hexo/source/_data 目录下新建 next.yml 文件，如果 _data 目录不存在，则创建 _data 目录；
  • 将主题配置文件 next/_config.yml 所有内容复制到 hexo/source/_data/next.yml 文件中；
  • 将 hexo/source/_data/next.yml 文件中 override 选项设置为 true 。

修改主题页面布局为圆角

在 hexo/source/_data 目录下新建 variables.styl 文件，填写下面内容。

1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

主题配置文件 next.yml 去除 variables.styl 的注释。

1
variable: source/_data/variables.styl

添加图片放大预览功能

next.yml 文件 fancybox 选项。

1
fancybox: true

文章阴影

在 hexo/source/_data/styles.styl 中添加下面内容。

1
2
3
4
5
6
7
// 文章阴影.post {
   margin-top: 50px;
   margin-bottom: 50px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

阅读全文

在浏览文章时只展示部分文字

1
<!-- more -->

自定义页面

这里以增加“关于”页面为例

1
hexo new page about

修改blog-hexo-new-next/source/about/index.md文件

1
2
3
4
---
title: 关于我
date: 2020-08-07 15:43:14
---

编辑主题配置文件，取消about前面的注释，如果没有也可以自己添加

1
2
menu:
  about: /about/ || fa fa-user

增加关于、标签、分类页面

主题配置文件 next.yml 修改 menu，将 about、tags、categories 的注释去除。

1
2
3
4
5
6
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

执行下面命令新建相关文件。

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

修改生成页面所在位置和相关配置。

1
2
3
source\about\index.md
source\tags\index.md
source\categories\index.md
1
2
3
4
---
title: 关于
type: "about"
---
1
2
3
4
---
title: 标签
type: "tags"
---
1
2
3
4
---
title: 分类
type: "categories"
---

设置头像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/head.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

回到顶部

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

设置代码块复制和代码高亮

主题配置文件 next.yml 中修改 codeblock 选项。

1
2
3
4
5
6
7
8
9
10
11
codeblock:
  # 代码高亮
  highlight_theme: night bright
  # 复制
  copy_button:
    # 添加复制功能
    enable: true
    # 显示文本复制结果
    show_result: true
    # 可以选择的样式: default | flat | mac
    style: mac

顶部阅读进度条

主题配置文件 next.yml 中修改 reading_progress 选项。

1
2
3
4
5
6
reading_progress:
  enable: true
  # 显示在顶部
  position: top
  color: "#06d633"
  height: 3px

更改新建文章的模板

默认新建文章没有分类这个选项，需要自己填写，现在修改 hexo/scaffolds/post.md 文件 。

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

去掉顶部黑线

在 hexo/source/_data/styles.styl 文件加入下面样式。

1
//去掉顶部黑线：.headband {display:none;}

选中颜色

修改选择文字的颜色，在 hexo/source/_data/styles.styl 文件加入下面样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection { 
    background: #06d633;
    color: #f7f7f7; 
}
/* firefox */
::-moz-selection { 
    background: #06d633;
    color: #f7f7f7;    
}

// 代码块选中颜色.highlight *::selection {
    background: #06d633;
}

在文章末尾添加“文章结束”标记

  1. 第一步：在主题hexo\source\_data下新建passage-end-tag.swig文件，并添加以下代码:
1
2
3
4
5
6
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------The END-------------</div>
    {% endif %}
</div>
/div>
  1. 打开文件themes\next\layout\_macro\post.swig，在之后<div class="post-body之后添加以下代码：
1
2
3
4
5
6
<!-- 文章结束表示语-->
<div>
  {% if theme.passage_end_tag.enabled and not is_index %}
    {% include 'post-body-end.swig' %}
  {% endif %}
</div>
  1. 打开主题配置文件
1
2
3
4
5
6
7
8
9
10
11
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

插件

搜索

1
npm install hexo-generator-searchdb

在主题_config.yml配置文件下修改成true

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: true

进度条(加载动画)

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
1
2
3
4
5
6
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: barber-shop

添加时序图

安装 Hexo 插件

在博客的根目录下，执行以下命令安装 hexo-filter-mermaid-diagrams 插件

1
yarn add hexo-filter-mermaid-diagrams  # 安装mermaid插件

NexT 启用 Mermaid

打开 NexT 主题的 _config.yml 配置文件，找到 mermaid 的配置项，并设置 enable: true，如下所示：

1
2
3
4
5
6
7
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

背景动画

NexT 支持多种背景动画，导入插件并修改对应主题配置文件即可

加载栏: pace
3D库: three
流动线条: canvas_nest
彩带: canvas_ribbon

点击爆炸效果

添加文件到`hexo/source/_data/js/fireworks.js``

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)}"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)};

添加到themes/next/layout/_layout.swig,在<body>块中写下如下代码：

1
2
3
4
5
{% if theme.fireworks %}
   <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>
{% endif %}

打开主题配置文件themes/next/_config.yml，在文件末尾添加：

1
2
# Fireworks
fireworks: true

重新生成

1
2
cd 博客目录
hexo g
-------------The END-------------