Hexo博客首页添加轮播图

最新推荐文章于 2024-02-04 09:16:37 发布
最新推荐文章于 2024-02-04 09:16:37 发布
阅读量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
关注
专栏目录
KunchiLiu.github.io：Hexo博客
02-25
【Hexo博客简介】 Hexo是一款快速、简洁且高效的博客框架，它基于Node.js构建，广泛应用于GitHub Pages和个人网站的搭建。KunchiLiu.github.io是一个使用Hexo框架搭建的个人博客，通过GitHub Pages服务发布，展示了...
Hexo设置背景图片轮播效果
ordinary_brony的博客
08-15 1926
Next主题确实是好用，但是中间还是有太多太多的坑，差点没把自己摔死。这个博客记录了完成背景图片轮播的博客，喜欢折腾的同学可以看看，这方面对CSS3的要求略微有点高。Hexo的NexT主题非常简约，个性化调整也非常方便。在这里就给大家介绍Hexo的背景图片轮播的制作方法。
Hexo设置动态背景图的动态更新
最新发布
ordinary_brony的博客
02-04 844
在[这篇文章中](https://blog.csdn.net/ordinary_brony/article/details/136019684)，我们学习了如何设置固定数量的动态背景图。接下来，我们在这篇文章的基础上继续增加功能，让动态背景图的数量也不是固定的、图像也不是固定的。顺便一提，预览效果可以看这里(http://hexo.sakebow.cn)。
Hexo博客项目：页面功能配置
修行的凡人的博客
03-10 298
基于Hexo架构，快速开发博客项目
Hexo的Next主题美化——首页显示标签
阿豪的博客
04-12 3169
前言 其他主题我不知道，但next主题Mist样式首页文章底下不显示标签，我个人喜欢首页文章下面也可以看到标签。Next其他样式可能还是没有标签好看。 因为文章首页隐藏的notshow会影响到首页显示标签,所以会在修改的一部分中提到首页隐藏的内容。 查看修改首页隐藏指定文章 Step1：修改主题的index.swig 正式内容： 主题可能各不一样，但原理都是一样的，我拿我使用的next主题来...
Hexo博客技巧：添加首页置顶轮播图
Amnesia-Fu的博客
05-13 1408
写在最前 本项目是对冰卡诺老师写的教程：基于 Butterfly 主题的轮播手动置顶文章进行重构，精简了部分样式。适配 pjax。 资源下载 由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。 下载资源文件 魔改步骤 1.新建 [Blogroot]\themes\butterfly\layout\includes\sliderbar.pug .blog-slider.swiper-container-fade.swiper-container-h
基于Next5主题美化的一款hexo博客主题
08-08
4. **JavaScript开发**：在博客主题中，JavaScript常用于实现交互功能，例如下拉菜单、轮播图、时间轴动画等。开发者可以使用原生JavaScript，或者引入第三方库如jQuery、Vue.js等来简化代码并增强功能。 5. **CSS...
MyHexo:个人博客的
03-24
9. **多语言支持**：如果MyHexo支持多语言，那么它可能会包含语言切换功能，让用户可以方便地添加和管理不同语言版本的内容。 10. **持续集成/持续部署(CI/CD)**：对于大型项目，MyHexo可能已经集成了CI/CD工具，如...
hexo-theme-obsidianext-docs:Hexo主题Obsidianext文档
03-28
**Hexo主题Obsidianext文档**是一份详细阐述如何使用和配置**Hexo**的**黑曜石（Obsidian...阅读并理解这些文档，可以帮助你充分利用Obsidianext主题，打造出个性化的Hexo博客，同时享受类似Obsidian的美观和实用体验。
hexo-swiper-bar
03-25
"hexo-swiper-bar"是一个基于JavaScript开发的插件，专为Hexo博客框架设计，用于在博客中添加炫酷的滑动条效果。Hexo是一个快速、简洁且高效的静态站点生成器，广泛被个人博客和团队网站所采用。Swiper Bar则是Hexo...
hexo-theme-spfk, Hexo双栏博客主题仓库 Another simple and elegant theme for Hexo..zip
10-10
hexo-theme-spfk, Hexo双栏博客主题仓库 Another simple and elegant theme for Hexo.
背景轮播效果+登录界面背景轮播效果
09-20
资源包含三个背景轮播效果和两个登录界面背景轮播效果，可以在web 开发中使用。响应式的布局，支持手机端使用。
hexo网站部署到云服务器的详细步骤新手指南.pdf
09-13
hexo 是一个快速、简洁且高效的博客框架，基于 Node.js 实现。hexo 可以快速生成静态网页，并且支持多种主题和插件。为了将 hexo 部署到云服务器，我们需要安装 Node.js、Git 和 Nginx，并配置 Git 环境和 Nginx ...
blog:这是我的博客
03-18
本篇主要介绍Hexo博客的配置和自定义过程，以及如何进行备份。 Hexo的核心在于将Markdown或者其他格式的文本转化为静态HTML页面，从而提供高效的网页加载速度和简洁的后台管理。在安装Hexo时，首先需要确保你的机器...
Git：:lemon:Git的基本教程，以及一些常用的操作指令，表情包系列，Markdown教程及常用布局和小技巧，文档化文档站点生成器入手等。还有一个Hexo + Github简单快速搭博客的教程说明，例如，我的博客，欢迎访问！
02-05
Hexo是一个快速、简洁且高效的静态博客框架，配合GitHub Pages可以轻松创建个人博客。首先安装Hexo，然后配置博客主题，最后使用`hexo generate`生成静态页面，`hexo deploy`推送到GitHub。 希望这些内容能帮助你...
html 变形属性,css变形transform属性详细介绍
weixin_33561009的博客
06-04 469
transition：过度属性transition-property 规定设置过度效果的css属性的名称，默认可以写alltransition-duration 规定完成过度效果需要多少秒或毫秒transition-timing-function: 默认easetransition-delay：延时时间ease:逐渐变慢linear:匀速ease-in:加速ease-out:减速ease-in-o...
给你的Blog加上漂亮的语录轮播，只要3分钟
.: Easy Style - 将PHP进行到底 :.
10-30 4861
 在网上看见让你拍案叫绝的句子，是不是有一种把它收藏到你的Blog上的冲动呢？这里介绍一个Blog上的语录引用小工具——voiz。 只需要短短几分钟，就可以在你的Blog上添加一个自动滚动的语录哦  注册 - 点击 http://www.voiz.cn/?a=register ，填上你的email，选个密码和名号。  添加 - 下载扩展可以方便的添加你
轮播
MessageFang的博客
07-23 211
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....
完整轮播图代码
热门推荐
yiweichenji的博客
02-02 7万+
无标题文档 *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc;
hexo博客添加搜索功能
05-14
要为 Hexo 博客添加搜索功能，你可以使用第三方搜索引擎，如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。 Algolia 是一个强大的搜索引擎，提供了易于使用的 API，可以轻松地将搜索功能添加到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值