网站编写

关于网站内容编写

前言

曾经使用过早期Redefine主题，后面又用过PaticleX主题，如今转战Reimu，不论哪个主题，在内容编写的过程中都遇到过不少坎坷，因此写一篇网站内容编写的基础教程

Markdown/HTML/YAML

· HTML是一种被广泛认可和采用的标记语言，有着重要的地位
· Markdown是一种轻量级标记语言，写法简单，Hexo网站的内容编写往往以Markdown为主

以上二者可以混编

Front-Matter讲解

什么是Front-Matter呢，就是在md文章头上YAML格式的配置区域，就像这样：

---
title: 文章标题
date: 创建时间
update: 更新时间
categories: 分类
tags: 标签
---

Front-Matter保存着这篇文章的基本配置信息，像文章的标题、建立日期、分类标签……
对于文章的配置修改，我们基本都在这里进行

部分语法列举：

语法	预览效果
**加粗**	加粗
*斜体*	斜体
- 列表	· 列表
~~删除线~~	删除线
'代码'	代码
[链接](https://markdown.com.cn)	链接
<ins>下划线</ins>	下划线
<p style="text-align:center">文字居中</p>	文字居中

代码类型显示

如何书写像如图这样

左上角标有类型的代码语句

　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　使用围栏代码块

```Bash　　
npm install hexo-cli -g　　
``` 　　　　　

在围栏代码块的第一行反引号后，写上类型即可

文章缩略

Q：我写完文章后，发现主页缩略显示了我的文章全部内容，十分冗余，如何解决？
A：在你想要缩略显示的部分文本下，加上一行<!-- more -->即可

独立文本文章缩略

Q：我想使一段独立的文本显示在主页的文章缩略中，怎么办？
A：在文章 Front-Matter 部分最后加入

description: |
　缩略文本

ℹ️上文所示文章缩略仅部分主题适用，需自己探索

图片位置改变

我们放置图片，有时会希望图片能居左或居右，使排版更舒适，我们便可以通过HTML来实现：

<img align="left/right(居左或居右)" src="图片链接" width="自填" height="自填">

其中，left/right选择其一施加效果。width(宽度)与height(高度)，若只填取其一，另一变量会自适应变化

文章置顶

部分主题自带文章置顶功能，像我之前用的ParticleX主题，在Front-Matter部分加上

pinned: 数字

即可实现置顶，数字决定了置顶优先级

而遇到没有自带文章置顶功能的主题，可以在网站根目录安装一个 hexo-generator-index-pin-top 插件：

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

这样就安装好了置顶插件，然后在要置顶的文章的Front-Matter部分输入

sticky: 数字

就可以置顶文章了，数字越大，被置顶文章的优先级更大
有时候 sticky 可以换成 top ，置顶才能生效，需要自己摸索

自定义JS

如果想要浏览网页时有鼠标点击的烟花特效

在 themes - 主题 - source - js 下，创建一个 firework.js 文件，在其中填入

"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(12, 24), 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, 120),
		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 - 主题 - layout - layout.jsx 中的 body 标签下末尾，添加上

<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/firework.js"></script>

即可添加上鼠标点击烟花特效了