caojiezi2003/Jony
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

跟香港

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
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 文件

3
archive.php
View File

@ -3,9 +3,8 @@
<head>
<?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'); ?>">
<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>
</head>

0
assets/css/joe.config.css → assets/config/css/joe.config.css
View File

0
assets/css/joe.config.scss → assets/config/css/joe.config.scss
View File

0
assets/js/joe.config.js → assets/config/js/joe.config.js
View File

2
assets/css/joe.global.css
View File

File diff suppressed because one or more lines are too long

17
assets/css/joe.global.scss
View File

@ -1460,23 +1460,6 @@ html[data-night='night'] {
font-style: normal;
cursor: pointer;
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 {

2
assets/css/joe.post.css
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)}}

34
assets/css/joe.post.scss
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);
}
}

10
assets/js/joe.archive.js
View File

@ -3,7 +3,15 @@ document.addEventListener('DOMContentLoaded', () => {
/* 激活列表特效 */
{
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执行时长');
});

10
assets/js/joe.global.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');
console.timeEnd('Global.js执行时长');
});
});

39
assets/js/joe.post&page.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执行时长');
});
/* 写在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' });
}
}
}
});

5
friends.php
View File

@ -14,10 +14,7 @@
<head>
<?php $this->need('public/include.php'); ?>
<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" />
<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>
<!-- 友联页面需要用到的CSS及JS -->
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head>

4
functions.php
View File

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

4
index.php
View File

@ -15,11 +15,7 @@
<head>
<?php $this->need('public/include.php'); ?>
<!-- 首页所使用到的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'); ?>">
<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>
</head>

5
page.php
View File

@ -3,11 +3,8 @@
<head>
<?php $this->need('public/include.php'); ?>
<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" />
<!-- 独立页面需要用到CSS及JS -->
<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>
</head>

0
assets/js/joe.lazyload.js → plugin/joe.lazyload.js
View File

0
assets/js/joe.scroll.js → plugin/joe.scroll.js
View File

0
assets/js/joe.sketchpad.js → plugin/joe.sketchpad.js
View File

0
assets/js/joe.smooth.js → plugin/joe.smooth.js
View File

12
post.php
View File

@ -3,18 +3,15 @@
<head>
<?php $this->need('public/include.php'); ?>
<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" />
<!-- 文章页需要用到的CSS及JS -->
<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>
</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">
@ -33,6 +30,7 @@
<li class="item">正文</li>
</ul>
</div>
<div class="joe_container">
<div class="joe_main joe_post">
<div class="joe_detail" data-cid="<?php echo $this->cid ?>">
@ -40,6 +38,10 @@
<?php $this->need('public/handle.php'); ?>
<?php $this->need('public/copyright.php'); ?>
</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'); ?>
</div>
<?php $this->need('public/aside.php'); ?>

4
public/comment.php
View File

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

29
public/include.php
View File

@ -1,4 +1,6 @@
<script>
/* 用于页面一进入，直接判断是否是黑夜模式，请勿将它移走或删除，必须放这里，解决闪烁问题，下面的style也是，请勿修改 */
if (localStorage.getItem('data-night')) document.querySelector("html").setAttribute("data-night", "night")
window.Joe = {
LIVE2D: '<?php $this->options->JLive2d() ?>',
BASE_API: '/index.php/joe/api',
@ -9,8 +11,6 @@
encryption: str => window.btoa(unescape(encodeURIComponent(str))),
decrypt: str => decodeURIComponent(escape(window.atob(str))),
}
/* 用于页面一进入，直接判断是否是黑夜模式，请勿将它移走或删除，必须放这里，解决闪烁问题，下面的style也是，请勿修改 */
if (localStorage.getItem('data-night')) document.querySelector("html").setAttribute("data-night", "night")
</script>
<style>
body::before {
@ -19,16 +19,13 @@
echo $this->options->JWallpaper_Background_WAP ? "url(" . $this->options->JWallpaper_Background_WAP . ")" : "#f5f5f5";
} else {
echo $this->options->JWallpaper_Background_PC ? "url(" . $this->options->JWallpaper_Background_PC . ")" : "#f5f5f5";
}
?>;
} ?>;
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- <<<<<<<<<<<<<<<<<<<< 主题开始 >>>>>>>>>>>>>>>>>>>> -->
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<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">
<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>
<?php $this->header(); ?>
<!-- 全局公用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'); ?>">
<!-- 全局公用CSS（静态资源放在了CDN上，如果你的服务器带宽不够，请不要修改成本地，cdn采用jsdelivr放心不会失效） -->
<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'); ?>">
<!-- 全局公用JS -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css'); ?>">
<!-- 全局公用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/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.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.global.js'); ?>"></script>
<!-- 下面是异步加载的JS -->
<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>