1200字范文 > Hexo+next主题美化静态博客

Hexo+next主题美化静态博客

时间：2023-10-09 14:31:10

相关推荐

Hexo+next主题美化静态博客

前言

需要在Hexo下配置next主题

Hexo配置next主题教程：点我跳转

更改配置以后使用素质三连：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.pngmedium: /images/32x32-paimeng.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_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 Avataravatar:url: /images/avatar.pngrounded: truerotated: truesite_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 neededfunction 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; //msthis.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

在里面添加如下代码：

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 = originthis.position = { ...this.origin }this.color = colorthis.speed = speedthis.angle = anglethis.context = contextthis.renderCount = 0}draw() {this.context.fillStyle = this.colorthis.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.xthis.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 = originthis.context = contextthis.circleCount = circleCountthis.area = areathis.stop = falsethis.circles = []}randomArray(range) {const length = range.lengthconst 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() {puterCanvas = document.createElement('canvas')this.renderCanvas = document.createElement('canvas')puterContext = puterCanvas.getContext('2d')this.renderContext = this.renderCanvas.getContext('2d')this.globalWidth = window.innerWidththis.globalHeight = window.innerHeightthis.booms = []this.running = false}handleMouseDown(e) {const boom = new Boom({origin: { x: e.clientX, y: e.clientY },context: puterContext,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.stylestyle.position = 'fixed'style.top = style.left = 0style.zIndex = '999999999999999999999999999999999999999999'style.pointerEvents = 'none'style.width = this.renderCanvas.width = puterCanvas.width = this.globalWidthstyle.height = this.renderCanvas.height = puterCanvas.height = this.globalHeightdocument.body.append(this.renderCanvas)window.addEventListener('mousedown', this.handleMouseDown.bind(this))window.addEventListener('pagehide', this.handlePageHide.bind(this))}run() {this.running = trueif (this.booms.length == 0) {return this.running = false}requestAnimationFrame(this.run.bind(this))puterContext.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(puterCanvas, 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="///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 | textcursor_effect: love# 打字特效# typing effecttyping_effect:colorful: false # 礼花特效shake: false # 震动特效

自定义侧栏时间

效果如图：

首先打开myblog\blog\themes\xuande\layout\_macro\sidebar.njk

添加如下代码：

{% 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文件

在里面添加如下代码：

<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/ 12:00:00"clock:enable: true # 粒子

live2d高级看板娘

简单Demo

导入 Font Awesome 图标支持

<link rel="stylesheet" href="/npm/@fortawesome/fontawesome-free@6/css/all.min.css">

把下面代码放入你的博客根目录下\themes\xuande\layout\_layout.njk里面（也可能是_layout.swig，取决于你的next版本）

<script src="/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 /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="/jquery/2.1.1/jquery.min.js"></script><script src="/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" ><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><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><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 picturecarousel: enable: trueitem: [{'link':'文章链接1','img':'图片链接1'},{'link':'文章链接2','img':'图片链接2'},]

ps:注意：开启这种轮播图形式的时候，在主题配置文件中不要开启fancybox，这个设置需要设置为false，不然在点击图片进行跳转时会出现The requested content cannot be loaded.Please try again later.错误

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。