This commit is contained in:
杜恒 2021-01-22 18:37:16 +08:00
parent d94a487332
commit f787c2fc52
17 changed files with 594 additions and 48 deletions

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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%;

View File

@ -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}

View File

@ -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;

1
assets/css/joe.post.css Normal file
View File

@ -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}

34
assets/css/joe.post.scss Normal file
View File

@ -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;
}
}
}
}

View File

@ -9,7 +9,7 @@ window.Joe = function () {
const IsMobile = /windows phone|iphone|android/gi.test(window.navigator.userAgent);
/* 设置侧边栏最后一个元素的高度 */
$('.joe_aside .joe_aside__item:last-child').css('top', Header_Height + 15);
/* Dropdown */
$('.joe_dropdown').each(function (index, item) {
const menu = $(this).find('.joe_dropdown__menu');
@ -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();

View File

@ -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()

View File

@ -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" => "已收录"));
}
}

View File

@ -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);
} ?>

View File

@ -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">

43
post.php Normal file
View File

@ -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>

45
public/article.php Normal file
View File

@ -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>

View File

@ -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>

View File

@ -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>