更新

2021-01-22 18:37:16 +08:00 · 2021-01-22 18:37:16 +08:00 · f787c2fc52
commit f787c2fc52
parent d94a487332
17 changed files with 594 additions and 48 deletions
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@ -305,7 +305,7 @@
                left: 0;
                width: 100%;
                height: 273px;
-                background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
+                background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/img/snow.gif') no-repeat;
                background-size: cover;
                z-index: 3;
                pointer-events: none;
@ -933,6 +933,124 @@
    }
 }

+.joe_detail {
+    background: var(--background);
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: var(--box-shadow);
+    &__category {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        .item {
+            color: #fff;
+            font-size: 12px;
+            padding: 3px 8px;
+            margin-right: 5px;
+            border-radius: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 120px;
+            transition: transform 0.35s, opacity 0.35s;
+            &:hover {
+                opacity: 0.85;
+                transform: translate3d(0, -3px, 0);
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+            &-0 {
+                background: #0396ff;
+            }
+            &-1 {
+                background: #ea5455;
+            }
+            &-2 {
+                background: #7367f0;
+            }
+            &-3 {
+                background: #28c76f;
+            }
+            &-4 {
+                background: #9f44d3;
+            }
+        }
+    }
+    &__title {
+        font-size: 24px;
+        color: var(--main);
+        text-shadow: var(--text-shadow);
+        text-align: center;
+        margin-bottom: 15px;
+    }
+    &__count {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 15px;
+        border-bottom: 1px solid var(--classB);
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: -1.5px;
+            left: 0;
+            width: 80px;
+            height: 3px;
+            border-radius: 1.5px;
+            background: var(--theme);
+        }
+        &-information {
+            display: flex;
+            align-items: center;
+            .avatar {
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+                margin-right: 10px;
+                border: 1px solid var(--classA);
+                padding: 3px;
+            }
+            .meta {
+                display: flex;
+                flex-direction: column;
+                height: 35px;
+                justify-content: space-between;
+                .author {
+                    .link {
+                        font-weight: 500;
+                        color: var(--theme);
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+                }
+                .item {
+                    display: flex;
+                    align-items: center;
+                    color: var(--minor);
+                    font-size: 12px;
+                    line-height: 16px;
+                    .line {
+                        color: var(--seat);
+                        margin: 0 7px;
+                        vertical-align: middle;
+                    }
+                }
+            }
+        }
+        &-created {
+            font-size: 32px;
+            line-height: 42px;
+            color: var(--routine);
+            user-select: none;
+            text-shadow: var(--text-shadow);
+            font-family: consolas;
+        }
+    }
+}
+
@keyframes progress {
    0% {
        background-position: 0 0;
--- a/assets/css/joe.index.css
+++ b/assets/css/joe.index.css
--- a/assets/css/joe.index.scss
+++ b/assets/css/joe.index.scss
@ -28,7 +28,7 @@
                width: 100%;
                height: 160px;
                margin-bottom: 15px;
-                border-radius: 5px;
+                border-radius: 4px;
                overflow: hidden;
                &:last-child {
                    margin-bottom: 0;
@ -104,7 +104,7 @@
                            width: 100%;
                            height: 125px;
                            object-fit: cover;
-                            border-radius: 5px 5px 0 0;
+                            border-radius: 4px 4px 0 0;
                            transition: opacity 0.35s;
                        }
                        .title {
@ -140,6 +140,35 @@
            }
        }
    }
+    &__ad {
+        padding-top: 15px;
+        &-link {
+            display: block;
+            position: relative;
+            .image {
+                width: 100%;
+                height: 200px;
+                object-fit: cover;
+                border-radius: 4px;
+                transition: opacity 0.35s;
+                &:hover {
+                    opacity: 0.85;
+                }
+            }
+            .icon {
+                position: absolute;
+                z-index: 1;
+                top: 10px;
+                right: 10px;
+                font-size: 12px;
+                background: rgba(0, 0, 0, 0.25);
+                padding: 2px 5px;
+                border-radius: 2px;
+                color: #ebebeb;
+                pointer-events: none;
+            }
+        }
+    }
    &__title {
        display: flex;
        align-items: center;
@ -171,21 +200,44 @@
                transition: left 0.35s, width 0.35s;
            }
        }
+        &-notice {
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            height: 40px;
+            svg {
+                min-width: 20px;
+                min-height: 20px;
+                width: 20px;
+                height: 20px;
+                margin-right: 5px;
+            }
+            a {
+                color: var(--minor);
+                line-height: 20px;
+                max-width: 300px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                transition: color 0.35s;
+                &:hover {
+                    color: var(--theme);
+                }
+            }
+        }
    }
 }

-
-
 .swiper-container {
    min-width: 0;
    flex: 1;
    height: 335px;
    --swiper-theme-color: #fff;
-    border-radius: 5px;
+    border-radius: 4px;
    .item {
        display: block;
        height: 335px;
-        border-radius: 5px;
+        border-radius: 4px;
        .thumbnail {
            width: 100%;
            height: 100%;
--- a/assets/css/joe.normalize.css
+++ b/assets/css/joe.normalize.css
@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}body{font-size:14px;background:#f5f5f5;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_container{display:flex;max-width:1140px;margin:0 auto;padding:0 15px}.joe_main{min-width:0;flex:1;padding:15px 0}@media (max-width: 1200px){.joe_container{max-width:960px}}@media (max-width: 992px){.joe_container{max-width:720px}}@media (max-width: 768px){.joe_container{max-width:540px}}@media (max-width: 576px){.joe_container{max-width:100%}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[dark='true']{--background: #303133;--box-shadow: none}
+*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;background:#f5f5f5;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_container{display:flex;max-width:1140px;margin:0 auto;padding:0 15px}.joe_main{min-width:0;flex:1;padding:15px 0}@media (max-width: 1200px){.joe_container{max-width:960px}}@media (max-width: 992px){.joe_container{max-width:720px}}@media (max-width: 768px){.joe_container{max-width:540px}}@media (max-width: 576px){.joe_container{max-width:100%}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[dark='true']{--background: #303133;--box-shadow: none}
--- a/assets/css/joe.normalize.scss
+++ b/assets/css/joe.normalize.scss
@ -6,6 +6,19 @@
    -webkit-tap-highlight-color: transparent;
 }

+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: var(--seat);
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
 body {
    font-size: 14px;
    background: #f5f5f5;
--- a/assets/css/joe.post.css
+++ b/assets/css/joe.post.css
@ -0,0 +1 @@
+.joe_bread{padding-top:15px}.joe_bread__bread{display:flex;align-items:center}.joe_bread__bread .line{color:var(--seat);padding:0 8px}.joe_bread__bread .item{color:var(--minor);white-space:nowrap}.joe_bread__bread .item .link{color:var(--routine);transition:color 0.35s}.joe_bread__bread .item .link:hover{color:var(--theme)}.joe_bread__bread .item .icon{width:15px;height:15px;min-width:15px;min-height:15px;fill:var(--routine);margin-right:2px}.joe_bread__bread .item:first-child{display:flex;align-items:center}
--- a/assets/css/joe.post.scss
+++ b/assets/css/joe.post.scss
@ -0,0 +1,34 @@
+.joe_bread {
+    padding-top: 15px;
+    &__bread {
+        display: flex;
+        align-items: center;
+        .line {
+            color: var(--seat);
+            padding: 0 8px;
+        }
+        .item {
+            color: var(--minor);
+            white-space: nowrap;
+            .link {
+                color: var(--routine);
+                transition: color 0.35s;
+                &:hover {
+                    color: var(--theme);
+                }
+            }
+            .icon {
+                width: 15px;
+                height: 15px;
+                min-width: 15px;
+                min-height: 15px;
+                fill: var(--routine);
+                margin-right: 2px;
+            }
+            &:first-child {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
--- a/assets/js/joe.global.js
+++ b/assets/js/joe.global.js
@ -141,8 +141,8 @@ window.Joe = function () {
        let queryData = { page: 1, pageSize: 10, type: 'created' };
        const initDom = () => {
            $('.joe_index__list .joe_list').html('');
-            const activeItem = $(`.joe_index__title-title .item[data-type="${queryData.type}"]`);
-            const activeLine = $('.joe_index__title-title .line');
+            let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]');
+            let activeLine = $('.joe_index__title-title .line');
            activeItem.addClass('active').siblings().removeClass('active');
            activeLine.css({ left: activeItem.position().left, width: activeItem.width() });
        };
@ -163,7 +163,7 @@ window.Joe = function () {
                        }
                        res.data.forEach(_ => {
                            $('.joe_index__list .joe_list').append(`
-                                <li class="joe_list__item">
+                                <li class="joe_list__item wow">
                                    <div class="line"></div>
                                    <a href="${_.permalink}" class="thumbnail" title="${_.title}">
                                        <img onerror="javascript: this.src='${_.lazyload}';" class="list_lazyload" src="${_.lazyload}" data-original="${_.image}" alt="${_.title}" />
@ -222,9 +222,42 @@ window.Joe = function () {
            const offset = $(queryElement).offset().top - Header_Height;
            window.scrollTo({ top: offset - 15, behavior: 'smooth' });
        });
+        const wow = $('.joe_index__list').attr('data-wow');
+        if (wow !== 'off' && wow) {
+            new WOW({
+                boxClass: 'wow',
+                animateClass: `animated ${wow}`,
+                offset: 0,
+                mobile: true,
+                live: true,
+                scrollContainer: null
+            }).init();
+        }
+    }
+
+    /* baiduRecord */
+    if ($('#Joe_Baidu_Record').length > 0) {
+        $.ajax({
+            url: BASE_API,
+            type: 'POST',
+            data: {
+                routeType: 'record',
+                site: window.location.href
+            },
+            success(res) {
+                if (res.data && res.data === '已收录') {
+                    $('#Joe_Baidu_Record').css('color', '#67C23A');
+                    $('#Joe_Baidu_Record').html('已收录');
+                } else {
+                    const url = `https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}`;
+                    $('#Joe_Baidu_Record').html(`<a target="_blank" href="${url}" ref="nofollow" style="color: #F56C6C">未收录，提交收录</a>`);
+                }
+            }
+        });
    }

    new LazyLoad('.lazyload');
 };

-document.addEventListener('DOMContentLoaded', () => Joe());
+/* 此处不可换成监听dom加载完成，否则会出现偶尔元素偏移量获取不到的问题 */
+window.onload = () => Joe();
--- a/core/core.php
+++ b/core/core.php
@ -1,9 +1,12 @@
 <?php

+/* 主题开发API */
 require_once('route.php');

+/* 主题初始化 */
 function themeInit($self)
 {
+    /* 主题开放API 路由规则 */
    $path_info = $self->request->getPathinfo();
    if ($path_info === "/joe/api") {
        switch ($self->request->routeType) {
@ -13,15 +16,34 @@ function themeInit($self)
            case 'list':
                _getPost($self);
                break;
+            case 'record':
+                _getRecord($self);
+                break;
        };
    }
 }

+/* 主题版本号 */
 function _getVersion()
 {
    return "1.0.0";
 };

+
+/* 过滤文章内容 */
+function _parseContent($post)
+{
+    $db = Typecho_Db::get();
+    $result = $db->fetchAll($db->select()->from('table.comments')->where('cid = ?', $post->cid)->where('mail = ?', $post->remember('mail', true))->limit(1));
+    if ($result) {
+        $content = preg_replace("/\[hide\](.*?)\[\/hide\]/sm", '<div class="joe_detail__article-hide-content">$1</div>', $post->content);
+    } else {
+        $content = preg_replace("/\[hide\](.*?)\[\/hide\]/sm", '<p class="joe_detail__article-hide-form">此处内容 <i data-scroll="comment">回复</i> 可见</p>', $post->content);
+    }
+    echo $content;
+}
+
+/* 页面计时 */
 timerStart();

 function timerStart()
@ -99,11 +121,8 @@ function _getThumbnail($item, $type = true)
    } elseif (preg_match_all($patternMDfoot, $item->content, $thumbUrl)) {
        $randomThumb = $thumbUrl[1][0];
    }
-    if ($type) {
-        echo $randomThumb;
-    } else {
-        return $randomThumb;
-    }
+    if ($type) echo $randomThumb;
+    else return $randomThumb;
 }

 function _getViews($item)
@ -121,11 +140,8 @@ function _parseAsideLink($link)

 function _parseAsideReply($text, $type = true)
 {
-    if ($type) {
-        echo _parseReply(preg_replace('~{!{.*~', '# 图片回复', strip_tags($text)));
-    } else {
-        echo preg_replace('~{!{.*~', '# 图片回复', strip_tags($text));
-    }
+    if ($type) echo _parseReply(preg_replace('~{!{.*~', '# 图片回复', strip_tags($text)));
+    else echo preg_replace('~{!{.*~', '# 图片回复', strip_tags($text));
 }

 function _parseReply($text)
@ -133,14 +149,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/gh/HaoOuBa/Joe@master/assets/owo/paopao/' . str_replace('%', '', urlencode($match[1])) . '_2x.png" />';
+            return '<img class="owo_image" src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/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/gh/HaoOuBa/Joe@master/assets/owo/paopao/' . str_replace('%', '', urlencode($match[1])) . '_2x.png">';
+            return '<img class="owo_image" src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/owo/paopao/' . str_replace('%', '', urlencode($match[1])) . '_2x.png">';
        },
        $text
    );
@ -150,11 +166,8 @@ function _parseReply($text)

 function _getLazyload($type = true)
 {
-    if ($type) {
-        echo Helper::options()->JLazyload;
-    } else {
-        return Helper::options()->JLazyload;
-    }
+    if ($type) echo Helper::options()->JLazyload;
+    else return Helper::options()->JLazyload;
 }

 function _getAsideAuthorNav()
--- a/core/route.php
+++ b/core/route.php
@ -1,4 +1,6 @@
 <?php
+
+/* 排行榜 */
 function _getRanking($self)
 {
    header("HTTP/1.1 200 OK");
@ -22,6 +24,7 @@ function _getRanking($self)
    }
 }

+/* 列表 */
 function _getPost($self)
 {
    header("HTTP/1.1 200 OK");
@ -47,3 +50,35 @@ function _getPost($self)
    };
    $self->response->throwJson(array("data" => $result));
 }
+
+/* 收录 */
+function _getRecord($self)
+{
+    header("HTTP/1.1 200 OK");
+    $site = $self->request->site;
+    $encryption = md5(mt_rand(1655, 100860065) . time());
+    $baiduSite = "https://www.baidu.com/s?ie=utf-8&newi=1&mod=1&isid={$encryption}&wd={$site}&rsv_spt=1&rsv_iqid={$encryption}&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=ib&rsv_sug3=2&rsv_sug1=1&rsv_sug7=001&rsv_n=2&rsv_btype=i&inputT=3083&rsv_sug4=3220&rsv_sug=9&rsv_sid=32818_1460_33042_33060_31660_33099_33101_32961_26350_22159&_ss=1&clist=&hsug=&f4s=1&csor=38&_cr1=32951";
+    $ip = rand(0, 255) . '.' . rand(0, 255) . '.' . rand(0, 255) . '.' . rand(0, 255);
+    $header[] = "accept-encoding: gzip, deflate";
+    $header[] = "accept-language: en-US,en;q=0.8";
+    $header[] = "CLIENT-IP:" . $ip;
+    $header[] = "X-FORWARDED-FOR:" . $ip;
+    $ch = curl_init();
+    curl_setopt($ch, CURLOPT_URL, $baiduSite);
+    curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
+    curl_setopt($ch, CURLOPT_REFERER, "https://www.baidu.com/s?ie=UTF-8&wd={$url}");
+    curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36");
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+    curl_setopt($ch, CURLOPT_ENCODING, 'gzip,deflate');
+    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
+    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
+    curl_setopt($ch, CURLOPT_TIMEOUT, 5);
+    $output = curl_exec($ch);
+    curl_close($ch);
+    $res = str_replace([' ', "\n", "\r"], '', $output);
+    if (strpos($res, "抱歉，没有找到与") || strpos($res, "找到相关结果约0个") || strpos($res, "没有找到该URL") || strpos($res, "抱歉没有找到")) {
+        $self->response->throwJson(array("data" => "未收录"));
+    } else {
+        $self->response->throwJson(array("data" => "已收录"));
+    }
+}
--- a/functions.php
+++ b/functions.php
@ -38,7 +38,7 @@ function themeConfig($form)
    $JFavicon = new Typecho_Widget_Helper_Form_Element_Textarea(
        'JFavicon',
        NULL,
-        'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/favicon.ico',
+        'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/favicon.ico',
        '网站 Favicon 设置',
        '介绍：用于设置网站 Favicon，一个好的 Favicon 可以给用户一种很专业的观感 <br />
         格式：图片 URL地址 或 Base64 地址 <br />
@ -50,7 +50,7 @@ function themeConfig($form)
    $JLogo = new Typecho_Widget_Helper_Form_Element_Textarea(
        'JLogo',
        NULL,
-        'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/logo.png',
+        'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/img/logo.png',
        '网站 Logo 设置',
        '介绍：用于设置网站 Logo，一个好的 Logo 能为网站带来有效的流量 <br />
         格式：图片 URL地址 或 Base64 地址 <br />
@ -75,6 +75,93 @@ function themeConfig($form)
    $JNavMaxNum->setAttribute('class', 'joe_content joe_global');
    $form->addInput($JNavMaxNum->multiMode());

+    $JList_Animate = new Typecho_Widget_Helper_Form_Element_Select(
+        'JList_Animate',
+        array(
+            'off' => '关闭（默认）',
+            'bounce' => 'bounce',
+            'flash' => 'flash',
+            'pulse' => 'pulse',
+            'rubberBand' => 'rubberBand',
+            'headShake' => 'headShake',
+            'swing' => 'swing',
+            'tada' => 'tada',
+            'wobble' => 'wobble',
+            'jello' => 'jello',
+            'heartBeat' => 'heartBeat',
+            'bounceIn' => 'bounceIn',
+            'bounceInDown' => 'bounceInDown',
+            'bounceInLeft' => 'bounceInLeft',
+            'bounceInRight' => 'bounceInRight',
+            'bounceInUp' => 'bounceInUp',
+            'bounceOut' => 'bounceOut',
+            'bounceOutDown' => 'bounceOutDown',
+            'bounceOutLeft' => 'bounceOutLeft',
+            'bounceOutRight' => 'bounceOutRight',
+            'bounceOutUp' => 'bounceOutUp',
+            'fadeIn' => 'fadeIn',
+            'fadeInDown' => 'fadeInDown',
+            'fadeInDownBig' => 'fadeInDownBig',
+            'fadeInLeft' => 'fadeInLeft',
+            'fadeInLeftBig' => 'fadeInLeftBig',
+            'fadeInRight' => 'fadeInRight',
+            'fadeInRightBig' => 'fadeInRightBig',
+            'fadeInUp' => 'fadeInUp',
+            'fadeInUpBig' => 'fadeInUpBig',
+            'fadeOut' => 'fadeOut',
+            'fadeOutDown' => 'fadeOutDown',
+            'fadeOutDownBig' => 'fadeOutDownBig',
+            'fadeOutLeft' => 'fadeOutLeft',
+            'fadeOutLeftBig' => 'fadeOutLeftBig',
+            'fadeOutRight' => 'fadeOutRight',
+            'fadeOutRightBig' => 'fadeOutRightBig',
+            'fadeOutUp' => 'fadeOutUp',
+            'fadeOutUpBig' => 'fadeOutUpBig',
+            'flip' => 'flip',
+            'flipInX' => 'flipInX',
+            'flipInY' => 'flipInY',
+            'flipOutX' => 'flipOutX',
+            'flipOutY' => 'flipOutY',
+            'rotateIn' => 'rotateIn',
+            'rotateInDownLeft' => 'rotateInDownLeft',
+            'rotateInDownRight' => 'rotateInDownRight',
+            'rotateInUpLeft' => 'rotateInUpLeft',
+            'rotateInUpRight' => 'rotateInUpRight',
+            'rotateOut' => 'rotateOut',
+            'rotateOutDownLeft' => 'rotateOutDownLeft',
+            'rotateOutDownRight' => 'rotateOutDownRight',
+            'rotateOutUpLeft' => 'rotateOutUpLeft',
+            'rotateOutUpRight' => 'rotateOutUpRight',
+            'hinge' => 'hinge',
+            'jackInTheBox' => 'jackInTheBox',
+            'rollIn' => 'rollIn',
+            'rollOut' => 'rollOut',
+            'zoomIn' => 'zoomIn',
+            'zoomInDown' => 'zoomInDown',
+            'zoomInLeft' => 'zoomInLeft',
+            'zoomInRight' => 'zoomInRight',
+            'zoomInUp' => 'zoomInUp',
+            'zoomOut' => 'zoomOut',
+            'zoomOutDown' => 'zoomOutDown',
+            'zoomOutLeft' => 'zoomOutLeft',
+            'zoomOutRight' => 'zoomOutRight',
+            'zoomOutUp' => 'zoomOutUp',
+            'slideInDown' => 'slideInDown',
+            'slideInLeft' => 'slideInLeft',
+            'slideInRight' => 'slideInRight',
+            'slideInUp' => 'slideInUp',
+            'slideOutDown' => 'slideOutDown',
+            'slideOutLeft' => 'slideOutLeft',
+            'slideOutRight' => 'slideOutRight',
+            'slideOutUp' => 'slideOutUp',
+        ),
+        'off',
+        '选择一款炫酷的列表动画',
+        '介绍：开启后，列表将会显示所选择的炫酷动画'
+    );
+    $JList_Animate->setAttribute('class', 'joe_content joe_global');
+    $form->addInput($JList_Animate->multiMode());
+
    $JAside = new Typecho_Widget_Helper_Form_Element_Checkbox(
        'JAside',
        array(
@ -96,7 +183,7 @@ function themeConfig($form)
    $JAside_Author_Image = new Typecho_Widget_Helper_Form_Element_Textarea(
        'JAside_Author_Image',
        NULL,
-        "https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/aside_author_image.jpg",
+        "https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/img/aside_author_image.jpg",
        '作者栏 —— 背景',
        '介绍：用于修改作者栏的背景图片 <br/>
         格式：图片地址 <br />
@ -301,7 +388,7 @@ function themeConfig($form)
    $JLazyload = new Typecho_Widget_Helper_Form_Element_Textarea(
        'JLazyload',
        NULL,
-        "https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/lazyload.jpg",
+        "https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/img/lazyload.jpg",
        '自定义懒加载图',
        '介绍：用于修改主题默认懒加载图 <br/>
         格式：图片地址'
@ -347,4 +434,28 @@ function themeConfig($form)
    );
    $JIndex_Hot->setAttribute('class', 'joe_content joe_index');
    $form->addInput($JIndex_Hot->multiMode());
+
+    $JIndex_Ad = new Typecho_Widget_Helper_Form_Element_Textarea(
+        'JIndex_Ad',
+        NULL,
+        NULL,
+        '首页大屏广告',
+        '介绍：请务必填写正确的格式 <br />
+         格式：广告图片 || 广告链接 （中间使用两个竖杠分隔，限制一个）<br />
+         例如：https://puui.qpic.cn/media_img/lena/PICykqaoi_580_1680/0 || http://baidu.com'
+    );
+    $JIndex_Ad->setAttribute('class', 'joe_content joe_index');
+    $form->addInput($JIndex_Ad);
+
+    $JIndex_Notice = new Typecho_Widget_Helper_Form_Element_Textarea(
+        'JIndex_Notice',
+        NULL,
+        NULL,
+        '首页通知文字（非必填）',
+        '介绍：请务必填写正确的格式 <br />
+         格式：通知文字 || 跳转链接（中间使用两个竖杠分隔，限制一个）<br />
+         例如：欢迎加入Joe官方QQ群 || http://baidu.com'
+    );
+    $JIndex_Notice->setAttribute('class', 'joe_content joe_index');
+    $form->addInput($JIndex_Notice);
 } ?>
--- a/index.php
+++ b/index.php
@ -15,7 +15,6 @@
 <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>
@ -24,8 +23,9 @@
        <div class="joe_container">
            <div class="joe_main">
                <div class="joe_index">
+
+                    <!-- Index Banner -->
                    <?php
-                    /* 轮播图 */
                    $carousel = [];
                    $carousel_text = $this->options->JIndex_Carousel;
                    if ($carousel_text) {
@ -39,7 +39,6 @@
                            };
                        }
                    }
-                    /* 推荐文章 */
                    $recommend = [];
                    $recommend_text = $this->options->JIndex_Recommend;
                    if ($recommend_text) {
@ -49,13 +48,15 @@
                    ?>
                    <?php if (sizeof($carousel) > 0 || sizeof($recommend) === 2) : ?>
                        <div class="joe_index__banner">
+
+                            <!-- Index Carousel -->
                            <?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%" />
+                                                    <img class="thumbnail" onerror="<?php _getLazyload() ?>" 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>
@ -67,13 +68,15 @@
                                    <div class="swiper-pagination"></div>
                                </div>
                            <?php endif; ?>
+
+                            <!-- Index Recommend -->
                            <?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" src="<?php _getLazyload(); ?>" data-original="<?php _getThumbnail($item); ?>" alt="<?php $item->title() ?>" width="100%" />
+                                                <img class="lazyload" onerror="<?php _getLazyload() ?>" src="<?php _getLazyload(); ?>" data-original="<?php _getThumbnail($item); ?>" alt="<?php $item->title() ?>" width="100%" />
                                            </a>
                                            <figcaption class="information">
                                                <span class="information_type">推荐</span>
@ -85,6 +88,8 @@
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
+
+                    <!-- Index Hot -->
                    <?php if ($this->options->JIndex_Hot === "on") : ?>
                        <?php $this->widget('Widget_Contents_Hot@Index', 'pageSize=4')->to($item); ?>
                        <div class="joe_index__hot">
@ -94,7 +99,7 @@
                                        <a class="link" href="<?php $item->permalink(); ?>" title="<?php $item->title(); ?>">
                                            <figure class="inner">
                                                <span class="views"><?php _getViews($item); ?></span>
-                                                <img class="image lazyload" src="<?php _getLazyload(); ?>" data-original="<?php _getThumbnail($item); ?>" alt="<?php $item->title(); ?>" />
+                                                <img class="image lazyload" onerror="<?php _getLazyload() ?>" src="<?php _getLazyload(); ?>" data-original="<?php _getThumbnail($item); ?>" alt="<?php $item->title(); ?>" />
                                                <figcaption class="title"><?php $item->title(); ?></figcaption>
                                            </figure>
                                        </a>
@ -103,6 +108,26 @@
                            </ul>
                        </div>
                    <?php endif; ?>
+
+                    <!-- Index Ad -->
+                    <?php
+                    $index_ad_text = $this->options->JIndex_Ad;
+                    $index_ad = null;
+                    if ($index_ad_text) {
+                        $index_ad_arr = explode("||", $index_ad_text);
+                        if (count($index_ad_arr) === 2) $index_ad = array("image" => trim($index_ad_arr[0]), "url" => trim($index_ad_arr[1]));
+                    }
+                    ?>
+                    <?php if ($index_ad) : ?>
+                        <div class="joe_index__ad">
+                            <a class="joe_index__ad-link" href="<?php echo $index_ad['url'] ?>" target="_blank" rel="noopener noreferrer nofollow">
+                                <img class="image lazyload" onerror="<?php _getLazyload() ?>" src="<?php _getLazyload() ?>" data-original="<?php echo $index_ad['image'] ?>" alt="<?php echo $index_ad['url'] ?>" width="100%" />
+                                <span class="icon">广告</span>
+                            </a>
+                        </div>
+                    <?php endif; ?>
+
+                    <!-- Index Title -->
                    <div class="joe_index__title">
                        <ul class="joe_index__title-title">
                            <li class="item" data-type="created">最新文章</li>
@ -111,8 +136,29 @@
                            <li class="item" data-type="views">浏览最多</li>
                            <li class="line"></li>
                        </ul>
+
+                        <!-- Index Notice -->
+                        <?php
+                        $index_notice_text = $this->options->JIndex_Notice;
+                        $index_notice = null;
+                        if ($index_notice_text) {
+                            $index_notice_arr = explode("||", $index_notice_text);
+                            if (count($index_notice_arr) === 2) $index_notice = array("text" => trim($index_notice_arr[0]), "url" => trim($index_notice_arr[1]));
+                        }
+                        ?>
+                        <?php if ($index_notice) : ?>
+                            <div class="joe_index__title-notice">
+                                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                                    <path d="M656.26112 347.20768a188.65152 188.65152 0 1 0 0 324.04992V347.20768z" fill="#F4CA1C"></path>
+                                    <path d="M668.34944 118.88128a73.34912 73.34912 0 0 0-71.168-4.06016L287.17056 263.5008a4.608 4.608 0 0 1-2.01216 0.4608H130.048A73.728 73.728 0 0 0 56.32 337.59744v349.63968a73.728 73.728 0 0 0 73.728 73.63584h156.55424a4.67968 4.67968 0 0 1 1.94048 0.43008l309.59104 143.19616a73.7024 73.7024 0 0 0 104.66816-66.82112V181.20704a73.216 73.216 0 0 0-34.45248-62.32576zM125.40416 687.23712V337.59744a4.608 4.608 0 0 1 4.608-4.608h122.0352v358.88128H130.048a4.608 4.608 0 0 1-4.64384-4.6336z m508.31872 150.44096a4.608 4.608 0 0 1-6.56384 4.19328l-306.02752-141.55264V323.77344l305.9712-146.72384a4.608 4.608 0 0 1 6.62016 4.15744v656.47104z m304.5376-358.95808h-150.25152a34.5088 34.5088 0 1 0 0 69.0176h150.25152a34.5088 34.5088 0 1 0 0-69.0176z m-128.25088-117.76a34.44736 34.44736 0 0 0 24.41728-10.10176L940.672 244.736a34.52416 34.52416 0 0 0-48.83968-48.80896L785.5872 302.08a34.5088 34.5088 0 0 0 24.4224 58.88z m24.41728 314.60864a34.52416 34.52416 0 1 0-48.83968 48.81408l106.24512 106.1376a34.52416 34.52416 0 0 0 48.83968-48.80896z" fill="#595BB3"></path>
+                                </svg>
+                                <a href="<?php echo $index_notice['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"><?php echo $index_notice['text'] ?></a>
+                            </div>
+                        <?php endif; ?>
                    </div>
-                    <div class="joe_index__list">
+
+                    <!-- Index List -->
+                    <div class="joe_index__list" data-wow="<?php $this->options->JList_Animate() ?>">
                        <ul class="joe_list"></ul>
                        <ul class="joe_list__loading">
                            <li class="item">
--- a/post.php
+++ b/post.php
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <?php $this->need('public/include.php'); ?>
+    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>">
+</head>
+
+<body>
+    <div id="Joe">
+        <?php $this->need('public/header.php'); ?>
+
+        <div class="joe_container joe_bread">
+            <ul class="joe_bread__bread">
+                <li class="item">
+                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M 307.867 805.441 h 408.266 v -229.649 c 0 -15.31 29.3441 -22.0464 44.6541 -22.0464 c 15.3355 0 27.7621 12.4266 27.7621 27.7621 v 277.544 c 0 15.3355 -12.4266 27.7621 -27.7621 27.7621 H 261.197 c -15.31 0 -27.7621 -12.4266 -27.7621 -27.7621 V 581.507 c 0 -15.31 12.4266 -27.7621 27.7621 -27.7621 c 15.31 0 46.67 6.71087 46.67 22.0464 v 229.649 Z M 205.8 524.758 c -10.8445 10.8445 -56.8511 3.92956 -67.6957 -6.88949 a 27.7621 27.7621 0 0 1 -0.0255172 -39.2956 L 491.332 125.346 a 27.7621 27.7621 0 0 1 39.2956 0 L 883.931 478.573 a 27.8132 27.8132 0 0 1 -12.4777 46.4914 c -9.56878 2.55167 -46.2362 6.68536 -53.2532 -0.331716 L 512 218.559 L 205.8 524.758 Z" p-id="9359"></path>
+                    </svg>
+                    <a href="<?php $this->options->siteUrl(); ?>" class="link" title="首页">首页</a>
+                </li>
+                <li class="line">/</li>
+                <?php if (sizeof($this->categories) > 0) : ?>
+                    <li class="item">
+                        <a class="link" href="<?php echo $this->categories[0]['permalink']; ?>" title="<?php echo $this->categories[0]['name']; ?>"><?php echo $this->categories[0]['name']; ?></a>
+                    </li>
+                    <li class="line">/</li>
+                <?php endif; ?>
+                <li class="item">正文</li>
+            </ul>
+        </div>
+
+        <div class="joe_container">
+            <div class="joe_main">
+                <?php $this->need('public/article.php'); ?>
+            </div>
+            <?php $this->need('public/aside.php'); ?>
+        </div>
+
+        <?php $this->need('public/footer.php'); ?>
+    </div>
+</body>
+
+</html>
--- a/public/article.php
+++ b/public/article.php
@ -0,0 +1,45 @@
+<div class="joe_detail">
+    <?php if (sizeof($this->categories) > 0 && $this->is('post')) : ?>
+        <div class="joe_detail__category">
+            <?php foreach (array_slice($this->categories, 0, 5) as $key => $item) : ?>
+                <a href="<?php echo $item['permalink']; ?>" class="item item-<?php echo $key ?>" title="<?php echo $item['name']; ?>"><?php echo $item['name']; ?></a>
+            <?php endforeach; ?>
+        </div>
+    <?php endif; ?>
+    <h1 class="joe_detail__title"><?php $this->title() ?></h1>
+    <div class="joe_detail__count">
+        <div class="joe_detail__count-information">
+            <img class="avatar" src="<?php _getAvatarByMail($this->author->mail) ?>" alt="<?php $this->author(); ?>" />
+            <div class="meta">
+                <div class="author">
+                    <a class="link" href="<?php $this->author->permalink(); ?>" title="<?php $this->author(); ?>"><?php $this->author(); ?></a>
+                </div>
+                <div class="item">
+                    <span class="text"><?php $this->date('Y-m-d'); ?></span>
+                    <span class="line">/</span>
+                    <span class="text"><?php $this->commentsNum('%d'); ?> 评论</span>
+                    <span class="line">/</span>
+                    <span class="text"><?php _getViews($this); ?> 阅读</span>
+                    <span class="line">/</span>
+                    <span class="text" id="Joe_Baidu_Record">正在检测是否收录...</span>
+                </div>
+            </div>
+        </div>
+        <time class="joe_detail__count-created" datetime="<?php $this->date('m/d'); ?>"><?php $this->date('m/d'); ?></time>
+    </div>
+    <div class="joe_detail__article">
+        <!-- 如果是文章页面，选择输出 -->
+        <?php if ($this->is('post')) : ?>
+            <!-- 设置了密码，则显示密码 -->
+            <?php if ($this->hidden) : ?>
+                
+                <!-- 未设置密码，正常输出 -->
+            <?php else : ?>
+                <?php _parseContent($this) ?>
+            <?php endif; ?>
+            <!-- 如果是独立页面，直接输出内容 -->
+        <?php else : ?>
+            <?php _parseContent($this) ?>
+        <?php endif; ?>
+    </div>
+</div>
--- a/public/aside.php
+++ b/public/aside.php
@ -2,7 +2,7 @@
    <aside class="joe_aside">
        <?php if (in_array('author', $this->options->JAside)) : ?>
            <section class="joe_aside__item author">
-                <img class="image" src="<?php $this->options->JAside_Author_Image() ?>" alt="<?php $this->author->screenName(); ?>" />
+                <img class="image" onerror="<?php _getLazyload() ?>" src="<?php $this->options->JAside_Author_Image() ?>" alt="<?php $this->author->screenName(); ?>" />
                <div class="user">
                    <img class="avatar" src="<?php _getAvatarByMail($this->author->mail) ?>" alt="<?php $this->author->screenName(); ?>" />
                    <a class="link" href="<?php $this->options->JAside_Author_Link() ?>" target="_blank" rel="noopener noreferrer nofollow"><?php $this->author->screenName(); ?></a>
@ -59,7 +59,7 @@
                            <li class="item">
                                <a class="link" href="<?php $item->permalink(); ?>" title="<?php $item->title(); ?>">
                                    <i class="sort"><?php echo $index; ?></i>
-                                    <img class="image lazyload" src="<?php _getLazyload(); ?>" data-original="<?php _getThumbnail($item); ?>" alt="<?php $item->title() ?>" />
+                                    <img class="image lazyload" onerror="<?php _getLazyload() ?>" src="<?php _getLazyload(); ?>" data-original="<?php _getThumbnail($item); ?>" alt="<?php $item->title() ?>" />
                                    <div class="describe">
                                        <h6><?php $item->title(); ?></h6>
                                        <span><?php _getViews($item); ?> 阅读 - <?php $item->date('m/d'); ?></span>
--- a/public/include.php
+++ b/public/include.php
@ -14,8 +14,10 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" />

 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.scroll.js"></script>
-<script src="<?php $this->options->themeUrl('assets/js/joe.lazyload.js'); ?>"></script>
+<script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/js/joe.scroll.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/js/joe.lazyload.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script>
 <script src="<?php $this->options->themeUrl('assets/js/joe.global.js'); ?>"></script>
 <script async src="https://apip.weatherdt.com/standard/static/js/weather-standard.js?v=2.0"></script>
-<script async src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.smooth.js"></script>
+<script async src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe/assets/js/joe.smooth.js"></script>
				`@ -0,0 +1 @@`
				.joe_bread{padding-top:15px}.joe_bread__bread{display:flex;align-items:center}.joe_bread__bread .line{color:var(--seat);padding:0 8px}.joe_bread__bread .item{color:var(--minor);white-space:nowrap}.joe_bread__bread .item .link{color:var(--routine);transition:color 0.35s}.joe_bread__bread .item .link:hover{color:var(--theme)}.joe_bread__bread .item .icon{width:15px;height:15px;min-width:15px;min-height:15px;fill:var(--routine);margin-right:2px}.joe_bread__bread .item:first-child{display:flex;align-items:center}