Hexo+next主题美化
前言
需要在Hexo下配置next主题
Hexo配置next主题教程：https://www.cnblogs.com/xuande/p/16641543.html
更改配置以后使用素质三连：hexo clean && hexo g && hexo s即可本地看到效果。
hexo clean && hexo g && hexo s
注：部分参考自互联网，感谢各位大佬的教程
主题注入
在myblog/themes/next/_config.yml里面找到custom_file_path
把前面的注释去掉，开启主题注入功能
custom_file_path:
style: source/_data/styles.styl
找到myblog\blog\source\_data\styles.styl如果没有就创建一个
资源文件文件在myblog\blog\themes\xuande\source\images目录下配置
鼠标样式
注意开启主题注入功能
在myblog\blog\source\_data\styles.styl里面添加如下代码即可
/*鼠标样式*/
* {
cursor: url(/images/Arrow.cur),auto;
}
:active {
// cursor: url(/images/Hand.cur),auto
}
:link {
cursor: url(/images/Hand.cur),auto
}
// 鼠标样式补充
a, span.exturl {
cursor: url(/images/Hand.cur),auto
}
.posts-expand .post-meta time {
cursor: url(/images/Hand.cur),auto
}
这里的url路径就是myblog\blog\themes\xuande\source\images\Arrow.cur，下面同理
背景图片
注意开启主题注入功能
在myblog\blog\source\_data\styles.styl里面添加如下代码即可
// 添加背景图片
body {
background: url(/images/background.png);//自己喜欢的图片地址
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
自定义回到顶部样式
注意开启主题注入功能
在myblog\blog\source\_data\styles.styl里面添加如下代码即可
//自定义回到顶部样式
.back-to-top {
//right: 60px;
width: 70px; //图片素材宽度
height: 900px; //图片素材高度
top: -900px;
bottom: unset;
transition: all .5s ease-in-out;
background: url("/images/scroll.png");
//隐藏箭头图标
> i {
display: none;
}
&.back-to-top-on {
bottom: unset;
top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
}
}
自定义网站图标
在myblog/themes/next/_config.yml里面找到favicon，在这里就可以配置图标的路径，一般情况下只需要设置small和medium两个就可以
favicon:
small: /images/16x16-paimeng.png
medium: /images/32x32-paimeng.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
png文件在myblog\blog\themes\xuande\source\images目录下配置即可
效果：
设置侧边栏
在myblog/themes/next/_config.yml里面找到sidebar
修改为如下配置：
sidebar:
# Sidebar Position.
position: left
#position: right
# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300
# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post
# Sidebar padding in pixels.
padding: 18
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
开启返回顶部功能
在myblog/themes/next/_config.yml里面找到back2top
修改为如下配置：
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false
侧边栏头像设置
在myblog/themes/next/_config.yml里面找到avatr
# 侧栏头像
# Sidebar Avatar
avatar:
url: /images/avatar.png
rounded: true
rotated: true
site_state: true
图片在myblog\blog\themes\xuande\source\images目录下配置即可
鼠标移动特效
在myblog\themes\next\source\js\中新建fairyDustCursor.js文件，并添加以下代码
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}
function updateParticles() {
for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}
for( var i = particles.length -1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
function Particle() {
this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles ={
"position": "fixed",
"top": "0", //必须加
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "20px",
"will-change": "transform"
};
this.init = function(x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {x: x - 10, y: y - 20};
this.initialStyles.color = color;
console.log(color);
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element);
};
this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function() {
this.element.parentNode.removeChild(this.element);
}
}
function applyProperties( target, properties ) {
for( var key in properties ) {
target.style[ key ] = properties[ key ];
}
}
init();
})();
然后在myblog\themes\next\layout_layout.njk文件里内部引用：
<!-- 樱花特效 -->
{% if theme.sakura.enable %}
<script async src="/js/src/fairyDustCursor.js"></script>
{% endif %}
最后打开myblog/themes/next/_config.yml在最下面添加如下代码
# 樱花飘落动特效
sakura:
enable: true
鼠标点击特效
首先在themes\next\source\js\cursor\ 目录下创建love.min.js
在里面添加如下代码：
!function(e,t,a){function n(){c(".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;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(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 s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
text.js浮出文字代码
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("喜欢我", "不喜欢我");
var $i = $("<span/>").text(a[a_idx]);
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 28,
"left": x - a[a_idx].length * 8,
"position": "absolute",
"color": "#ff7a45"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
}, 1500, function() {
$i.remove();
});
a_idx = (a_idx + 1) % a.length;
});
});
fireworks.js礼花特效代码
class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin
this.position = { ...this.origin }
this.color = color
this.speed = speed
this.angle = angle
this.context = context
this.renderCount = 0
}
draw() {
this.context.fillStyle = this.color
this.context.beginPath()
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
this.context.fill()
}
move() {
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
this.renderCount++
}
}
class Boom {
constructor ({ origin, context, circleCount = 16, area }) {
this.origin = origin
this.context = context
this.circleCount = circleCount
this.area = area
this.stop = false
this.circles = []
}
randomArray(range) {
const length = range.length
const randomIndex = Math.floor(length * Math.random())
return range[randomIndex]
}
randomColor() {
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}
randomRange(start, end) {
return (end - start) * Math.random() + start
}
init() {
for(let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
})
this.circles.push(circle)
}
}
move() {
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1)
}
circle.move()
})
if (this.circles.length == 0) {
this.stop = true
}
}
draw() {
this.circles.forEach(circle => circle.draw())
}
}
class CursorSpecialEffects {
constructor() {
this.computerCanvas = document.createElement('canvas')
this.renderCanvas = document.createElement('canvas')
this.computerContext = this.computerCanvas.getContext('2d')
this.renderContext = this.renderCanvas.getContext('2d')
this.globalWidth = window.innerWidth
this.globalHeight = window.innerHeight
this.booms = []
this.running = false
}
handleMouseDown(e) {
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
})
boom.init()
this.booms.push(boom)
this.running || this.run()
}
handlePageHide() {
this.booms = []
this.running = false
}
init() {
const style = this.renderCanvas.style
style.position = 'fixed'
style.top = style.left = 0
style.zIndex = '999999999999999999999999999999999999999999'
style.pointerEvents = 'none'
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
document.body.append(this.renderCanvas)
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
window.addEventListener('pagehide', this.handlePageHide.bind(this))
}
run() {
this.running = true
if (this.booms.length == 0) {
return this.running = false
}
requestAnimationFrame(this.run.bind(this))
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1)
}
boom.move()
boom.draw()
})
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}
}
const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()
然后我们在主题自定义布局文件hexo/source/_data/body-end.swig中，没有就创建一个，在里面添加以下代码：
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
<script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
<script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
<script async src="/js/cursor/text.js"></script>
{% endif %}
在主题注入里取消 body-end.swig 的注释（主题注入教程在上面）
custom_file_path:
bodyEnd: source/_data/body-end.swig
最后打开myblog/themes/next/_config.yml在最下面添加如下代码
# 鼠标点击特效
# mouse click effect: fireworks | explosion | love | text
cursor_effect: love
# 打字特效
# typing effect
typing_effect:
colorful: false # 礼花特效
shake: false # 震动特效
自定义侧栏时间
效果如图：
首先打开myblog\blog\themes\xuande\layout\_macro\sidebar.njk
添加如下代码：
<!-- canvas粒子时钟 -->
{% if theme.diy_time.clock.enable %}
{% include '../_custom/clock.swig' %}
{% endif %}
<!-- 网站运行时间 -->
{% if theme.diy_time.runtime.enable %}
{% include '../_custom/runtime.swig' %}
{% endif %}
然后打开myblog\blog\themes\xuande\layout_custom新建clock.swig文件
在里面添加如下代码：
<!-- canvas粒子时钟 https://www.cnblogs.com/xiaohuochai/p/6368039.html
https://www.html5tricks.com/html5-canvas-dance-time.html
-->
<div id="">
<canvas id="canvas" style="width:60%;">
</div>
<script async>
(function(){
var WINDOW_WIDTH = 820;
var WINDOW_HEIGHT = 250;
var RADIUS = 7; //球半径
var NUMBER_GAP = 10; //数字之间的间隙
var u=0.65; //碰撞能量损耗系数
var context; //Canvas绘制上下文
var balls = []; //存储彩色的小球
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
var currentNums = []; //屏幕显示的8个字符
var digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
function drawDatetime(cxt){
var nums = [];
context.fillStyle="#005eac"
var date = new Date();
var offsetX = 70, offsetY = 30;
var hours = date.getHours();
var num1 = Math.floor(hours/10);
var num2 = hours%10;
nums.push({num: num1});
nums.push({num: num2});
nums.push({num: 10}); //冒号
var minutes = date.getMinutes();
var num1 = Math.floor(minutes/10);
var num2 = minutes%10;
nums.push({num: num1});
nums.push({num: num2});
nums.push({num: 10}); //冒号
var seconds = date.getSeconds();
var num1 = Math.floor(seconds/10);
var num2 = seconds%10;
nums.push({num: num1});
nums.push({num: num2});
for(var x = 0;x<nums.length;x++){
nums[x].offsetX = offsetX;
offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
//两个数字连一块，应该间隔一些距离
if(x<nums.length-1){
if((nums[x].num!=10) &&(nums[x+1].num!=10)){
offsetX+=NUMBER_GAP;
}
}
}
//说明这是初始化
if(currentNums.length ==0){
currentNums = nums;
}else{
//进行比较
for(var index = 0;index<currentNums.length;index++){
if(currentNums[index].num!=nums[index].num){
//不一样时，添加彩色小球
addBalls(nums[index]);
currentNums[index].num=nums[index].num;
}
}
}
renderBalls(cxt);
updateBalls();
return date;
}
function addBalls (item) {
var num = item.num;
var numMatrix = digit[num];
for(var y = 0;y<numMatrix.length;y++){
for(var x = 0;x<numMatrix[y].length;x++){
if(numMatrix[y][x]==1){
var ball={
offsetX:item.offsetX+RADIUS+RADIUS*2*x,
offsetY:30+RADIUS+RADIUS*2*y,
color:colors[Math.floor(Math.random()*colors.length)],
g:1.5+Math.random(),
vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
vy:-5
}
balls.push(ball);
}
}
}
}
function renderBalls(cxt){
for(var index = 0;index<balls.length;index++){
cxt.beginPath();
cxt.fillStyle=balls[index].color;
cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
cxt.fill();
}
}
function updateBalls () {
var i =0;
for(var index = 0;index<balls.length;index++){
var ball = balls[index];
ball.offsetX += ball.vx;
ball.offsetY += ball.vy;
ball.vy+=ball.g;
if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
ball.offsetY= WINDOW_HEIGHT-RADIUS;
ball.vy=-ball.vy*u;
}
if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){
balls[i]=balls[index];
i++;
}
}
//去除出边界的球
for(;i<balls.length;i++){
balls.pop();
}
}
function drawSingleNumber(offsetX, offsetY, num, cxt){
var numMatrix = digit[num];
for(var y = 0;y<numMatrix.length;y++){
for(var x = 0;x<numMatrix[y].length;x++){
if(numMatrix[y][x]==1){
cxt.beginPath();
cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
cxt.fill();
}
}
}
cxt.beginPath();
offsetX += numMatrix[0].length*RADIUS*2;
return offsetX;
}
var canvas = document.getElementById("canvas");
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;
context = canvas.getContext("2d");
//记录当前绘制的时刻
var currentDate = new Date();
setInterval(function(){
//清空整个Canvas，重新绘制内容
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
drawDatetime(context);
}, 50)
})();
</script>
最后打开myblog/themes/next/_config.yml在最下面添加如下代码
# 侧栏自定义时间
diy_time:
runtime:
enable: true #运行时间
birthday: "07/25/2022 12:00:00"
clock:
enable: true # 粒子
live2d高级看板娘
简单Demo
导入 Font Awesome 图标支持
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
把下面代码放入你的博客根目录下\themes\xuande\layout\_layout.njk里面（也可能是_layout.swig，取决于你的next版本）
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
放置位置如下：
最后在打开myblog/themes/next/_config.yml在最下面添加如下代码
# 看板娘
live2d:
enable: true
注：也可以把这两行代码删掉，可以防止与自带看板娘冲突
{% if theme.live2d.enable %}
{% endif %}
这样一个萌萌哒的看板娘就出来啦
注：如果跟自带的看板娘冲突，请先卸载自带的看板娘
自定义看板娘
首先，先把文件克隆到你的博客的source目录下（根目录下和主题目录下的sources都可以）
git clone https://github.com/stevenjoezhang/live2d-widget.git
其次，更改一下引用路径
_layout.njk：
source\live2d\autoload.js：
这样，就可以在waifu-tips.js和waifu-tips.json里面更改活动检测和对话内容了
（注：gitee有文字检测功能，如果提示违规就删掉waifu-tips.json里的"click"对话的部分文字，这gitee的检测机制我是真的服。。。。）
补充
以上是在本地更改，也可以在GitHub上Fork一份，然后用cdn加载也是可以的，条条大路通罗马嘛
如果cdn访问不了的话，不妨试试api
source\live2d\autoload.js：
添加看板娘模型：
这里我没试过，但思路是有的，留个期待，以后完善
轮播图设置
第一步：添加配置
找到博客目录下的themes\next\layout下的index文件
添加下面这一行代码
{% include '_macro/carousel.swig' %}
第二步：添加文件
在themes\next\layout\macro文件下创建carousel.swig文件。
写入以下内容：
{% if theme.carousel.enable %}
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.glyphicon-chevron-left:before{
content: "《"
}
.glyphicon-chevron-right:before{
content: "》"
}
@media (max-width: 767px){
.rights{
display: none;
}
.carousel{
width: 100% !important;
height: 100% !important;
}
.slide{
width: 100% !important;
height: 100% !important;
}
}
.carousel{
width: 100%;
height: 100%;
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform 0.6s ease-in-out;
-moz-transition: -moz-transform 0.6s ease-in-out;
-o-transition: -o-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
left: 0;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
left: 0;
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: 0.5;
filter: alpha(opacity=50);
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
outline: 0;
color: #fff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #fff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
margin: 0;
width: 12px;
height: 12px;
background-color: #fff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -10px;
font-size: 30px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -10px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
margin-right: -10px;
}
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
</style>
<div width="100%" height="320px" style="border: 0px; overflow: hidden; border-radius: 10px;" scrolling="no">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3500" >
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
{% set index = 0 %}
{% for item in theme.carousel.item %}
<li data-target="#myCarousel" data-slide-to="{{index}}"></li>
{% set index = index+1 %}
{% endfor %}
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" style="height: 280px; border-radius: 10px; width: 100%;">
{% set act = 0 %}
{% for item in theme.carousel.item %}
{% if act===0 %}
<a class="item active" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
<img src="{{item.img}}" style="width: 100%; height: 100%" >
</a>
{% set act = 1 %}
{% elseif act===1 %}
<a class="item" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
<img src="{{item.img}}" style="width: 100%; height: 100%;" >
</a>
{% endif %}
{% endfor %}
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
{% endif %}
第三步：配置文件中配置图片及链接
在next主题目录下的_config.xml主题配置文件中末尾添加如下配置：
# 主页轮播图 使用 620x310 的图片
#Home carousel map, from means link, img means picture
carousel:
enable: true
item: [
{
'link':'文章链接1',
'img':'图片链接1'
},
{
'link':'文章链接2',
'img':'图片链接2'
},
]
ps:注意：开启这种轮播图形式的时候，在主题配置文件中不要开启fancybox，这个设置需要设置为false，不然在点击图片进行跳转时会出现The requested content cannot be loaded.Please try again later.错误
Hexo+next主题美化的更多相关文章
- Hexo+Butterfly主题美化
前言 本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly版本3.4.0),hexo-theme-butterfly是基于Molunerfinn ...
- Hexo博客搭建以及Next主题美化的经验之谈
这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...
- Hexo 官方主题 landscape-plus 优化
博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...
- ICARUS主题美化
Icarus用户指南 - 主题美化 Icarus的主题样式编码文件为themes/icarus/layout/layout.jsx. 此文件定义了站点全局的样式设置.本文详细介绍了本主题针对文章分类的 ...
- hexo next主题为博客添加分享功能
title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...
- ubuntu16.04主题美化和软件推荐
前几天把ubuntu从15.10更新到了16.10,在网上看到有很多直接更新出问题的,正好赶上换SSD,于是采用全新安装,之前用ubuntu的时候装软件最让人头疼了,这回又得头疼一次了!! 索性把他记 ...
- Android源码浅析（二）——Ubuntu Root,Git,VMware Tools，安装输入法，主题美化，Dock，安装JDK和配置环境
Android源码浅析(二)--Ubuntu Root,Git,VMware Tools,安装输入法,主题美化,Dock,安装JDK和配置环境 接着上篇,上片主要是介绍了一些安装工具的小知识点Andr ...
- Hexo next主题下添加天气插件
最近在优化hexo 新搭建的博客,想给博客添加一个天气插件,奈何找了很久也没发现,好不容易发现一个天气插件 心知天气:https://www.seniverse.com/widget/get 运气不好 ...
- 开源介绍·新款简约、实用与大气的Hexo新主题：BMW
这是一个简约.大气.实用的Hexo新主题:BMW
- Ubuntu 16.04 主题美化及常用软件安装
一.主题美化 系统清理 系统更新: 安装完系统之后,需要更新一些补丁.Ctrl+Alt+T调出终端,执行一下代码: sudo apt-get update sudo apt-get upgrade 卸 ...
随机推荐
- redhat替换yum源时redhat.repo无法删除或禁用的问题
rhel7.3系统,在替换自带的repo源时发现无论是将redhat.repo重命名还是删除,在执行yum命令后总是自动又生成redhat.repo得问题,导致替换的CentOS-Base.repo, ...
- Redis高并发分布式锁详解
为什么需要分布式锁 1.为了解决Java共享内存模型带来的线程安全问题,我们可以通过加锁来保证资源访问的单一,如JVM内置锁synchronized,类级别的锁ReentrantLock. 2.但是随 ...
- P7361 「JZOI-1」拜神 （字符串）
题意: 给一个串,\(Q\) 次询问区间 \([l,r]\) 中至少出现两次的子串的最大长度. 写LCT是什么东东 以下做法很经典: 先求出 SA 以及 height 数组,然后按 height 从大 ...
- day07-2MySQL索引
MySQL索引 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,查询速度就能提高千百倍. 例子 首先,创建一个有800万条数据的表 -- 创建测试数据库 tmp C ...
- POJ3417 Network暗的连锁 （树上差分）
树上的边差分,x++,y++,lca(x,y)-=2. m条边可以看做将树上的一部分边覆盖,就用差分,x=1,表示x与fa(x)之间的边被覆盖一次,m次处理后跑一遍dfs统计子树和,每个节点子树和va ...
- How to get the return value of the setTimeout inner function in js All In One
How to get the return value of the setTimeout inner function in js All In One 在 js 中如何获取 setTimeout ...
- hyperf-搭建初始化
官方文档* https://hyperf.wiki/2.0/#/README 初步搭建1. 安装项目 composer create-project hyperf/hyperf-skeleton 2. ...
- Linux系统管理_磁盘管理——敬请期待！！！
df 显示磁盘空间使用情况 -a 全部文件系统列表 -h 以方便阅读的方式显示 -T 列出文件系统类型 du 查看目录和文件的磁盘空间使用情况 -a 显示目录中所有文件大小 -h 以易读方式显示文件大 ...
- SpringCloud怎么迈向云原生？
很多公司由于历史原因,都会有自研的RPC框架. 尤其是在2015-2017期间,Spring Cloud刚刚面世,Dubbo停止维护多年,很多公司在设计自己的RPC框架时,都会基于Spring Clo ...
- nrf9160开机测试（做主控）——连接nrfcloud云
由于作者水平有限,如有披漏欢迎指正. 测试流程: 1.前期开发准备(硬件) 2.开发环境准备(软件) 3.连接云 4.GPS测试 一.前期开发准备: nrf9160-DK版 nRF Connect f ...