mirror/typecho-joe
2
0
Fork 0
mirror of https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git synced 2026-02-17 13:10:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
杜恒
2021-01-23 16:15:02 +08:00
parent f787c2fc52
commit 6c6f8fc001
7 changed files with 512 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@@ -1049,6 +1049,333 @@
font-family: consolas;
}
}
&__article {
padding-top: 15px;
font-size: 15px;
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--main);
font-size: 18px;
line-height: 24px;
margin-bottom: 15px;
position: relative;
}
h1 {
padding: 0 15px 0 20px;
&::before {
content: '#';
color: var(--theme);
font-weight: 700;
position: absolute;
top: 0;
left: 0;
line-height: 24px;
}
}
h2 {
padding: 0 15px;
&::before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
width: 4px;
border-radius: 2px;
background: var(--theme);
}
}
h3 {
padding: 0 15px;
&::before {
content: '';
position: absolute;
top: 8.5px;
left: 0;
height: 7px;
width: 7px;
border-radius: 50%;
background: var(--theme);
}
}
h4 {
&::before {
content: '「';
color: var(--theme);
font-weight: 600;
margin-right: 5px;
}
&::after {
content: '」';
color: var(--theme);
font-weight: 600;
margin-left: 5px;
}
}
h5 {
padding: 0 15px 0 28px;
&::before {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
background-size: 100% 100%;
}
}
h6 {
padding: 0 15px 0 28px;
&::before {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
background-size: 100% 100%;
}
}
p {
color: var(--routine);
line-height: 26px;
white-space: pre-wrap;
word-spacing: 5px;
letter-spacing: 1px;
word-break: break-all;
margin-bottom: 15px;
}
blockquote {
color: var(--routine);
line-height: 26px;
white-space: pre-wrap;
word-spacing: 5px;
letter-spacing: 1px;
word-break: break-all;
margin-bottom: 15px;
background: #ecf8ff;
border-left: 5px solid #50bfff;
padding: 10px 15px;
border-radius: 0 4px 4px 0;
font-size: 14px;
p {
margin: 0;
}
}
a {
display: inline-block;
line-height: 26px;
color: var(--theme);
position: relative;
&:hover::after {
opacity: 1;
transform: scaleX(1);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background: var(--theme);
transform: scaleX(0.25);
opacity: 0;
transition: transform 0.35s, opacity 0.35s;
}
}
code {
display: inline-block;
min-height: 26px;
line-height: 26px;
border-radius: 4px;
font-size: 12px;
background: #fdf6ec;
padding: 0 8px;
color: #e6a23c;
}
pre code {
display: unset;
vertical-align: unset;
min-height: unset;
line-height: unset;
border-radius: unset;
font-size: unset;
background: unset;
padding: unset;
color: unset;
}
pre[class*='language-'] {
position: relative;
padding: 15px;
padding-top: 35px;
margin: 0 0 15px;
border-radius: 4px;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background: #2d2d2d;
}
&::before {
content: '';
position: absolute;
top: 9px;
left: 15px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fc625d;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 1;
}
}
img {
max-width: 100%;
border-radius: 4px;
transition: transform 0.35s, box-shadow 0.35s;
cursor: zoom-in;
margin: 0 auto;
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.25);
}
}
ol,
ul {
color: var(--routine);
margin-bottom: 20px;
padding: 0 30px;
li {
line-height: 26px;
}
}
ol li {
list-style: decimal;
}
ul li {
list-style: disc;
&::marker {
color: var(--routine);
}
}
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
color: var(--minor);
margin-bottom: 15px;
font-size: 13px;
border-top: 1px solid var(--classC);
border-left: 1px solid var(--classC);
td,
th {
padding: 8px;
border-bottom: 1px solid var(--classC);
border-right: 1px solid var(--classC);
}
thead {
th {
font-weight: 500;
background: var(--classC);
}
}
tbody {
tr {
transition: background 0.35s;
&:hover {
background: var(--classD);
}
}
}
}
&-hide {
background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
padding: 10px 0;
text-align: center;
position: relative;
margin-bottom: 15px;
user-select: none;
i {
position: relative;
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);
}
}
}
}
&__agree {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
.agree {
text-align: center;
font-size: 12px;
color: var(--minor);
user-select: none;
.icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #f56c6c;
cursor: pointer;
margin-bottom: 8px;
&.active {
animation: box_shadow 1s;
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
svg {
position: absolute;
width: 28px;
height: 28px;
transform: scale(0);
opacity: 0;
transition: transform 0.85s, opacity 0.85s;
&.active {
transform: scale(1);
opacity: 1;
}
}
}
}
}
}
@keyframes box_shadow {
0% {
box-shadow: 0 0 0 0 #f56c6c;
}
}
@keyframes progress {

120
assets/js/joe.global.js
View File

@@ -1,16 +1,14 @@
window.Joe = function () {
/* 请求基准URL */
const BASE_API = '/index.php/joe/api';
/* 头部高度 */
const Header_Height = $('.joe_header').height();
/* 解决移动端Hover问题 */
document.addEventListener('touchstart', () => {});
/* 判断是否是手机 */
const IsMobile = /windows phone|iphone|android/gi.test(window.navigator.userAgent);
/* 设置侧边栏最后一个元素的高度 */
$('.joe_aside .joe_aside__item:last-child').css('top', Header_Height + 15);
/* Dropdown */
/* Global Dropdown */
$('.joe_dropdown').each(function (index, item) {
const menu = $(this).find('.joe_dropdown__menu');
/* 弹出方式 */
@@ -36,7 +34,7 @@ window.Joe = function () {
}
});
/* Timelife */
/* Aside Timelife */
if ($('.joe_aside__item.timelife').length !== 0) {
let timelife = [
{ title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' },
@@ -95,7 +93,7 @@ window.Joe = function () {
$('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr);
}
/* Weather */
/* Aside Weather */
if ($('.joe_aside__item.weather').length !== 0) {
const key = $('.joe_aside__item.weather').attr('data-key');
const style = $('.joe_aside__item.weather').attr('data-style');
@@ -103,10 +101,10 @@ window.Joe = function () {
window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } };
}
/* Ranking */
/* Aside Ranking */
if ($('.joe_aside__item.ranking').length !== 0) {
$.ajax({
url: BASE_API,
url: Joe.prototype.BASE_API,
type: 'POST',
data: { routeType: 'ranking' },
success(res) {
@@ -132,7 +130,7 @@ window.Joe = function () {
/* Index Swiper */
if ($('.joe_index__banner .swiper-container').length > 0) {
let direction = 'horizontal';
if (!IsMobile && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical';
if (!Joe.prototype.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical';
new Swiper('.swiper-container', { direction, loop: true, autoplay: true, mousewheel: true, pagination: { el: '.swiper-pagination' } });
}
@@ -152,7 +150,7 @@ window.Joe = function () {
$('.joe_load').html('加载中');
$('.joe_index__list .joe_list__loading').show();
$.ajax({
url: BASE_API,
url: Joe.prototype.BASE_API,
type: 'POST',
data: { routeType: 'list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type },
success(res) {
@@ -235,15 +233,13 @@ window.Joe = function () {
}
}
/* baiduRecord */
if ($('#Joe_Baidu_Record').length > 0) {
/* Post & Page */
if ($('.joe_detail').length > 0) {
/* Baidu Record */
$.ajax({
url: BASE_API,
url: Joe.prototype.BASE_API,
type: 'POST',
data: {
routeType: 'record',
site: window.location.href
},
data: { routeType: 'record', site: window.location.href },
success(res) {
if (res.data && res.data === '已收录') {
$('#Joe_Baidu_Record').css('color', '#67C23A');
@@ -254,10 +250,94 @@ window.Joe = function () {
}
}
});
/* 初始化代码高亮 */
Prism.highlightAll();
/* 初始化图片预览 */
$('.joe_detail__article img:not(img.owo_image)').each(function () {
$(this).wrap($(`<div data-fancybox="Joe" href="${$(this).attr('src')}"></div>`));
});
/* 初始化超链接为新窗口打开 */
$('.joe_detail__article a').each(function () {
$(this).attr('target', '_blank');
});
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid');
/* 浏览量功能 */
{
let viewsArr = localStorage.getItem(Joe.prototype.encryption('views')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('views')))) : [];
const flag = viewsArr.includes(cid);
if (!flag) {
$.ajax({
url: Joe.prototype.BASE_API,
type: 'POST',
data: { routeType: 'views', cid },
success(res) {
if (res.code !== 1) return;
$('#Joe_Article_Views').html(`${res.data.views} 阅读`);
viewsArr.push(cid);
const name = Joe.prototype.encryption('views');
const val = Joe.prototype.encryption(JSON.stringify(viewsArr));
localStorage.setItem(name, val);
}
});
}
}
/* 点赞功能 */
{
/* 页面首次进入，设置当前文章点赞状态 */
let agreeArr = localStorage.getItem(Joe.prototype.encryption('agree')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('agree')))) : [];
if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active');
else $('.joe_detail__agree .icon-2').addClass('active');
/* 点击按钮，切换当前页面的点赞和取消点赞 */
let _loading = false; // 设置节流
$('.joe_detail__agree .icon').on('click', function () {
if (_loading) return;
_loading = true; // 开启节流
agreeArr = localStorage.getItem(Joe.prototype.encryption('agree')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('agree')))) : [];
let flag = agreeArr.includes(cid);
$.ajax({
url: Joe.prototype.BASE_API,
type: 'POST',
data: { routeType: 'agree', cid, type: flag ? 'disagree' : 'agree' },
success(res) {
if (res.code !== 1) return;
$('.joe_detail__agree .text').html(res.data.agree);
if (flag) {
const index = agreeArr.findIndex(_ => _ === cid);
agreeArr.splice(index, 1);
/* 操作网页取消点赞样式 */
$('.joe_detail__agree .icon-1').removeClass('active');
$('.joe_detail__agree .icon-2').addClass('active');
$('.joe_detail__agree .icon').removeClass('active');
} else {
agreeArr.push(cid);
/* 操作网页点赞样式 */
$('.joe_detail__agree .icon-2').removeClass('active');
$('.joe_detail__agree .icon-1').addClass('active');
$('.joe_detail__agree .icon').addClass('active');
}
const name = Joe.prototype.encryption('agree');
const val = Joe.prototype.encryption(JSON.stringify(agreeArr));
localStorage.setItem(name, val);
},
complete() {
_loading = false; // 关闭节流
}
});
});
}
}
new LazyLoad('.lazyload');
};
/* 此处不可换成监听dom加载完成，否则会出现偶尔元素偏移量获取不到的问题 */
window.onload = () => Joe();
/* 加密 */
Joe.prototype.encryption = str => window.btoa(unescape(encodeURIComponent(str)));
/* 解密 */
Joe.prototype.decrypt = str => decodeURIComponent(escape(window.atob(str)));
/* 请求URL */
Joe.prototype.BASE_API = '/index.php/joe/api';
/* 是否是手机 */
Joe.prototype.IS_MOBILE = /windows phone|iphone|android/gi.test(window.navigator.userAgent);
$(document).ready(() => Joe());