跟香港

This commit is contained in:
杜恒 2021-01-27 13:00:55 +08:00
parent 1c18541500
commit 6ed30c291e
23 changed files with 122 additions and 67 deletions

View File

@ -1 +1,8 @@
下一代Typecho Joe主题 Typecho Joe 主题新一代版本
SCSS 本地编译方式(如果需要修改样式):
1、安装 Node.js
2、node.js 安装完成后,安装 node-scss(npm i -g node-sass)
3、安装 VSCode
4、VSCode 软件安装 `scss-to-css` 插件(https://github.com/yutent/scss-to-css/blob/master/README_ZH.md)
5、上面步骤安装完成后在编写 SCSS 文件时,直接保存,即可生成编译后的 CSS 文件

View File

@ -3,9 +3,8 @@
<head> <head>
<?php $this->need('public/include.php'); ?> <?php $this->need('public/include.php'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" /> <!-- 搜索页面需要用到的CSS及JS -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.archive.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.archive.css'); ?>">
<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.archive.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.archive.js'); ?>"></script>
</head> </head>

File diff suppressed because one or more lines are too long

View File

@ -1460,23 +1460,6 @@ html[data-night='night'] {
font-style: normal; font-style: normal;
cursor: pointer; cursor: pointer;
color: var(--theme); color: var(--theme);
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
width: 100%;
height: 1px;
background: var(--theme);
transform: scaleX(0.25);
opacity: 0;
transition: transform 0.35s, opacity 0.35s;
}
&:hover::after {
opacity: 1;
transform: scaleX(1);
}
} }
} }
&-protected { &-protected {

View File

@ -1 +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} .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}.joe_post__pagination{display:flex;justify-content:space-between}.joe_post__pagination-item{margin-bottom:15px}.joe_post__pagination-item a{display:block;height:32px;line-height:32px;padding:0 15px;color:#fff;border-radius:3px;background:var(--theme);font-size:12px;box-shadow:var(--box-shadow)}.joe_post__pagination-item a:hover{-webkit-animation:pulse 1s;animation:pulse 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_post__pagination-item.next{margin-left:auto}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 var(--theme)}}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--theme)}}

View File

@ -33,3 +33,37 @@
} }
} }
} }
.joe_post {
&__pagination {
display: flex;
justify-content: space-between;
&-item {
margin-bottom: 15px;
a {
display: block;
height: 32px;
line-height: 32px;
padding: 0 15px;
color: #fff;
border-radius: 3px;
background: var(--theme);
font-size: 12px;
box-shadow: var(--box-shadow);
&:hover{
animation: pulse 1s;
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
&.next {
margin-left: auto;
}
}
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--theme);
}
}

View File

@ -3,7 +3,15 @@ document.addEventListener('DOMContentLoaded', () => {
/* 激活列表特效 */ /* 激活列表特效 */
{ {
const wow = $('.joe_archive__list').attr('data-wow'); const wow = $('.joe_archive__list').attr('data-wow');
if (wow !== 'off' && wow) new WOW({ boxClass: 'wow', animateClass: `animated ${wow}`, offset: 0, mobile: true, live: true, scrollContainer: null }).init(); if (wow !== 'off' && wow)
new WOW({
boxClass: 'wow',
animateClass: `animated ${wow}`,
offset: 0,
mobile: true,
live: true,
scrollContainer: null
}).init();
} }
console.timeEnd('Archive.js执行时长'); console.timeEnd('Archive.js执行时长');
}); });

View File

@ -244,16 +244,8 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
/* 激活点击回复可见的回复按钮,页面滚动到评论区 */
{
$('.joe_detail__article-hide i').on('click', function () {
const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15;
window.scrollTo({ top, behavior: 'smooth' });
});
}
/* 懒加载 */ /* 懒加载 */
new LazyLoad('.lazyload'); new LazyLoad('.lazyload');
console.timeEnd('Global.js执行时长'); console.timeEnd('Global.js执行时长');
}); });

View File

@ -126,5 +126,44 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
}); });
} }
/* 格式化分页的hash值 */
{
$('.joe_comment .joe_pagination a').each((index, item) => {
const href = $(item).attr('href');
if (href && href.includes('#')) {
$(item).attr('href', href.replace('#comments', '?scroll=joe_comment'));
}
});
}
console.timeEnd('Post&Page.js执行时长'); console.timeEnd('Post&Page.js执行时长');
}); });
/* 写在load事件里为了解决图片未加载完成滚动距离获取会不准确的问题 */
window.addEventListener('load', function () {
/* 激活点击回复可见的回复按钮,页面滚动到评论区 */
{
$('.joe_detail__article-hide i').on('click', function () {
const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15;
window.scrollTo({ top, behavior: 'smooth' });
});
}
/* 判断地址栏是否有锚点链接,有则跳转到对应位置 */
{
const scroll = new URLSearchParams(location.search).get('scroll');
if (scroll) {
const height = $('.joe_header').height();
let elementEL = null;
if ($('#' + scroll).length > 0) {
elementEL = $('#' + scroll);
} else {
elementEL = $('.' + scroll);
}
if (elementEL && elementEL.length > 0) {
const top = elementEL.offset().top - height - 15;
window.scrollTo({ top, behavior: 'smooth' });
}
}
}
});

View File

@ -14,10 +14,7 @@
<head> <head>
<?php $this->need('public/include.php'); ?> <?php $this->need('public/include.php'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css"> <!-- 友联页面需要用到的CSS及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head> </head>

View File

@ -18,8 +18,8 @@ function themeConfig($form)
} catch (Exception $e) { } catch (Exception $e) {
} }
?> ?>
<link rel="stylesheet" href="<?php Helper::options()->themeUrl('assets/css/joe.config.css') ?>"> <link rel="stylesheet" href="<?php Helper::options()->themeUrl('assets/config/css/joe.config.css') ?>">
<script src="<?php Helper::options()->themeUrl('assets/js/joe.config.js') ?>"></script> <script src="<?php Helper::options()->themeUrl('assets/config/js/joe.config.js') ?>"></script>
<div class="joe_config"> <div class="joe_config">
<div> <div>
<div class="joe_config__aside"> <div class="joe_config__aside">

View File

@ -15,11 +15,7 @@
<head> <head>
<?php $this->need('public/include.php'); ?> <?php $this->need('public/include.php'); ?>
<!-- 首页所使用到的CSS以及JS --> <!-- 首页所使用到的CSS以及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" />
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.index.css'); ?>"> <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>
<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.index.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.index.js'); ?>"></script>
</head> </head>

View File

@ -3,11 +3,8 @@
<head> <head>
<?php $this->need('public/include.php'); ?> <?php $this->need('public/include.php'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css"> <!-- 独立页面需要用到CSS及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head> </head>

View File

@ -3,18 +3,15 @@
<head> <head>
<?php $this->need('public/include.php'); ?> <?php $this->need('public/include.php'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css"> <!-- 文章页需要用到的CSS及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head> </head>
<body> <body>
<div id="Joe"> <div id="Joe">
<?php $this->need('public/header.php'); ?> <?php $this->need('public/header.php'); ?>
<div class="joe_container joe_bread"> <div class="joe_container joe_bread">
<ul class="joe_bread__bread"> <ul class="joe_bread__bread">
<li class="item"> <li class="item">
@ -33,6 +30,7 @@
<li class="item">正文</li> <li class="item">正文</li>
</ul> </ul>
</div> </div>
<div class="joe_container"> <div class="joe_container">
<div class="joe_main joe_post"> <div class="joe_main joe_post">
<div class="joe_detail" data-cid="<?php echo $this->cid ?>"> <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
@ -40,6 +38,10 @@
<?php $this->need('public/handle.php'); ?> <?php $this->need('public/handle.php'); ?>
<?php $this->need('public/copyright.php'); ?> <?php $this->need('public/copyright.php'); ?>
</div> </div>
<ul class="joe_post__pagination">
<?php $this->theNext('<li class="joe_post__pagination-item prev">%s</li>', '', ['title' => '上一篇']); ?>
<?php $this->thePrev('<li class="joe_post__pagination-item next">%s</li>', '', ['title' => '下一篇']); ?>
</ul>
<?php $this->need('public/comment.php'); ?> <?php $this->need('public/comment.php'); ?>
</div> </div>
<?php $this->need('public/aside.php'); ?> <?php $this->need('public/aside.php'); ?>

View File

@ -86,8 +86,8 @@
<?php <?php
function threadedComments($comments, $options) function threadedComments($comments, $options)
{ ?> { ?>
<li class="comment-list__item" id="li-<?php $comments->theId(); ?>"> <li class="comment-list__item" id="<?php $comments->theId(); ?>">
<div class="contain" id="<?php $comments->theId(); ?>"> <div class="contain">
<img class="avatar lazyload" src="<?php _getAvatarLazyload() ?>" data-original="<?php _getAvatarByMail($comments->mail); ?>" alt="<?php $comments->author(); ?>" /> <img class="avatar lazyload" src="<?php _getAvatarLazyload() ?>" data-original="<?php _getAvatarByMail($comments->mail); ?>" alt="<?php $comments->author(); ?>" />
<div class="content"> <div class="content">
<div class="user"> <div class="user">

View File

@ -1,4 +1,6 @@
<script> <script>
/* 用于页面一进入直接判断是否是黑夜模式请勿将它移走或删除必须放这里解决闪烁问题下面的style也是请勿修改 */
if (localStorage.getItem('data-night')) document.querySelector("html").setAttribute("data-night", "night")
window.Joe = { window.Joe = {
LIVE2D: '<?php $this->options->JLive2d() ?>', LIVE2D: '<?php $this->options->JLive2d() ?>',
BASE_API: '/index.php/joe/api', BASE_API: '/index.php/joe/api',
@ -9,8 +11,6 @@
encryption: str => window.btoa(unescape(encodeURIComponent(str))), encryption: str => window.btoa(unescape(encodeURIComponent(str))),
decrypt: str => decodeURIComponent(escape(window.atob(str))), decrypt: str => decodeURIComponent(escape(window.atob(str))),
} }
/* 用于页面一进入直接判断是否是黑夜模式请勿将它移走或删除必须放这里解决闪烁问题下面的style也是请勿修改 */
if (localStorage.getItem('data-night')) document.querySelector("html").setAttribute("data-night", "night")
</script> </script>
<style> <style>
body::before { body::before {
@ -19,16 +19,13 @@
echo $this->options->JWallpaper_Background_WAP ? "url(" . $this->options->JWallpaper_Background_WAP . ")" : "#f5f5f5"; echo $this->options->JWallpaper_Background_WAP ? "url(" . $this->options->JWallpaper_Background_WAP . ")" : "#f5f5f5";
} else { } else {
echo $this->options->JWallpaper_Background_PC ? "url(" . $this->options->JWallpaper_Background_PC . ")" : "#f5f5f5"; echo $this->options->JWallpaper_Background_PC ? "url(" . $this->options->JWallpaper_Background_PC . ")" : "#f5f5f5";
} } ?>;
?>;
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
</style> </style>
<!-- <<<<<<<<<<<<<<<<<<<< 主题开始 >>>>>>>>>>>>>>>>>>>> --> <!-- <<<<<<<<<<<<<<<<<<<< 主题开始 >>>>>>>>>>>>>>>>>>>> -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="renderer" content="webkit" /> <meta name="renderer" content="webkit" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="Cache-Control" content="no-siteapp" />
@ -36,23 +33,27 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<link rel="shortcut icon" href="<?php $this->options->JFavicon() ?>" /> <link rel="shortcut icon" href="<?php $this->options->JFavicon() ?>" />
<title><?php $this->archiveTitle(array('category' => '分类 %s 下的文章', 'search' => '包含关键字 %s 的文章', 'tag' => '标签 %s 下的文章', 'author' => '%s 发布的文章'), '', ' - '); ?><?php $this->options->title(); ?></title> <title><?php $this->archiveTitle(array('category' => '分类 %s 下的文章', 'search' => '包含关键字 %s 的文章', 'tag' => '标签 %s 下的文章', 'author' => '%s 发布的文章'), '', ' - '); ?><?php $this->options->title(); ?></title>
<?php $this->header(); ?> <?php $this->header(); ?>
<!-- 全局公用CSS静态资源放在了CDN上如果你的服务器带宽不够请不要修改成本地cdn采用jsdelivr放心不会失效 -->
<!-- 全局公用CSS -->
<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://apip.weatherdt.com/standard/static/css/weather-standard.css"> <link rel="stylesheet" href="https://apip.weatherdt.com/standard/static/css/weather-standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" />
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.owo.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.owo.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css'); ?>">
<!-- 全局公用JS --> <!-- 全局公用JS静态资源放在了CDN上如果你的服务器带宽不够请不要修改成本地cdn采用jsdelivr放心不会失效 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.scroll.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.lazyload.js"></script> <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.lazyload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.sketchpad.js"></script> <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.sketchpad.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.owo.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.owo.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.global.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.global.js'); ?>"></script>
<!-- 下面是异步加载的JS --> <!-- 下面是异步加载的JS -->
<script async src="https://apip.weatherdt.com/standard/static/js/weather-standard.js?v=2.0"></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@master/assets/js/joe.smooth.js"></script>