更新

assets/css/joe.global.scss

@@ -682,11 +682,14 @@
                         bottom: 100%;
                     }
                     .link {
-                        display: block;
-                        max-width: 100%;
-                        white-space: nowrap;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 2;
+                        /*! autoprefixer: off */
+                        -webkit-box-orient: vertical;
+                        /* autoprefixer: on */
                         overflow: hidden;
                         text-overflow: ellipsis;
+
                         color: var(--minor);
                         font-size: 13px;
                         font-weight: 500;

assets/css/joe.index.css

@@ -0,0 +1 @@
+.joe_index{border-radius:8px;padding:0 15px;background:var(--background);box-shadow:var(--box-shadow);margin-bottom:15px}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:5px;overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:5px}.swiper-container .item{display:block;height:335px;border-radius:5px}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}

assets/css/joe.index.scss

@@ -0,0 +1,140 @@
+.joe_index {
+    border-radius: 8px;
+    padding: 0 15px;
+    background: var(--background);
+    box-shadow: var(--box-shadow);
+    margin-bottom: 15px;
+    &__banner {
+        padding-top: 15px;
+        display: flex;
+        &-recommend {
+            width: 270px;
+            margin-left: 15px;
+            display: flex;
+            flex-direction: column;
+            &.noswiper {
+                width: 100%;
+                flex-direction: row;
+                margin-left: 0;
+                .item:first-child {
+                    margin-bottom: 0;
+                    margin-right: 7.5px;
+                }
+                .item:last-child {
+                    margin-left: 7.5px;
+                }
+            }
+            .item {
+                position: relative;
+                width: 100%;
+                height: 160px;
+                margin-bottom: 15px;
+                border-radius: 5px;
+                overflow: hidden;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                .thumbnail {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    transition: opacity 0.35s;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                    &:hover {
+                        opacity: 0.85;
+                    }
+                }
+                .information {
+                    display: flex;
+                    align-items: center;
+                    position: absolute;
+                    z-index: 1;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    padding: 8px;
+                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
+                    color: #fff;
+                    line-height: 20px;
+                    &_type {
+                        background-image: linear-gradient(to right, #fc712a, #f84c39);
+                        background-color: #f84c39;
+                        padding: 0 5px;
+                        height: 20px;
+                        border-radius: 2px;
+                        margin-right: 5px;
+                        font-size: 12px;
+                    }
+                    &_title {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        flex: 1;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.swiper-container {
+    min-width: 0;
+    flex: 1;
+    height: 335px;
+    --swiper-theme-color: #fff;
+    border-radius: 5px;
+    .item {
+        display: block;
+        height: 335px;
+        border-radius: 5px;
+        .thumbnail {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: opacity 0.35s;
+            &:hover {
+                opacity: 0.85;
+            }
+        }
+        .title {
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            text-align: center;
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #fff;
+            font-size: 15px;
+            padding: 10px;
+            font-weight: normal;
+        }
+        .icon {
+            position: absolute;
+            z-index: 1;
+            top: 10px;
+            left: 10px;
+            width: 18px;
+            height: 18px;
+            fill: #fff;
+            opacity: 0.5;
+        }
+    }
+    &.swiper-container-horizontal {
+        .swiper-pagination-bullets {
+            bottom: unset;
+            left: unset;
+            width: auto;
+            right: 10px;
+            top: 10px;
+        }
+    }
+}

assets/js/joe.global.js

@@ -1,72 +1,79 @@
 window.Joe = function () {
-	/* Dropdown */
-	{
-		$('.joe_dropdown').each(function (index, item) {
-			const menu = $(this).find('.joe_dropdown__menu')
-			/* 弹出方式 */
-			const trigger = $(item).attr('trigger') || 'click'
-			/* 弹出高度 */
-			const placement = $(item).attr('placement') || $(this).height() || 0
-			/* 设置弹出高度 */
-			menu.css('top', placement)
-			/* 如果是hover，则绑定hover事件 */
-			if (trigger === 'hover') {
-				$(this).hover(
-					() => $(this).addClass('active'),
-					() => $(this).removeClass('active')
-				)
-			} else {
-				/* 否则绑定点击事件 */
-				$(this).on('click', function (e) {
-					$(this).toggleClass('active')
-					$(document).one('click', () => $(this).removeClass('active'))
-					e.stopPropagation()
-				})
-				menu.on('click', e => e.stopPropagation())
-			}
-		})
-	}
-	/* Timelife */
-	if ($('.joe_aside__item.timelife').length !== 0) {
-		let timelife = [
-			{ title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' },
-			{ title: '这周已经过去', endTitle: '天', num: 0, percent: '0%' },
-			{ title: '本月已经过去', endTitle: '天', num: 0, percent: '0%' },
-			{ title: '今年已经过去', endTitle: '个月', num: 0, percent: '0%' }
-		]
-		{
-			let nowDate = +new Date()
-			let todayStartDate = new Date(new Date().toLocaleDateString()).getTime()
-			let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60
-			let todayPassHoursPercent = (todayPassHours / 24) * 100
-			timelife[0].num = parseInt(todayPassHours)
-			timelife[0].percent = parseInt(todayPassHoursPercent) + '%'
-		}
-		{
-			let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }
-			let weekDay = weeks[new Date().getDay()]
-			let weekDayPassPercent = (weekDay / 7) * 100
-			timelife[1].num = parseInt(weekDay)
-			timelife[1].percent = parseInt(weekDayPassPercent) + '%'
-		}
-		{
-			let year = new Date().getFullYear()
-			let date = new Date().getDate()
-			let month = new Date().getMonth() + 1
-			let monthAll = new Date(year, month, 0).getDate()
-			let monthPassPercent = (date / monthAll) * 100
-			timelife[2].num = date
-			timelife[2].percent = parseInt(monthPassPercent) + '%'
-		}
-		{
-			let month = new Date().getMonth() + 1
-			let yearPass = (month / 12) * 100
-			timelife[3].num = month
-			timelife[3].percent = parseInt(yearPass) + '%'
-		}
-		let htmlStr = ''
-		timelife.forEach((item, index) => {
-			htmlStr += `
+    let IsMobile = false;
+    if (/windows phone|iphone|android/gi.test(window.navigator.userAgent)) {
+        IsMobile = true;
+    } else {
+        IsMobile = false;
+    }
+
+    /* Dropdown */
+    {
+        $('.joe_dropdown').each(function (index, item) {
+            const menu = $(this).find('.joe_dropdown__menu');
+            /* 弹出方式 */
+            const trigger = $(item).attr('trigger') || 'click';
+            /* 弹出高度 */
+            const placement = $(item).attr('placement') || $(this).height() || 0;
+            /* 设置弹出高度 */
+            menu.css('top', placement);
+            /* 如果是hover，则绑定hover事件 */
+            if (trigger === 'hover') {
+                $(this).hover(
+                    () => $(this).addClass('active'),
+                    () => $(this).removeClass('active')
+                );
+            } else {
+                /* 否则绑定点击事件 */
+                $(this).on('click', function (e) {
+                    $(this).toggleClass('active');
+                    $(document).one('click', () => $(this).removeClass('active'));
+                    e.stopPropagation();
+                });
+                menu.on('click', e => e.stopPropagation());
+            }
+        });
+    }
+    /* Timelife */
+    if ($('.joe_aside__item.timelife').length !== 0) {
+        let timelife = [
+            { title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' },
+            { title: '这周已经过去', endTitle: '天', num: 0, percent: '0%' },
+            { title: '本月已经过去', endTitle: '天', num: 0, percent: '0%' },
+            { title: '今年已经过去', endTitle: '个月', num: 0, percent: '0%' }
+        ];
+        {
+            let nowDate = +new Date();
+            let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
+            let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
+            let todayPassHoursPercent = (todayPassHours / 24) * 100;
+            timelife[0].num = parseInt(todayPassHours);
+            timelife[0].percent = parseInt(todayPassHoursPercent) + '%';
+        }
+        {
+            let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 };
+            let weekDay = weeks[new Date().getDay()];
+            let weekDayPassPercent = (weekDay / 7) * 100;
+            timelife[1].num = parseInt(weekDay);
+            timelife[1].percent = parseInt(weekDayPassPercent) + '%';
+        }
+        {
+            let year = new Date().getFullYear();
+            let date = new Date().getDate();
+            let month = new Date().getMonth() + 1;
+            let monthAll = new Date(year, month, 0).getDate();
+            let monthPassPercent = (date / monthAll) * 100;
+            timelife[2].num = date;
+            timelife[2].percent = parseInt(monthPassPercent) + '%';
+        }
+        {
+            let month = new Date().getMonth() + 1;
+            let yearPass = (month / 12) * 100;
+            timelife[3].num = month;
+            timelife[3].percent = parseInt(yearPass) + '%';
+        }
+        let htmlStr = '';
+        timelife.forEach((item, index) => {
+            htmlStr += `
                 <div class="item">
                     <div class="title">
                         ${item.title}
@@ -80,43 +87,51 @@ window.Joe = function () {
                         <div class="progress-percentage">${item.percent}</div>
                     </div>
                 </div>
-            `
-		})
-		$('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr)
-	}
+            `;
+        });
+        $('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr);
+    }
 
-	/* Weather */
-	if ($('.joe_aside__item.weather').length !== 0) {
-		const key = $('.joe_aside__item.weather').attr('data-key')
-		const style = $('.joe_aside__item.weather').attr('data-style')
-		const aqiColor = { 1: 'FFFFFF', 2: '4A4A4A', 3: 'FFFFFF' }
-		window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } }
-	}
+    /* Weather */
+    if ($('.joe_aside__item.weather').length !== 0) {
+        const key = $('.joe_aside__item.weather').attr('data-key');
+        const style = $('.joe_aside__item.weather').attr('data-style');
+        const aqiColor = { 1: 'FFFFFF', 2: '4A4A4A', 3: 'FFFFFF' };
+        window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } };
+    }
 
-	if ($('.joe_aside__item.ranking').length !== 0) {
-		$.ajax({
-			url: '/index.php/action/ranking',
-			success(res) {
-				$('.joe_aside__item.ranking .joe_aside__item-title .text').html(res.title)
-				let htmlStr = ''
-				if (res.code === 1) {
-					res.data.forEach((item, index) => {
-						htmlStr += `
+    /* Ranking */
+    if ($('.joe_aside__item.ranking').length !== 0) {
+        $.ajax({
+            url: '/index.php/action/ranking',
+            success(res) {
+                $('.joe_aside__item.ranking .joe_aside__item-title .text').html(res.title);
+                let htmlStr = '';
+                if (res.code === 1) {
+                    res.data.forEach((item, index) => {
+                        htmlStr += `
                             <li class="item">
                                 <span class="sort">${index + 1}</span>
                                 <a class="link" href="${item.url}" title="${item.title}" target="_blank" rel="noopener noreferrer nofollow">${item.title}</a>
                             </li>
-                        `
-					})
-				} else {
-					htmlStr += `<li class="error">数据抓取异常！</li>`
-				}
-				$('.joe_aside__item.ranking .joe_aside__item-contain').html(htmlStr)
-			}
-		})
-	}
+                        `;
+                    });
+                } else {
+                    htmlStr += `<li class="error">数据抓取异常！</li>`;
+                }
+                $('.joe_aside__item.ranking .joe_aside__item-contain').html(htmlStr);
+            }
+        });
+    }
 
-	new LazyLoad('.lazyload')
-}
+    /* Index Swiper */
+    if ($('.joe_index__banner .swiper-container').length > 0) {
+        let direction = 'horizontal';
+        if (!IsMobile && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical';
+        new Swiper('.swiper-container', { direction, loop: true, autoplay: true, mousewheel: true, pagination: { el: '.swiper-pagination' } });
+    }
 
-document.addEventListener('DOMContentLoaded', () => Joe())
+    new LazyLoad('.lazyload');
+};
+
+document.addEventListener('DOMContentLoaded', () => Joe());

core/core.php

@@ -106,9 +106,19 @@ function _getViews($item)
     echo number_format($result);
 }
 
-function _parseAsideReply($text)
+function _parseAsideLink($link)
 {
-    echo $text;
+    echo str_replace("#", "?scroll=", $link);
+}
+
+
+function _parseAsideReply($text, $type = true)
+{
+    if ($type) {
+        echo _parseReply(preg_replace('~{!{.*~', '# 图片回复', strip_tags($text)));
+    } else {
+        echo preg_replace('~{!{.*~', '# 图片回复', strip_tags($text));
+    }
 }
 
 function _parseReply($text)
@@ -116,14 +126,14 @@ function _parseReply($text)
     $text = preg_replace_callback(
         '/\:\:\(\s*(呵呵|哈哈|吐舌|太开心|笑眼|花心|小乖|乖|捂嘴笑|滑稽|你懂的|不高兴|怒|汗|黑线|泪|真棒|喷|惊哭|阴险|鄙视|酷|啊|狂汗|what|疑问|酸爽|呀咩爹|委屈|惊讶|睡觉|笑尿|挖鼻|吐|犀利|小红脸|懒得理|勉强|爱心|心碎|玫瑰|礼物|彩虹|太阳|星星月亮|钱币|茶杯|蛋糕|大拇指|胜利|haha|OK|沙发|手纸|香蕉|便便|药丸|红领巾|蜡烛|音乐|灯泡|开心|钱|咦|呼|冷|生气|弱|吐血)\s*\)/is',
         function ($match) {
-            return '<img class="owo_image" src="https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/owo/paopao/' . str_replace('%', '', urlencode($match[1])) . '_2x.png" />';
+            return '<img class="owo_image" src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/owo/paopao/' . str_replace('%', '', urlencode($match[1])) . '_2x.png" />';
         },
         $text
     );
     $text = preg_replace_callback(
         '/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/is',
         function ($match) {
-            return '<img class="owo_image" src="https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/owo/aru/' . str_replace('%', '', urlencode($match[1])) . '_2x.png">';
+            return '<img class="owo_image" src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/owo/paopao/' . str_replace('%', '', urlencode($match[1])) . '_2x.png">';
         },
         $text
     );

functions.php

@@ -308,4 +308,33 @@ function themeConfig($form)
     );
     $JLazyload->setAttribute('class', 'joe_content joe_image');
     $form->addInput($JLazyload);
+
+    $JIndex_Carousel = new Typecho_Widget_Helper_Form_Element_Textarea(
+        'JIndex_Carousel',
+        NULL,
+        NULL,
+        '首页轮播图',
+        '介绍：用于显示首页轮播图，请务必填写正确的格式 <br />
+         格式：图片地址 || 跳转链接 || 标题 （中间使用两个竖杠分隔）<br />
+         其他：一行一个，一行代表一个轮播图 <br />
+         例如：<br />
+            https://puui.qpic.cn/media_img/lena/PICykqaoi_580_1680/0 || http://baidu.com || 百度一下 <br />
+            https://puui.qpic.cn/tv/0/1223447268_1680580/0 || http://v.qq.com || 腾讯视频
+         '
+    );
+    $JIndex_Carousel->setAttribute('class', 'joe_content joe_index');
+    $form->addInput($JIndex_Carousel);
+
+    $JIndex_Recommend = new Typecho_Widget_Helper_Form_Element_Textarea(
+        'JIndex_Recommend',
+        NULL,
+        NULL,
+        '首页推荐文章（非必填，填写时请填写2个，否则不显示！）',
+        '介绍：用于显示推荐文章，请务必填写正确的格式 <br/>
+         格式：文章的id || 文章的id （中间使用两个竖杠分隔）<br />
+         例如：1 || 2 <br />
+         注意：如果填写的不是2个，将不会显示'
+    );
+    $JIndex_Recommend->setAttribute('class', 'joe_content joe_index');
+    $form->addInput($JIndex_Recommend);
 } ?>

index.php

@@ -14,6 +14,8 @@
 
 <head>
     <?php $this->need('public/include.php'); ?>
+    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.index.css'); ?>">
+    <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>
 </head>
 
 <body>
@@ -21,7 +23,71 @@
         <?php $this->need('public/header.php'); ?>
         <div class="joe_container">
             <div class="joe_main">
-                <?php timerStop() ?>
+                <div class="joe_index">
+
+                    <?php
+                    /* 轮播图 */
+                    $carousel = [];
+                    $carousel_text = $this->options->JIndex_Carousel;
+                    if ($carousel_text) {
+                        $carousel_arr = explode("\r\n", $carousel_text);
+                        if (count($carousel_arr) > 0) {
+                            for ($i = 0; $i < count($carousel_arr); $i++) {
+                                $img = explode("||", $carousel_arr[$i])[0];
+                                $url = explode("||", $carousel_arr[$i])[1];
+                                $title = explode("||", $carousel_arr[$i])[2];
+                                $carousel[] = array("img" => trim($img), "url" => trim($url), "title" => trim($title));
+                            };
+                        }
+                    }
+                    /* 推荐文章 */
+                    $recommend = [];
+                    $recommend_text = $this->options->JIndex_Recommend;
+                    if ($recommend_text) {
+                        $recommend_arr = explode("||", $recommend_text);
+                        if (count($recommend_arr) === 2) $recommend = $recommend_arr;
+                    }
+                    ?>
+                    <?php if (sizeof($carousel) > 0 || sizeof($recommend) === 2) : ?>
+                        <div class="joe_index__banner">
+                            <?php if (sizeof($carousel) > 0) : ?>
+                                <div class="swiper-container">
+                                    <div class="swiper-wrapper">
+                                        <?php foreach ($carousel as $item) : ?>
+                                            <div class="swiper-slide">
+                                                <a class="item" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow">
+                                                    <img class="thumbnail" src="<?php echo $item['img'] ?>" alt="<?php echo $item['title'] ?>" width="100%" height="100%" />
+                                                    <div class="title"><?php echo $item['title'] ?></div>
+                                                    <svg class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+                                                        <path d="M784.299475 1007.961156a33.200407 33.200407 0 0 1-27.105646-9.061947l-216.524395-144.349597-108.903751 108.262198c-9.061947 9.061947-36.167593 18.0437-45.229541 9.061947a49.720417 49.720417 0 0 1-27.105646-45.229541v-198.881666A33.200407 33.200407 0 0 1 368.893414 700.656903l343.070875-370.577492a44.748375 44.748375 0 0 1 63.273239 63.27324L441.068212 754.868196v72.174799l63.27324-54.211293a42.583131 42.583131 0 0 1 54.211293-9.061947L757.193829 890.155846l153.652126-749.81596-759.198684 370.497298 171.695826 108.50278c18.0437 9.061947 27.105646 45.22954 9.061946 63.27324-9.061947 18.0437-45.22954 27.105646-63.273239 18.043699L34.082544 547.004777C25.100791 538.023025 16.038844 529.281854 16.038844 510.837184s9.061947-27.105646 27.105647-36.167594l903.788863-451.814237c18.0437-9.061947 36.167593-9.061947 45.229541 0C1010.447177 32.077688 1010.447177 49.960999 1010.447177 68.004699l-180.757773 903.788864c0 18.0437-9.061947 27.105646-27.105646 36.167593z"></path>
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                        <?php endforeach; ?>
+                                    </div>
+                                    <div class="swiper-pagination"></div>
+                                </div>
+                            <?php endif; ?>
+                            <?php if (sizeof($recommend) === 2) : ?>
+                                <div class="joe_index__banner-recommend <?php echo sizeof($carousel) === 0 ? 'noswiper' : '' ?>">
+                                    <?php foreach ($recommend as $cid) : ?>
+                                        <?php $this->widget('Widget_Archive', 'pageSize=1&type=post', 'cid=' . $cid)->to($item); ?>
+                                        <figure class="item">
+                                            <a class="thumbnail" href="<?php $item->permalink() ?>" title="<?php $item->title() ?>">
+                                                <img class="lazyload" alt="<?php $item->title() ?>" width="100%" />
+                                            </a>
+                                            <figcaption class="information">
+                                                <span class="information_type">推荐</span>
+                                                <span class="information_title"><?php $item->title() ?></span>
+                                            </figcaption>
+                                        </figure>
+                                    <?php endforeach; ?>
+                                </div>
+                            <?php endif; ?>
+                        </div>
+                    <?php endif; ?>
+
+                </div>
             </div>
             <?php $this->need('public/aside.php'); ?>
         </div>

public/aside.php

@@ -98,7 +98,9 @@
                                     </div>
                                 </div>
                                 <div class="reply">
-                                    <a href="<?php $item->permalink(); ?>"><?php _parseAsideReply($item->content); ?></a>
+                                    <a class="link" title="<?php _parseAsideReply($item->content, false); ?>" href="<?php _parseAsideLink($item->permalink); ?>">
+                                        <?php _parseAsideReply($item->content); ?>
+                                    </a>
                                 </div>
                             </li>
                         <?php endwhile; ?>

public/footer.php

@@ -0,0 +1 @@
+<?php timerStop();

public/include.php

@@ -9,6 +9,7 @@
 
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.css'); ?>">
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css'); ?>">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
 <link rel="stylesheet" href="https://apip.weatherdt.com/standard/static/css/weather-standard.css">
 
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>