抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

本文转载至:https://bestzuo.cn/posts/705543118.html


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

第一步:添加配置

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

复制

{% block content %}

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

复制

{% include '_macro/carousel.swig' %}

第二步:添加文件

由于上面添加了文件,所以这里我们需要创建该文件。

themes\next\layout\macro文件下创建carousel.swig文件。

然后在其中写入以下内容:

复制

{% if theme.carousel.enable %}




第三步:配置文件中配置图片及链接

在next主题(其它主题也可以)中的_config.xml主题配置文件中末尾添加如下配置:

复制

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即可本地看到效果。

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

发言区

留下自己的足迹吧~