Hexo博客首页添加轮播图

最新推荐文章于 2023-03-10 19:06:43 发布
最新推荐文章于 2023-03-10 19:06:43 发布
阅读量2.1k 收藏 7
点赞数 1
分类专栏： 博客 文章标签： Hexo next 博客 GithubPages
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42073018/article/details/89600035
版权

博客原文：https://bestzuo.cn/posts/705543118.html

轮播图展示：https://bestzuo.cn

由于我个人Hexo博客使用的是next主题，所以以下均为next主题设置步骤介绍，其它hexo博客主题使用方法类似，建议自己尝试修改。

第一步：添加配置

首先我们需要进入themes\next\layout下的index文件，找到如下代码：

{% block content %}

然后在这段代码的下面添上一行代码：

{% 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主题配置文件中末尾添加如下配置：

#Home carousel map, from means link, img means picture
carousel: 
   enable: true
   item: [
      {
        'link':'文章链接1',
        'img':'图片链接1'
      },
      {
        'link':'文章链接2',
        'img':'图片链接2'
      },
   ]

要有几张轮播图就配置几个数组内容即可，比如我的是：

# 配置首页轮播图
carousel: 
   enable: true
   item: [
      {
        'link':'/messageboard/',
        'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/my-blog.png'
      },
      {
        'link':'https://github.com/996icu/996.ICU',
        'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/996.png'
      },
      {
        'link':'/tags/JVM/',
        'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/JVM.png'
      },
      {
        'link':'/posts/258aee07.html',
        'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/%E5%A4%9A%E7%BA%BF%E7%A8%8B.png'
      },
      {
        'link':'/tags/博客/',
        'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/hexo.png'
      },
      {
        'link':'https://promotion.aliyun.com/ntms/act/campus2018.html',
        'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/19010107.jpg'
      },
   ]

第四步：清除缓存，重新生成渲染

素质三连：hexo clean && hexo g && hexo s即可本地看到效果。

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

Sanarous
关注
专栏目录
超详细Hexo博客搭建教程
qq_46922488的博客
08-03 7906
Hexo建站指南 博客是一个展示自己技能和能力的平台，有很多人想要建立自己的博客，折腾来折腾去的，最后却只能在博客园或简书上发表文章。 有很多人选择把博客建在Github上，这是一个开源代码托管网站，我也把我的博客建在了GitHub上。当初我还为了用哪个博客框架而烦恼呢，因为有很多有名的开源博客框架，比如Hexo、WordPress、VuePress、Halo 等，wordpress是动态博客框架所以不能建在GitHub上，相比较剩下三种，我选择了Hexo。 Hexo是基于NodeJs的静态博客框架，简单
hexo博客的背景设置
Faith的博客
07-25 1万+
主要有以下30种： 在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic
Jquery背景轮播图
05-20
适用于小白想看轮播图的思路的，我也是刚学交流交流交流交流 适用于小白想看轮播图的思路的，我也是刚学交流交流交流交流 适用于小白想看轮播图的思路的，我也是刚学交流交流交流交流 适用于小白想看轮播图的思路的，我也是刚学交流交流交流交流 适用于小白想看轮播图的思路的，我也是刚学交流交流交流交流 适用于小白想看轮播图的思路的，我也是刚学交流交流交流交流
Hexo博客技巧：添加首页置顶轮播图
Amnesia-Fu的博客
05-13 1424
写在最前 本项目是对冰卡诺老师写的教程：基于 Butterfly 主题的轮播手动置顶文章进行重构，精简了部分样式。适配 pjax。 资源下载 由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。 下载资源文件 魔改步骤 1.新建 [Blogroot]\themes\butterfly\layout\includes\sliderbar.pug .blog-slider.swiper-container-fade.swiper-container-h
Hexo设置背景图片轮播效果
ordinary_brony的博客
08-15 1950
Next主题确实是好用，但是中间还是有太多太多的坑，差点没把自己摔死。这个博客记录了完成背景图片轮播的博客，喜欢折腾的同学可以看看，这方面对CSS3的要求略微有点高。Hexo的NexT主题非常简约，个性化调整也非常方便。在这里就给大家介绍Hexo的背景图片轮播的制作方法。
给你的Blog加上漂亮的语录轮播，只要3分钟
.: Easy Style - 将PHP进行到底 :.
10-30 4875
 在网上看见让你拍案叫绝的句子，是不是有一种把它收藏到你的Blog上的冲动呢？这里介绍一个Blog上的语录引用小工具——voiz。 只需要短短几分钟，就可以在你的Blog上添加一个自动滚动的语录哦  注册 - 点击 http://www.voiz.cn/?a=register ，填上你的email，选个密码和名号。  添加 - 下载扩展可以方便的添加你
轮播
MessageFang的博客
07-23 219
activity: package com.example.caidanliandong; import android.annotation.SuppressLint; import android.os.Handler; import android.os.Message; import android.support.v4.view.ViewPager; import android....
关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
itsNekoDeng的博客
01-04 683
前言: 有段时间没折腾过博客页面样式了，偶然间看到了一个春节红灯笼的小demo，感觉很棒，所以拿过来了，并且自己新增了一些小挂件，加上了关键帧动画，圣诞树等元素。主题切换按钮原理和以前教程里面提到的暗夜模式一样。 效果图片展示 制作红灯笼 具体不做赘述了，贴出源码，可自行下载使用。 中国春节红灯笼demo源码 制作切换按钮和小挂件 html结构 <!-- 春节主题 按钮 --> <a onclick="switchThemes()" id="switchspring"
基于Next5主题美化的一款hexo博客主题
08-08
4. **JavaScript开发**：在博客主题中，JavaScript常用于实现交互功能，例如下拉菜单、轮播图、时间轴动画等。开发者可以使用原生JavaScript，或者引入第三方库如jQuery、Vue.js等来简化代码并增强功能。 5. **CSS...
使用Hexo免费搭建个人博客教程
csdnxia的博客
10-18 3039
前言 现在各种互联网博客非常的，常见的如CSDN、简书、掘金、博客园等平台，这些博客平台做的都很好，可以直接在上面注册自己的账号写文章，发表的文章在百度、Bing等搜索引擎上也能收到，但缺点是受于平台的各种限制，个人定制化不自由，而且大多数平台都会有各种广告。 于是想到自己搭建一个博客网站，但对大多数人而言，自己购买服务器和域名来搭建博客成本实在太高的了，而且有点浪费，还需要定期维护，这时一种不错的选择就是使用第三方开源托管平台（GitHub、GitLab等）来当作我们的服务器，并使用快速简洁的博客搭建框架
hexo-images-watermark：hexo开发的本地图片水印插件
02-26
十六进制图像水印 一款用于Hexo静态博客网站生成时对图片添加水印。 不对原图产生任何影响，在网站静态页面重建过程中将原图重新读取，输出添加了水印的图片。 在建造的静态网站中不会存在原图，只存在水印图片。 一定要阅读最后的提示事项，包含现有版本的支持情况和即将添加的功能 使用npm安装插件 npm install hexo-images-watermark 使用yarn安装插件 yarn add hexo-images-watermark 在站点配置文件_config.yml中进行如下配置： watermark : enable : true textEnable : true rotate : -45 gravity : centre 在hexo generate运行后会自动为你的post目录下的图片添加水印，新的图片将会覆盖public/post下原本
图片动态显示（轮播效果）
wxf_csdn的博客
08-09 847
实现图片动态变化效果多张图片连续动画实现*方案一：直接使用UIImageView来实现 示例代码如下：UIImageView* mainImageView= [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 784, 300)]; mainImageView.animationImages = [NSArray arrayWithObj
解决 Hexo 博客文章中图片的显示问题
梦家の博客
05-12 1万+
解决Hexo博客文章中图片不能显示的问题 设置站点配置文件_config.yml中 post_asset_folder:true。 Hexo 提供了一种更方便管理 Asset 的设定：post_asset_folder当您设置post_asset_folder为true参数后，在建立文件时，Hexo会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹。 安装...
Hexo的Next主题美化——首页显示标签
阿豪的博客
04-12 3188
前言 其他主题我不知道，但next主题Mist样式首页文章底下不显示标签，我个人喜欢首页文章下面也可以看到标签。Next其他样式可能还是没有标签好看。 因为文章首页隐藏的notshow会影响到首页显示标签,所以会在修改的一部分中提到首页隐藏的内容。 查看修改首页隐藏指定文章 Step1：修改主题的index.swig 正式内容： 主题可能各不一样，但原理都是一样的，我拿我使用的next主题来...
轮播图1
王延朕的博客
06-13 245
<head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="wrap" style="left: -600px;"> ...
Hexo博客项目：页面功能配置
修行的凡人的博客
03-10 314
基于Hexo架构，快速开发博客项目
html 变形属性,css变形transform属性详细介绍
weixin_33561009的博客
06-04 484
transition：过度属性transition-property 规定设置过度效果的css属性的名称，默认可以写alltransition-duration 规定完成过度效果需要多少秒或毫秒transition-timing-function: 默认easetransition-delay：延时时间ease:逐渐变慢linear:匀速ease-in:加速ease-out:减速ease-in-o...
四种方式实现轮播图
热门推荐
wulixiaoxiao1的博客
02-26 2万+
转载自：http://www.jianshu.com/p/bd1f34e7e953 不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~ 为了方便大家观看，我把css，
使用fancybox，报如下错误：The requested content cannot be loaded. Please try again later.的解决方法
zzm628的专栏
05-13 2万+
使用fancybox，报如下错误：The requested content cannot be loaded. Please try again later.的解决方法
hexo博客添加搜索功能
最新发布
05-14
要为 Hexo 博客添加搜索功能，你可以使用第三方搜索引擎，如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。 Algolia 是一个强大的搜索引擎，提供了易于使用的 API，可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤： 1. 注册 Algolia 账户并创建一个应用程序。 2. 安装 Hexo Algolia 插件。 ``` npm install hexo-algolia --save ``` 3. 在博客根目录下创建一个名为 `algolia.json` 的配置文件，并填写以下内容： ``` { "applicationID": "YOUR_APP_ID", "apiKey": "YOUR_API_KEY", "indexName": "YOUR_INDEX_NAME" } ``` 将 `YOUR_APP_ID`、`YOUR_API_KEY` 和 `YOUR_INDEX_NAME` 替换为你在 Algolia 上创建的应用程序的信息。 4. 在你的 Hexo 主题中添加搜索框和搜索结果页面。 在主题的相应文件中添加以下代码： 搜索框： ```html <form class="search-form" method="get" action="/search/"> <input class="search-input" type="text" placeholder="Search" name="query"> <button class="search-submit" type="submit">Search</button> </form> ``` 搜索结果页面： ```html --- title: "Search Results" layout: "search" --- <section class="search-results"> {% for page in page.posts %} <article class="search-result"> <h2 class="search-result-title"><a href="{{ page.url }}">{{ page.title }}</a></h2> <p class="search-result-excerpt">{{ page.excerpt }}</p> </article> {% endfor %} </section> ``` 5. 重新生成站点并上传到你的服务器。 ``` hexo generate ``` 6. 同步你的博客数据到 Algolia 上。 ``` hexo algolia ``` 完成以上步骤后，你的 Hexo 博客就可以使用 Algolia 进行搜索了。当用户在搜索框中输入关键字并提交时，将会跳转到搜索结果页面，显示与关键字匹配的文章列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值