1 Commits

Author SHA1 Message Date
anian 6810791637 适配日记簿 2026-03-10 17:21:05 +08:00
46 changed files with 28829 additions and 25659 deletions
Executable
+12
View File
@@ -0,0 +1,12 @@
# halo-theme-pix
> 基于原作者v1.2.5代码修改
#### v1.2.5-1
1. 修改全局样式以适配日记簿
2. 片刻、图库支持视频并接入灯箱
3. 更新remixicon
4. 片刻增加标签展示
5. 适配多线路
6. ···
+1 -1
View File
@@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" <html xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title= ${'博客' + ' - ' + site.title})}"> th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title= ${'文章' + ' - ' + site.title})}">
<th:block th:fragment="content"> <th:block th:fragment="content">
+36
View File
@@ -0,0 +1,36 @@
/* 瞬间标签与评论间距 */
.moment_tag_gap {
margin-right: 10px;
}
/* 灯箱视频格式 */
.fancybox-slide--video .fancybox-content {
width: auto !important;
height: auto !important;
background: transparent;
}
.fancybox-slide--video video.fancybox-video {
width: auto !important;
height: auto !important;
max-height: 75dvh !important;
max-width: 75dvw !important;
object-fit: contain;
}
/* 片刻视频容器鼠标样式 */
.fancybox.mo_img {
cursor: zoom-in;
}
/* 图库视频图标hover放大 */
.video-fancybox .play-icon {
transition: all 0.4s ease !important;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.video-fancybox:hover .play-icon {
transform: scale(1.3) !important;
opacity: 1;
}
File diff suppressed because it is too large Load Diff
+106 -89
View File
@@ -1,86 +1,70 @@
/** /**
* 1440px * 统一桌面端展示 (宽度 >= 1366px)
* 合并了原 1440px 1920px 的通用样式并应用了你指定的 mod_third 布局
*/ */
@media only screen and (max-width:1440px) { @media only screen and (min-width: 1366px) {
.footer_top , .footer_text { /* --- 你提供的统一布局样式 --- */
font-size: 12px; body.mod_third .main_wrap,
} body.mod_third .go_top_box {
max-width: 1400px;
}
.land_content { /* 导航和侧边栏宽度分配 */
max-width: 960px; body.mod_third .left_nav {
height: 550px; width: 21%;
} }
body.mod_third .main_sidebar {
width: 21%;
}
body.mod_third .page_main {
width: 58%; /* 主内容区 */
}
.land_right { /* 底部导航栏和背景音乐盒定位 */
padding: 60px; body.mod_third .footer_nav {
padding-top: 150px; max-width: 1108px;
} }
body.mod_third .bgm_box {
margin-left: -75px;
}
.land_logo { /* --- 桌面端通用的基础样式合并 (源自原1440/1920) --- */
margin-bottom: 40px; .footer_top, .footer_text {
} font-size: 12px;
}
.land_right { .land_content {
padding-top: 40px; max-width: 1080px;
} height: 607px;
}
.land_right .title { .land_right {
font-size: 28px; padding: 40px;
} padding-top: 60px;
}
.land_right .land_des { .land_logo {
font-size: 15px; margin-bottom: 30px;
} }
.land_right .footer { .land_right .title {
padding: 0 60px; font-size: 32px;
} }
.land_right .land_des {
font-size: 14px;
}
.land_right .footer {
padding: 0 40px;
}
} }
@media only screen and (max-width:1920px) { /**
.main_wrap , .footer_nav , .go_top_box { * 笔记本/小屏显示器 (<= 1366px)
max-width: 860px; * 保持原样
} */
@media only screen and (max-width: 1366px) {
.land_content {
max-width: 1080px;
height: 607px;
}
.land_right {
padding: 40px;
padding-top: 60px;
}
.land_logo {
margin-bottom: 30px;
}
.land_right .title {
font-size: 32px;
}
.land_right .land_des {
font-size: 14px;
}
.land_right .footer {
padding: 0 40px;
}
body.mod_third .main_wrap , body.mod_third .go_top_box {
max-width: 1180px;
}
body.mod_third .footer_nav {
max-width: 885px;
}
}
@media only screen and (max-width:1366px) {
.land_content { .land_content {
max-width: 860px; max-width: 860px;
height: 500px; height: 500px;
@@ -136,7 +120,11 @@
} }
} }
@media only screen and (max-width:1200px) { /**
* 平板端及以下 (<= 1200px)
* 保持原样
*/
@media only screen and (max-width: 1200px) {
.land_page { .land_page {
align-items: flex-start; align-items: flex-start;
} }
@@ -216,9 +204,12 @@
.land_right .beian , .land_right .copyright { .land_right .beian , .land_right .copyright {
color: #293563; color: #293563;
} }
} }
/**
* 小屏平板 (<= 960px)
* 保持原样
*/
@media only screen and (max-width:960px) { @media only screen and (max-width:960px) {
.main_wrap , .top_bar , .footer_nav { .main_wrap , .top_bar , .footer_nav {
max-width: 720px; max-width: 720px;
@@ -269,11 +260,13 @@
.top_menu_box { .top_menu_box {
border-radius: 8px; border-radius: 8px;
} }
} }
/**
* 手机端 (<= 540px)
* 保持原样
*/
@media only screen and (max-width:540px) { @media only screen and (max-width:540px) {
body.mod_third_s #top_third,body.mod_third #top_third{ body.mod_third_s #top_third,body.mod_third #top_third{
display: flex; display: flex;
} }
@@ -367,11 +360,6 @@
width: calc(83px*3); width: calc(83px*3);
} }
/*.img_list a {*/
/* width: 30%;*/
/* margin: 2px;*/
/*}*/
.t_media_item , a.up_img_btn{ .t_media_item , a.up_img_btn{
width: 80px; width: 80px;
height: 80px; height: 80px;
@@ -443,7 +431,7 @@
.index_banner { .index_banner {
margin-top: -64px; margin-top: -64px;
height: 260px; height: 240px;
} }
.top_bar.uk-sticky-fixed.uk-active , .dark .top_bar.uk-sticky-fixed.uk-active { .top_bar.uk-sticky-fixed.uk-active , .dark .top_bar.uk-sticky-fixed.uk-active {
@@ -455,7 +443,9 @@
.top_bar.uk-sticky-fixed.uk-active.mobile_active { .top_bar.uk-sticky-fixed.uk-active.mobile_active {
backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem);
background: rgb(255 255 255 / 80%); background: rgb(235 242 237 / 80%);
border-radius: 0 0 20px 20px;
height: 50px;
} }
.dark .top_bar.uk-sticky-fixed.uk-active.mobile_active { .dark .top_bar.uk-sticky-fixed.uk-active.mobile_active {
@@ -642,7 +632,7 @@
.bgm_box { .bgm_box {
padding: 6px 10px; padding: 6px 10px;
border-bottom: 1px solid #f4f4f4; background: rgba(235, 242, 237, 0);
} }
.footer_nav_box .footer_player { .footer_nav_box .footer_player {
@@ -686,15 +676,11 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/*.img_list a:nth-child(1):nth-last-child(4), .img_list a:nth-child(3):nth-last-child(2), .img_list a:nth-child(4):nth-last-child(1) {*/
/* width: 30%;*/
/*}*/
.admin_ava a.mobile_edit { .admin_ava a.mobile_edit {
display: none; display: none;
} }
@@ -708,5 +694,36 @@
width:100%; width:100%;
} }
/* 手机端文章目录调整 */
h3.listree-titles {
font-size: 0.8rem;
padding: 9px 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#listree-ol li a {
font-size: 0.8rem;
}
#listree-ol {
margin: 10px 0 15px -10px;
padding-right: 15px;
}
#listree-ol li {
line-height: 1.2;
margin-top: 6px;
list-style: none;
}
/* 手机端底部音乐按钮颜色 */
.footer_menu a.playing-music,
.footer_menu a.playing-music i,
.footer_menu a.playing-music .title {
color: #4CAF50;
}
} }
+3 -3
View File
@@ -1,10 +1,10 @@
:root { :root {
--font-family: eafont,HarmonyOS_M,PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif; --font-family: HarmonyOS_M, sans-serif;
--halo-comment-widget-base-font-family: var(--font-family); --halo-comment-widget-base-font-family: var(--font-family);
/* 搜索 */ /* 搜索 */
--halo-search-widget-base-font-size: 1.04rem; --halo-search-widget-base-font-size: 1.04rem;
--halo-search-widget-base-font-family: var(--font-family); --halo-search-widget-base-font-family: var(--font-family);
--halo-search-widget-primary-color: #3451b2; --halo-search-widget-primary-color: #4CCBA0;
} }
html { html {
Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 229 KiB

+64
View File
@@ -0,0 +1,64 @@
// 接管手机端底部音乐按钮
function modify_m_bottom_music_button_link() {
const music = document.querySelector('a[href*="#m_bottom_music_button"]');
if (!music) return;
music.addEventListener('click', function(event) {
event.preventDefault();
mu_box_show();
});
}
// 视频默认正方形,播放恢复比例
function modify_moment_video_size() {
const videos = document.querySelectorAll('.pix_video');
videos.forEach(video => {
if (!video.hasAttribute('data-video-events-bound')) {
video.addEventListener('play', () => {
video.classList.add('is-playing');
});
video.addEventListener('ended', () => {
video.classList.remove('is-playing');
});
video.setAttribute('data-video-events-bound', 'true');
}
});
}
// = = = = = = = = = = = = = = = = 触发器 = = = = = = = = = = = = = = = =
// 集合:PJAX(初始化执行+PJAX执行)
function init_anian_pjax() {
modify_moment_video_size();
}
// 集合:初始化(仅初始化执行一次)
function init_anian_inport() {
init_anian_pjax();
modify_m_bottom_music_button_link();
}
// PJAX监听
document.addEventListener('pjax:complete', function () {
init_anian_pjax();
})
// 入口
init_anian_inport();
+1453 -253
View File
File diff suppressed because it is too large Load Diff
+40 -11
View File
@@ -363,6 +363,12 @@ $('body').on('click', '.sticky_btn', function() {
//编辑片刻 //编辑片刻
$('body').on('click', '.control_edit_post', function() { $('body').on('click', '.control_edit_post', function() {
$(".loca_text").empty().attr("state",'0');
$(".loca_text").attr("uk-tooltip", "title:获取位置; pos: top; offset:2;");
$('.moment_image_type a').click();
$('#topic_content').val('');
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible','PUBLIC');
$(".simi a").children().css({"background":"#e3efe7","color":"#66c187"});
$('.t_media_item').remove(); $('.t_media_item').remove();
$('#moment_audio_api').remove(); $('#moment_audio_api').remove();
var pid = $(this).parent().attr('pid'); var pid = $(this).parent().attr('pid');
@@ -454,26 +460,49 @@ $('body').on('click', '.normal_edit,.center .mobile_edit', function() {
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible','PUBLIC'); $(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible','PUBLIC');
$(".simi a").children().css({"background":"#e3efe7","color":"#66c187"}); $(".simi a").children().css({"background":"#e3efe7","color":"#66c187"});
$('#topic_content').val(''); $('#topic_content').val('');
const mylocalValue = getCookie('mylocal'); $(".loca_text").empty().attr("state",'0');
$(".loca_text").html(mylocalValue).attr("state",'1'); $('#set_local, [name="set_local"]').val('');
$('.t_media_item').remove(); $('.t_media_item').remove();
$('.t_cat_toogle span').text('叽里咕噜');
}); });
//编辑片刻类型------------------------------------------------------------------------------ //编辑片刻类型(已兼容图片+视频)------------------------------------------------------------------------------
function edit_image(data){ function edit_image(data){
var m_data = data.spec.content.medium; var m_data = data.spec.content.medium;
$('.t_media_item').remove(); $('.t_media_item').remove();
$('.moment_image_type a').click(); $('.moment_image_type a').click();
if(m_data.length > 0){
var new_data = m_data.reverse(); if(m_data && m_data.length > 0){
// reverse() 是为了配合 prepend,确保显示顺序与发布时一致
var new_data = [...m_data].reverse();
$.each(new_data, function(index, value) { $.each(new_data, function(index, value) {
var thum = value.url;
var src = value.url; var src = value.url;
var type = value.originType; var type = value.originType || ""; // 获取 MIME 类型
var media = `<div class="t_media_item" data-type="${type}" data-src="${src}" data-thum="${thum}">`; var mediaInnerHtml = '';
media += '<a class="topic-img-de"><i class="ri-subtract-line"></i></a>';
media += '<img src="'+thum+'">';//图片预览 // --- 核心逻辑:判定是否为视频 ---
media += '</div>'; // 1. 检查 MIME 类型是否以 video/ 开头
// 2. 检查文件名后缀是否为常见的视频格式(防止 originType 丢失的情况)
var isVideo = type.startsWith('video/') ||
src.toLowerCase().endsWith('.mp4') ||
src.toLowerCase().endsWith('.webm') ||
src.toLowerCase().endsWith('.mov');
if (isVideo) {
// 如果是视频,使用 video 标签预览
mediaInnerHtml = `<video src="${src}" class="pix_video" preload="metadata" muted></video>`;
} else {
// 如果是图片,保持原有的 img 标签
mediaInnerHtml = `<img src="${src}">`;
}
// 构建外层容器
var media = `<div class="t_media_item" data-type="${type}" data-src="${src}">
<a class="topic-img-de"><i class="ri-subtract-line"></i></a>
${mediaInnerHtml}
</div>`;
$(".img_show").prepend(media); $(".img_show").prepend(media);
}); });
} }
+2 -2
View File
@@ -129,7 +129,7 @@ var pix = {
} else { } else {
msg_modal_inner.html(` msg_modal_inner.html(`
<p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata" <p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata"
src="/themes/theme-pix/assets/img/nodata.png"></p> src="/upload/nodata.png"></p>
<p class="msg_limit">只显示最新10条未读和已读信息</p> <p class="msg_limit">只显示最新10条未读和已读信息</p>
`) `)
} }
@@ -137,7 +137,7 @@ var pix = {
error: function () { error: function () {
msg_modal_inner.html(` msg_modal_inner.html(`
<p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata" <p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata"
src="/themes/theme-pix/assets/img/nodata.png"></p> src="/upload/nodata.png"></p>
<p class="msg_limit">只显示最新10条未读和已读信息</p> <p class="msg_limit">只显示最新10条未读和已读信息</p>
`) `)
+181 -151
View File
@@ -2,10 +2,38 @@
* pix主题音乐播放器 * pix主题音乐播放器
*/ */
function updateMusicBtnColor(state) {
if (state === 'play') {
// 播放
$('.bg_music').css("background", "rgb(172, 202, 181)");
$('.bg_music i').css("color", "white");
} else if (state === 'pause') {
// 暂停
$('.bg_music').css("background", "#EBF2ED");
$('.bg_music i').css("color", "rgb(174, 174, 174)");
} else {
// 默认
$('.bg_music').css("background", "#EBF2ED");
$('.bg_music i').css("color", "rgb(174, 174, 174)");
// ✅ 初始化:隐藏歌词容器(真正关闭歌词功能)
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
lyricsContainer.css('display', 'none');
}
// ✅ 按钮样式置为关闭状态视觉
$('a.bg_lrc i').css("color", "#aeaeae");
$('a.bg_lrc').css("background", "#EBF2ED");
$('.t_dark.top_tool.icon_color').hide();
}
}
var rem=[]; var rem=[];
rem.audio = $('<audio id="pix_player"></audio>'); rem.audio = $('<audio id="pix_player"></audio>');
var audiobox = $('<audio id="pix_player"></audio>'); var audiobox = $('<audio id="pix_player">');
var au = $('#pix_player'); var au = $('#pix_player');
var volume = 1; var volume = 1;
var loop = Theme.play.m_loop; var loop = Theme.play.m_loop;
@@ -26,7 +54,6 @@ $(document).on('click','.play_btn',function(){
var url = $(this).attr('data'); var url = $(this).attr('data');
var lrc = $(this).attr('lrc'); var lrc = $(this).attr('lrc');
var audio_s = $('#pix_player').attr('src'); var audio_s = $('#pix_player').attr('src');
//var play = new Audio(url);
var meta = $(this).siblings('.player_meta').find('.title'); var meta = $(this).siblings('.player_meta').find('.title');
playLrc = lrc; playLrc = lrc;
@@ -48,11 +75,8 @@ $(document).on('click','.play_btn',function(){
// 初始化函数 // 初始化函数
function initAudio(){ function initAudio(){
// 给音乐标签绑定事件之后所触发的函数
audiobox[0].addEventListener("play",audioplay); audiobox[0].addEventListener("play",audioplay);
audiobox[0].addEventListener("pause",audiopause); audiobox[0].addEventListener("pause",audiopause);
// timeupdate,代表音乐播放过程中只要发生变化就触发updateProcess
audiobox[0].addEventListener("timeupdate",updateProcess); audiobox[0].addEventListener("timeupdate",updateProcess);
if(Theme.bgm_open == true){ if(Theme.bgm_open == true){
audiobox[0].addEventListener("ended",endplay); audiobox[0].addEventListener("ended",endplay);
@@ -76,9 +100,7 @@ function endplay(){
// 当音乐标签加载完成之后所触发的函数 // 当音乐标签加载完成之后所触发的函数
audiobox[0].oncanplay=function(){ audiobox[0].oncanplay=function(){
// 音乐的总时间
var duration=handleTime(this.duration); var duration=handleTime(this.duration);
// 音乐播放的当前时间
var currenttime=handleTime(this.currentTime); var currenttime=handleTime(this.currentTime);
$(".timer .total_time").text(duration); $(".timer .total_time").text(duration);
$(".timer .current_time").text(currenttime); $(".timer .current_time").text(currenttime);
@@ -87,8 +109,7 @@ audiobox[0].oncanplay=function(){
// 音乐播放暂停的函数 // 音乐播放暂停的函数
function pasued(){ function pasued(){
// paused,保存音乐播放和暂停的状态 if(Paused === false){
if(Paused === false){//音乐是一个播放状态
audiobox[0].pause(); audiobox[0].pause();
}else{ }else{
audiobox[0].play(); audiobox[0].play();
@@ -97,30 +118,42 @@ function pasued(){
// 音乐播放之后触发的函数 // 音乐播放之后触发的函数
function audioplay(){ function audioplay(){
//var height = $('.footer_menu').height(); // 播放时
var mheight = $('.footer_nav_box').height(); updateMusicBtnColor('play');
var mheight = $('.footer_nav_box').height();
$('.footer_nav_box').animate({top:-mheight},200,'linear'); $('.footer_nav_box').animate({top:-mheight},200,'linear');
//music_bar.lock(false);//取消进度条的锁定 Paused=false;
Paused=false;//更新音乐的播放状态(暂停) $(".pix_player.playing .play_btn").html("<i class='ri-pause-line'></i>");
$(".pix_player.playing .play_btn").html("<i class='ri-pause-line'></i>");//暂停按钮
$('.m_play').html('<i class="ri-pause-circle-fill"></i>'); $('.m_play').html('<i class="ri-pause-circle-fill"></i>');
// 播放时显示歌词
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
lyricsContainer.css('display', 'block');
$('a.bg_lrc i').css("color", "");
$('a.bg_lrc').css("background", "");
}
} }
// 音乐暂停之后触发的函数 // 音乐暂停之后触发的函数
function audiopause(){ function audiopause(){
//music_bar.lock(true);//添加进度条的锁定 // 暂停时
Paused=true; //播放的状态 updateMusicBtnColor('pause');
Paused=true;
$(".pix_player.playing .play_btn").html("<i class='ri-play-line'></i>"); $(".pix_player.playing .play_btn").html("<i class='ri-play-line'></i>");
$('.m_play').html('<i class="ri-play-circle-fill"></i>'); $('.m_play').html('<i class="ri-play-circle-fill"></i>');
// 暂停时隐藏歌词
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
lyricsContainer.css('display', 'none');
$('a.bg_lrc i').css("color", "#aeaeae");
$('a.bg_lrc').css("background", "#EBF2ED");
}
} }
// 更新进度条 // 更新进度条
function updateProcess(){ function updateProcess(){
// 如果音乐不是暂停状态,则继续执行函数的代码块
if(Paused!==false) return true; if(Paused!==false) return true;
// 音乐的总时间
var duration = handleTime(this.duration); var duration = handleTime(this.duration);
// 音乐播放的当前时间
var currenttime = handleTime(this.currentTime); var currenttime = handleTime(this.currentTime);
var percent = audiobox[0].currentTime/audiobox[0].duration; var percent = audiobox[0].currentTime/audiobox[0].duration;
$(".player_mod .player_bar .progress").css('width',(percent)*100+"%"); $(".player_mod .player_bar .progress").css('width',(percent)*100+"%");
@@ -130,12 +163,12 @@ function updateProcess(){
//循环歌曲 m_loop //循环歌曲 m_loop
$(document).on('click','.m_loop',function(){ $(document).on('click','.m_loop',function(){
if($(this).hasClass('all')){ // 如果当前是循环 if($(this).hasClass('all')){
$(this).removeClass('all'); $(this).removeClass('all');
$(this).addClass('one'); $(this).addClass('one');
$(this).html('<i class="ri-repeat-one-line"></i>'); $(this).html('<i class="ri-repeat-one-line"></i>');
loop = 'one'; loop = 'one';
}else if(($(this).hasClass('one'))){ // 如果当前是单曲循环 }else if(($(this).hasClass('one'))){
$(this).removeClass('one'); $(this).removeClass('one');
$(this).addClass('none'); $(this).addClass('none');
$(this).html('<i class="ri-shuffle-line"></i>'); $(this).html('<i class="ri-shuffle-line"></i>');
@@ -150,16 +183,11 @@ $(document).on('click','.m_loop',function(){
// 时间处理的函数 // 时间处理的函数
function handleTime(seconedTime){ function handleTime(seconedTime){
// 定义一个变量保存分钟
var minute=parseInt(seconedTime/60,10); var minute=parseInt(seconedTime/60,10);
if(minute<10){minute="0"+minute}; if(minute<10){minute="0"+minute};
//console.log(minute);
// 定义变量存放秒数
var second=(seconedTime-minute*60).toFixed(2).split(".")[0]; var second=(seconedTime-minute*60).toFixed(2).split(".")[0];
//console.log(second);
if(second<10){second="0"+second}; if(second<10){second="0"+second};
var Time=minute+":"+second; var Time=minute+":"+second;
// 返回最终的时间数值
return Time; return Time;
} }
@@ -167,22 +195,17 @@ function handleTime(seconedTime){
var video = $('#pix_video_player'); var video = $('#pix_video_player');
$(document).on('click','.video_play_btn',function(){ $(document).on('click','.video_play_btn',function(){
var video = $(this).siblings('#pix_video_player'); var video = $(this).siblings('#pix_video_player');
video.attr('controls','controls'); //显示控制条 video.attr('controls','controls');
$(this).remove(); //去除覆盖层 $(this).remove();
video[0].play(); video[0].play();
}); });
function stopOtherMedia(element) { function stopOtherMedia(element) {
$("video").not(element).each(function(index, video) { $("video").not(element).each(function(index, video) {
video.pause(); video.pause();
}); });
} }
//背景音乐 //背景音乐
function autoload_music() { function autoload_music() {
var state = Theme.bgm_open; var state = Theme.bgm_open;
@@ -206,9 +229,7 @@ function autoload_music() {
} }
var f = res[new_mid]; var f = res[new_mid];
var playnum = 1; var playnum = 1;
//$(".m_play").html('<i class="ri-pause-circle-line"></i>');
//默认播放第一首
audiobox.attr('src',f.url); audiobox.attr('src',f.url);
playLrc = f.lrc; playLrc = f.lrc;
$('.player_mod .m_cover img').attr('src',f.pic); $('.player_mod .m_cover img').attr('src',f.pic);
@@ -216,28 +237,21 @@ function autoload_music() {
$('.player_mod .m_info small').text(f.author || f.artist); $('.player_mod .m_info small').text(f.author || f.artist);
$('.player_box').append(audiobox); $('.player_box').append(audiobox);
//存储一个播放列表
playlist.push(res); playlist.push(res);
//插入播放列表
$.each(res, function(key, data) { $.each(res, function(key, data) {
$(".musci_list_box").append('<li class="item" id='+ key +'>' + playnum++ + '. ' + (data.title || data.name) + ' - ' + (data.author || data.artist) + '</li>'); $(".musci_list_box").append('<li class="item" id='+ key +'>' + playnum++ + '. ' + (data.title || data.name) + ' - ' + (data.author || data.artist) + '</li>');
}); });
$(".musci_list_box li").removeClass('active').eq(new_mid).addClass('active'); $(".musci_list_box li").removeClass('active').eq(new_mid).addClass('active');
//console.log(playlist);
} else { } else {
$(".musci_list_box").append('<div class="nodata">背景音乐未设置</div>'); $(".musci_list_box").append('<div class="nodata">背景音乐未设置</div>');
} }
} }
}); });
} }
} }
//播放选中音乐 //播放选中音乐
function mulist_play(index){ function mulist_play(index){
audiobox[0].removeEventListener("play",audioplay); audiobox[0].removeEventListener("play",audioplay);
@@ -255,17 +269,25 @@ function mulist_play(index){
audiobox[0].play(); audiobox[0].play();
Paused = false; Paused = false;
updateMusicBtnColor('play');
// 新增:切换歌曲后强制显示歌词
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
lyricsContainer.css('display', 'block');
$('a.bg_lrc i').css("color", "");
$('a.bg_lrc').css("background", "");
}
} }
//点击展开播放列表 //点击展开播放列表
$(document).on('click', '.ri-bar-chart-horizontal-line', function () { $(document).on('click', '.ri-bar-chart-horizontal-line', function () {
var position = $('.musci_list_box li.active').index() var position = $('.musci_list_box li.active').index()
// 延迟一段时间后进行滚动
setTimeout(function () { setTimeout(function () {
if($('.m_list').attr('aria-expanded')){ if($('.m_list').attr('aria-expanded')){
scrollToPosition(position) scrollToPosition(position)
} }
}, 200); // 延迟100毫秒后执行滚动操作 }, 200);
}); });
//点击列表播放 //点击列表播放
@@ -302,11 +324,9 @@ $(document).on('click','.m_next',function(){
mulist_play(new_mid); mulist_play(new_mid);
}); });
//播放和暂停 //播放和暂停
function m_play() { function m_play() {
if(Paused === false){
if(Paused === false){//音乐是一个播放状态
audiobox[0].pause(); audiobox[0].pause();
$('.m_play').html('<i class="ri-play-circle-fill"></i>'); $('.m_play').html('<i class="ri-play-circle-fill"></i>');
Paused = true; Paused = true;
@@ -315,7 +335,6 @@ function m_play() {
$('.m_play').html('<i class="ri-pause-circle-fill"></i>'); $('.m_play').html('<i class="ri-pause-circle-fill"></i>');
Paused = false; Paused = false;
} }
} }
//播放按钮 //播放按钮
@@ -326,17 +345,8 @@ $(document).on('click','.m_play',function(){
} else { } else {
m_play(); m_play();
} }
}); });
/*
document.addEventListener('click', musicPlay);
function musicPlay() {
audiobox[0].play();
document.removeEventListener('click', musicPlay);
}
*/
//触发显示播放器 //触发显示播放器
var trigger; var trigger;
function mu_box_show(){ function mu_box_show(){
@@ -345,21 +355,28 @@ function mu_box_show(){
$('.footer_nav_box').animate({top:-mheight},200,'linear'); $('.footer_nav_box').animate({top:-mheight},200,'linear');
} }
function mu_box_hide(){ function mu_box_hide() {
$('.footer_nav_box').animate({top:"0px"},200,'linear'); trigger = setTimeout(function() {
// 获取屏幕宽度判断是否为手机端(与歌词容器响应式逻辑保持一致)
const isMobile = $(window).width() <= 767;
// 手机端隐藏时额外向下偏移50px(可根据需要调整数值),非手机端保持默认0px
const hideTop = isMobile ? "50px" : "0px";
// 执行隐藏动画
$('.footer_nav_box').animate({
top: hideTop
}, 200, 'linear');
}, 2000);
} }
$(document).on('mouseenter', '.player_hand , .footer_nav_box', function(event) { $(document).on('mouseenter', '.player_hand , .footer_nav_box', function(event) {
mu_box_show(); mu_box_show();
}); });
$(document).on('mouseleave', '.footer_nav_box .right_inner', function(event) { $(document).on('mouseleave', '.footer_nav_box .right_inner', function(event) {
trigger = setTimeout(function(){ trigger = setTimeout(function(){
mu_box_hide(); mu_box_hide();
},2000); },2000);
}); });
//音乐进度条跳转 //音乐进度条跳转
@@ -371,52 +388,32 @@ function getMousePosition(e){
} }
$(document).on('click','.player_bar',function(){ $(document).on('click','.player_bar',function(){
// 获取当前鼠标点击的位置
// console.log(getMousePosition().left)
// console.log($('.progress').offset())
var long = (getMousePosition().left) - ($('.progress').offset().left); var long = (getMousePosition().left) - ($('.progress').offset().left);
// console.log(long)
// 将当前点击的长度重新给p标签
$('.progress').width(long); $('.progress').width(long);
// 获得当前点击长度的时间
allTime = parseInt(audiobox[0].duration); allTime = parseInt(audiobox[0].duration);
var nowtime = (long/$('.player_bar').width()) * allTime; var nowtime = (long/$('.player_bar').width()) * allTime;
audiobox[0].currentTime = nowtime; audiobox[0].currentTime = nowtime;
}); });
//音量调节 m_volume //音量调节 m_volume
$(document).on('click','.m_volume',function(){ $(document).on('click','.m_volume',function(){
if($(this).hasClass('mute')){ // 如果当前是静音 if($(this).hasClass('mute')){
$(this).removeClass('mute'); $(this).removeClass('mute');
$(this).html('<i class="ri-volume-down-line"></i>'); $(this).html('<i class="ri-volume-down-line"></i>');
audiobox[0].muted = false; audiobox[0].muted = false;
}else{ // 如果当前不是静音 }else{
$(this).addClass('mute'); $(this).addClass('mute');
audiobox[0].muted = true; audiobox[0].muted = true;
$(this).html('<i class="ri-volume-mute-line"></i>'); $(this).html('<i class="ri-volume-mute-line"></i>');
} }
}); });
$(document).on('click','.vo_bar',function(){ $(document).on('click','.vo_bar',function(){
var long = (getMousePosition().top) - ($(this).offset().top) var long = (getMousePosition().top) - ($(this).offset().top)
var meter = long / $(this).height(); var meter = long / $(this).height();
var finalLong = 1 - meter; var finalLong = 1 - meter;
$('.vo_size').height(finalLong * $(this).height()); $('.vo_size').height(finalLong * $(this).height());
// 将audio音量调整为对应的音量
//var finalLong = volume;
audiobox[0].volume = finalLong; audiobox[0].volume = finalLong;
// 改变数字
//$('.vol b').html(parseInt(finalLong * 100) + '%')
// 点击后音量调整键隐藏
//$('.vol a').css('display','none')
}); });
//文章歌曲 //文章歌曲
@@ -440,54 +437,54 @@ function autoload_posts_music() {
$('.posts_mu_list').html('<div class="loading_box"><div uk-spinner></div></div>'); $('.posts_mu_list').html('<div class="loading_box"><div uk-spinner></div></div>');
}, },
success: function (res) { success: function (res) {
if(res.length > 0){ if(res.length > 0){
$('.posts_mu_list .loading_box').remove(); $('.posts_mu_list .loading_box').remove();
var playnum = 1; var playnum = 1;
if(!$('#pix_player').length > 0){ if(!$('#pix_player').length > 0){
$('.player_box').append(audiobox); $('.player_box').append(audiobox);
} }
//存储一个播放列表
post_playlist.push(res); post_playlist.push(res);
//插入播放列表
$.each(res, function(key, data) { $.each(res, function(key, data) {
$(".posts_mu_list").append('<li class="item" id='+ key +'><div class="mu_id">' + playnum++ + '</div><a class="s_play_btn"><i class="ri-play-circle-line"></i></a><div class="mus_info">'+ (data.title || data.name) +' <span>- ' + (data.author || data.artist) + '</span></div></li>'); $(".posts_mu_list").append('<li class="item" id='+ key +'><div class="mu_id">' + playnum++ + '</div><a class="s_play_btn"><i class="ri-play-circle-line"></i></a><div class="mus_info">'+ (data.title || data.name) +' <span>- ' + (data.author || data.artist) + '</span></div></li>');
}); });
//$(".musci_list_box li").removeClass('active').eq(0).addClass('active');
} }
} }
}); });
} }
} }
//文章歌曲播放 //文章歌曲播放
$(document).on('click','.s_play_btn',function(){ $(document).on('click','.s_play_btn',function(){
mu_box_show(); mu_box_show();
// 1. 同步更新文章内播放列表选中状态
$('.posts_mu_list li').removeClass('active'); $('.posts_mu_list li').removeClass('active');
$(this).parent().addClass('active');
// 2. 同步更新全局播放列表选中状态(避免后续操作信息混乱)
$('.musci_list_box li').removeClass('active');
// 移除旧事件监听,防止重复触发
audiobox[0].removeEventListener("play",audioplay); audiobox[0].removeEventListener("play",audioplay);
audiobox[0].removeEventListener("pause",audiopause); audiobox[0].removeEventListener("pause",audiopause);
$(".m_play").html('<i class="ri-pause-circle-fill"></i>'); $(".m_play").html('<i class="ri-pause-circle-fill"></i>');
$(this).parent().addClass('active');
var id = $(this).parents('li').attr('id'); var id = $(this).parents('li').attr('id');
var data = post_playlist[0][id]; var data = post_playlist[0][id];
playLrc = data.lrc; playLrc = data.lrc;
// 3. 修复歌手信息字段:优先用 data.author,其次用 data.artist
audiobox.attr('src',data.url); audiobox.attr('src',data.url);
m_cover.attr('src',data.pic); m_cover.attr('src',data.pic);
m_title.text(data.title || data.name); m_title.text(data.title || data.name); // 歌曲标题:优先 title,其次 name
m_artist.text(data.artist || data.artist); m_artist.text(data.author || data.artist); // 歌手信息:优先 author,其次 artist
audiobox[0].play(); audiobox[0].play();
Paused = false; Paused = false;
// 新增:文章歌曲切换后强制显示歌词
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
lyricsContainer.css('display', 'block');
$('a.bg_lrc i').css("color", "");
$('a.bg_lrc').css("background", "");
}
}); });
//播放器按钮 //播放器按钮
@@ -495,8 +492,6 @@ $(document).on('click','a.bg_music',function(){
mu_box_show(); mu_box_show();
}); });
$(function () { $(function () {
autoload_music(); autoload_music();
autoload_posts_music(); autoload_posts_music();
@@ -510,7 +505,6 @@ $(document).on('click','.audio_c_btn',function(){
$('.'+type+'_audio.type_audio_text').append(input); $('.'+type+'_audio.type_audio_text').append(input);
}); });
$('.bg_lrc').click(function () { $('.bg_lrc').click(function () {
if (lyricsContainer.css('display') === 'none') { if (lyricsContainer.css('display') === 'none') {
lyricsContainer.css('display', 'block'); lyricsContainer.css('display', 'block');
@@ -526,12 +520,11 @@ $('.bg_lrc').click(function () {
"color": "#aeaeae", "color": "#aeaeae",
}); });
$('a.bg_lrc').css({ $('a.bg_lrc').css({
"background": "rgb(196 208 230 / 38%)", "background": "#EBF2ED",
}); });
} }
}); });
//创建容器 //创建容器
if(Theme.play.lrc_open){ if(Theme.play.lrc_open){
var lyricsContainer = $('<div class="lyrics-container"></div>'); var lyricsContainer = $('<div class="lyrics-container"></div>');
@@ -539,7 +532,7 @@ if(Theme.play.lrc_open){
var css = $(window).width() > 767 ? var css = $(window).width() > 767 ?
{ {
//桌面歌词css(按照下面格式自行修改) //桌面歌词css(按照下面格式自行修改)
position: 'fixed', position: 'fixed',
bottom: '10px', bottom: '10px',
left: '2%', left: '2%',
width: '350px', width: '350px',
@@ -550,11 +543,11 @@ if(Theme.play.lrc_open){
} : } :
{ {
//移动端歌词css(按照下面格式自行修改) //移动端歌词css(按照下面格式自行修改)
position: 'fixed', position: 'fixed',
bottom: '88px', top: '6px',
left: '0', left: '0',
width: '100%', width: '100%',
height: '72px', height: '40px',
textAlign: 'center', textAlign: 'center',
overflow: 'hidden', overflow: 'hidden',
zIndex: '999', zIndex: '999',
@@ -586,11 +579,9 @@ function parseLyrics(lrcOriginal) {
var timeAndText = line.split("]"); var timeAndText = line.split("]");
var time = timeAndText[0].substr(1); var time = timeAndText[0].substr(1);
var text = timeAndText[1]; var text = timeAndText[1];
// 增加代码:如果歌词为空,跳过此次循环
if (!text.trim()) { if (!text.trim()) {
continue; continue;
} }
// 增加代码:把时间转换成秒
var timeInSeconds = 0; var timeInSeconds = 0;
var timeParts = time.split(":"); var timeParts = time.split(":");
timeInSeconds += parseInt(timeParts[0], 10) * 60 - 0.5; timeInSeconds += parseInt(timeParts[0], 10) * 60 - 0.5;
@@ -605,58 +596,97 @@ function parseLyrics(lrcOriginal) {
// 更新歌词 // 更新歌词
function updateLyrics(currentTime, lyrics) { function updateLyrics(currentTime, lyrics) {
for (var i = 0; i < lyrics.length; i++) { for (var i = 0; i < lyrics.length; i++) {
if (currentTime >= lyrics[i].time && (i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)) { if (currentTime >= lyrics[i].time && (i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)) {
// 创建4行歌词 // 定义各行列歌词内容
// 防止数组i越界 var prevLine = (i - 1 >= 0 && typeof lyrics[i - 1].text === "string") ? lyrics[i - 1].text : ""; // 上一行(i-1
var currentLine3 = ""; var currentLine = (typeof lyrics[i].text === "string") ? lyrics[i].text : ""; // 当前行(i
if (i - 1 >= 0 && typeof lyrics[i - 1].text === "string") { var nextLine = (i + 1 < lyrics.length && typeof lyrics[i + 1].text === "string") ? lyrics[i + 1].text : ""; // 下一行(i+1
currentLine3 = lyrics[i - 1].text; var nextNextLine = (i + 2 < lyrics.length && typeof lyrics[i + 2].text === "string") ? lyrics[i + 2].text : ""; // 下下一行(i+2
}
var currentLine = ""; // 判断设备类型(<=767px为移动端)
if (typeof lyrics[i].text === "string") { var isMobile = $(window).width() <= 767;
currentLine = lyrics[i].text;
} if (isMobile) {
var currentLine1 = ""; // 移动端:仅显示当前行+下一行
if (i + 1 < lyrics.length && typeof lyrics[i + 1].text === "string") { lyricsContainer.html(`
currentLine1 = lyrics[i + 1].text; <div class="current-line active" style="font-size: 14px; margin-bottom: 6px; line-height: 1.2;">${currentLine}</div>
} <div class="current-line" style="font-size: 12px; opacity: 0.7; line-height: 1.2;">${nextLine}</div>
var currentLine2 = ""; `);
if (i + 2 < lyrics.length && typeof lyrics[i + 2].text === "string") { // 移动端适配动画(2行滚动距离)
currentLine2 = lyrics[i + 2].text; $('.current-line').animate({
} top: '-=25px'
//歌词文本css(修改style内的内容即可) }, 1000, function () {
lyricsContainer.html(` $(this).css({
<div class="current-line" style="font-size: 10px;opacity: .4;">${currentLine3}</div> top: '25px'
<div class="current-line active" style="font-size: 14px;">${currentLine}</div> });
<div class="current-line" style="font-size: 12px;opacity: .4;">${currentLine1}</div> });
<div class="current-line" style="font-size: 10px;opacity: .1;">${currentLine2}</div> } else {
`); // 电脑端:保持原有4行显示
// 增加代码:添加从下往上线性滚动的动画 lyricsContainer.html(`
$('.current-line').animate({ <div class="current-line" style="font-size: 10px; opacity: .4;">${prevLine}</div>
top: '-=30px' <div class="current-line active" style="font-size: 14px;">${currentLine}</div>
}, 2000, function () { <div class="current-line" style="font-size: 12px; opacity: .4;">${nextLine}</div>
$(this).css({ <div class="current-line" style="font-size: 10px; opacity: .1;">${nextNextLine}</div>
top: '30px' `);
}); // 电脑端原动画
}); $('.current-line').animate({
} top: '-=30px'
} }, 2000, function () {
$(this).css({
top: '30px'
});
});
}
}
}
} }
// 监听音频播放进度更新事件,更新歌词 // 监听音频播放进度更新事件,更新歌词
Theme.play.lrc_open && audiobox[0].addEventListener("timeupdate", async function () { Theme.play.lrc_open && audiobox[0].addEventListener("timeupdate", async function () {
var lyrics = await fetchLyrics(playLrc) // 新增:只有歌词容器显示时才更新歌词(优化性能)
updateLyrics(this.currentTime, lyrics); if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined' && lyricsContainer.css('display') !== 'none'){
var lyrics = await fetchLyrics(playLrc)
updateLyrics(this.currentTime, lyrics);
}
}); });
// 根据选择的位置定位滚动条 // 根据选择的位置定位滚动条
function scrollToPosition(position) { function scrollToPosition(position) {
let container = document.getElementById("musci_list"); let container = document.getElementById("musci_list");
let items = container.getElementsByClassName("item"); let items = container.getElementsByClassName("item");
if (position >= 0 && position < items.length) { if (position >= 0 && position < items.length) {
items[position].scrollIntoView(); items[position].scrollIntoView();
} }
} }
// 更新底部音乐图标颜色(根据是否播放)
function updateFooterMusicIcon(isPlaying) {
// 查找底部菜单中包含音乐图标的链接
var $entry = $('.footer_menu a').filter(function() {
return $(this).find('.ri-netease-cloud-music-line').length > 0;
}).first();
if ($entry.length) {
if (isPlaying) {
$entry.addClass('playing-music');
} else {
$entry.removeClass('playing-music');
}
}
}
// 绑定 audio 播放/暂停事件
audiobox[0].addEventListener("play", function () {
updateFooterMusicIcon(true);
});
audiobox[0].addEventListener("pause", function () {
updateFooterMusicIcon(false);
});
// 初始和 PJAX 完成后同步状态
function syncFooterWithAudioState() {
var isPlaying = !!(audiobox && audiobox[0] && !audiobox[0].paused && !audiobox[0].ended);
updateFooterMusicIcon(isPlaying);
}
+444 -342
View File
@@ -7,155 +7,175 @@ const poster = (function() {
const WIDTH = 700 const WIDTH = 700
const HEIGHT = 1160 const HEIGHT = 1160
function init(config) { /**
const $container = document.querySelector(config.selector) * 将图片URL加载为Image对象并返回Promise
$container.style.border = '1px solid #f0f0f0' * @param {string} url - 图片URL
const $wrapper = createDom('div', 'id', 'wrapper') * @returns {Promise<Image>} - 加载完成的Image对象
const $canvas = createDom('canvas', 'id', 'canvas', 'block') */
const $day = createDom('canvas', 'id', 'day') function loadImage(url) {
const $date = createDom('canvas', 'id', 'date') return new Promise((resolve, reject) => {
const $title = createDom('canvas', 'id', 'title') const img = new Image();
const $content = createDom('canvas', 'id', 'content') img.crossOrigin = "Anonymous";
const $logo = createDom('canvas', 'id', 'logo') img.onload = () => resolve(img);
const $description = createDom('canvas', 'id', 'description') img.onerror = () => reject(new Error('Failed to load image: ' + url));
img.src = url;
appendChilds($wrapper, $canvas, $day, $date, $title, $content, $logo, $description) });
$container.appendChild($wrapper)
const date = new Date()
// day
const dayStyle = {
font: 'bold 80px Helvetica',
color: 'rgba(255, 255, 255, 1)',
position: 'right'
}
drawOneline($day, dayStyle, date.getDate());
// date
const dateStyle = {
font: '23px Helvetica',
color: 'rgba(255, 255, 255, 1)',
position: 'right'
}
drawOneline($date, dateStyle, date.getFullYear() + '/' + (date.getMonth() + 1))
// title canvas
const titleStyle = {
font: '30px Helvetica',
lineHeight: 1.5,
color: 'rgba(255, 255, 255, 1)',
length: 2,
position: 'left'
}
titleStyle.font = (config.titleStyle && config.titleStyle.font) || titleStyle.font
titleStyle.color = (config.titleStyle && config.titleStyle.color) || titleStyle.color
titleStyle.position = (config.titleStyle && config.titleStyle.position) || titleStyle.position
drawMoreLines($title, titleStyle, config.title)
// content canvas
const contentStyle = {
font: '22px Helvetica',
lineHeight: 1.5,
position: 'left',
color: 'rgba(236, 241, 255, 1)'
}
contentStyle.font = (config.contentStyle && config.contentStyle.font) || contentStyle.font
contentStyle.color = (config.contentStyle && config.contentStyle.color) || contentStyle.color
contentStyle.lineHeight = (config.contentStyle && config.contentStyle.lineHeight) || contentStyle.lineHeight
contentStyle.position = (config.contentStyle && config.contentStyle.position) || contentStyle.position
drawMoreLines($content, contentStyle, config.content);
// description
const descriptionStyle = {
font: '24px Helvetica',
color: 'rgba(180, 180, 180, 1)',
lineHeight: 1.2,
position: 'left'
}
drawMoreLines($description, descriptionStyle, config.description)
// background image
const image = new Image();
image.crossOrigin = "Anonymous";
//logo
const logo = new Image();
logo.crossOrigin = "Anonymous";
logo.src = config.logo;
//qrcode
const qrcode = new Image();
qrcode.src = config.qrcode;
const onload = function() {
$canvas.width = WIDTH;
$canvas.height = HEIGHT;
image.src = config.banner;
image.onload = function() {
const ctx = $canvas.getContext('2d')
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillRect(0, 0, $canvas.width, $canvas.height);
// banner
imgRect = coverImg($canvas.width - 40, $canvas.height / 1.2 - 40, image.width, image.height);
ctx.drawImage(image, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);
//覆盖层
ctx.fillStyle="rgba(0, 0, 0, 0.3)";
ctx.fillRect(20,20,$canvas.width - 40,$canvas.height / 1.2 - 40);
// 时间
ctx.drawImage($day, -20, 50)
ctx.drawImage($date, -21, 125)
//logo
var logowidth = logo.width;
var logoheight = logo.height;
var scale = logowidth / logoheight;
var logoh = 60;
var cwidth = logoh * scale;
ctx.drawImage(logo, 60, $canvas.height / 1.2 + 30, cwidth, logoh);
ctx.drawImage(qrcode, $canvas.width - 160, $canvas.height / 1.2 + 20, 120, 120);
//标题文字
ctx.drawImage($title, 20, $canvas.height / 2 + 20)
ctx.drawImage($content, 20, $canvas.height / 2 + 120)
ctx.drawImage($description, 20, $canvas.height / 1.2 + 110)
ctx.strokeStyle = 'rgba(122, 122, 122, 0.5)';
const img = new Image();
img.crossOrigin = "Anonymous";
img.src = $canvas.toDataURL('image/png')
const radio = config.radio || 0.7
img.width = WIDTH * radio
img.height = HEIGHT * radio
img.className = 'poster_load';
ctx.clearRect(0, 0, $canvas.width, $canvas.height)
$canvas.style.display = 'none'
if ($container.querySelector('.poster_load')) {
$container.querySelector('.poster_load').src = img.src;
} else {
$container.appendChild(img);
}
$container.appendChild(img);
$container.removeChild($wrapper)
if (config.callback) {
config.callback($container)
}
}
}
onload()
} }
//裁切 /**
function containImg(sx, sy, box_w, box_h, source_w, source_h) { * 核心初始化函数
* @param {object} config - 配置对象
*/
function init(config) {
const $container = document.querySelector(config.selector)
// ------------------ 【修复点 2:清理容器,避免PJAX残余】 ------------------
// 在重新绘制前,确保清空容器,移除旧的 img 和 wrapper
$container.innerHTML = '';
// -----------------------------------------------------------------------
$container.style.border = '1px solid #f0f0f0'
const $wrapper = createDom('div', 'id', 'wrapper')
const $canvas = createDom('canvas', 'id', 'canvas', 'block')
const $day = createDom('canvas', 'id', 'day')
const $date = createDom('canvas', 'id', 'date')
const $title = createDom('canvas', 'id', 'title')
const $content = createDom('canvas', 'id', 'content')
const $logo = createDom('canvas', 'id', 'logo')
const $description = createDom('canvas', 'id', 'description')
appendChilds($wrapper, $canvas, $day, $date, $title, $content, $logo, $description)
$container.appendChild($wrapper)
const date = new Date()
// day canvas
const dayStyle = {
font: 'bold 80px Helvetica',
color: 'rgba(255, 255, 255, 1)',
position: 'right'
}
drawOneline($day, dayStyle, date.getDate());
// date canvas
const dateStyle = {
font: '23px Helvetica',
color: 'rgba(255, 255, 255, 1)',
position: 'right'
}
drawOneline($date, dateStyle, date.getFullYear() + '/' + (date.getMonth() + 1))
// title canvas
const titleStyle = {
font: '30px Helvetica',
lineHeight: 1.5,
color: 'rgba(255, 255, 255, 1)',
length: 2,
position: 'left'
}
titleStyle.font = (config.titleStyle && config.titleStyle.font) || titleStyle.font
titleStyle.color = (config.titleStyle && config.titleStyle.color) || titleStyle.color
titleStyle.position = (config.titleStyle && config.titleStyle.position) || titleStyle.position
drawMoreLines($title, titleStyle, config.title)
// content canvas
const contentStyle = {
font: '22px Helvetica',
lineHeight: 1.5,
position: 'left',
color: 'rgba(236, 241, 255, 1)'
}
contentStyle.font = (config.contentStyle && config.contentStyle.font) || contentStyle.font
contentStyle.color = (config.contentStyle && config.contentStyle.color) || contentStyle.color
contentStyle.lineHeight = (config.contentStyle && config.contentStyle.lineHeight) || contentStyle.lineHeight
contentStyle.position = (config.contentStyle && config.contentStyle.position) || contentStyle.position
drawMoreLines($content, contentStyle, config.content);
// description canvas
const descriptionStyle = {
font: '24px Helvetica',
color: 'rgba(180, 180, 180, 1)',
lineHeight: 1.2,
position: 'left'
}
drawMoreLines($description, descriptionStyle, config.description)
// ------------------ 【修复点 1:使用 Promise.all 等待所有图片加载】 ------------------
Promise.all([
loadImage(config.banner),
loadImage(config.logo),
loadImage(config.qrcode)
]).then(([image, logo, qrcode]) => {
$canvas.width = WIDTH;
$canvas.height = HEIGHT;
const ctx = $canvas.getContext('2d')
// 1. 绘制背景
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillRect(0, 0, $canvas.width, $canvas.height);
// 2. 绘制 Banner
const imgRect = coverImg($canvas.width - 40, $canvas.height / 1.2 - 40, image.width, image.height);
ctx.drawImage(image, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);
// 3. 绘制覆盖层
ctx.fillStyle="rgba(0, 0, 0, 0.3)";
ctx.fillRect(20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);        
// 4. 绘制时间 (使用预先绘制好的 Canvas)
ctx.drawImage($day, -20, 50)
ctx.drawImage($date, -21, 125)
// 5. 绘制 Logo
var logoh = 60;
var cwidth = logoh * (logo.width / logo.height);
ctx.drawImage(logo, 60, $canvas.height / 1.2 + 30, cwidth, logoh);
// 6. 绘制二维码
ctx.drawImage(qrcode, $canvas.width - 160, $canvas.height / 1.2 + 20, 120, 120);
// 7. 绘制文字 (使用预先绘制好的 Canvas)
ctx.drawImage($title, 20, $canvas.height / 2 + 20)
ctx.drawImage($content, 20, $canvas.height / 2 + 120)
ctx.drawImage($description, 20, $canvas.height / 1.2 + 110)
ctx.strokeStyle = 'rgba(122, 122, 122, 0.5)';
// 8. 转换并显示最终图片
const img = new Image();
img.crossOrigin = "Anonymous";
img.src = $canvas.toDataURL('image/png')
const radio = config.radio || 0.7
img.width = WIDTH * radio
img.height = HEIGHT * radio
img.className = 'poster_load';
// 清理 Canvas 避免在屏幕上停留
ctx.clearRect(0, 0, $canvas.width, $canvas.height)
$canvas.style.display = 'none'
// 移除旧的 wrapper 并添加最终海报图
$container.appendChild(img);
// 必须先移除再调用 callback,以确保 DOM 结构干净
$container.removeChild($wrapper)
if (config.callback) {
config.callback($container)
}
}).catch(error => {
console.error('海报图片加载失败:', error);
// 可在此处添加错误处理,例如显示一个错误信息
$container.removeChild($wrapper);
if (config.callback) {
// 即使失败也调用回调,传入 null 或错误信息,以便上层逻辑处理
config.callback(null);
}
});
// -----------------------------------------------------------------------
}
// 裁剪函数(不变)
function containImg(sx, sy, box_w, box_h, source_w, source_h) {
var dx = sx, var dx = sx,
dy = sy, dy = sy,
dWidth = box_w, dWidth = box_w,
@@ -176,243 +196,325 @@ const poster = (function() {
} }
} }
function coverImg(box_w, box_h, source_w, source_h) { // 覆盖函数(不变)
var sx = 0, function coverImg(box_w, box_h, source_w, source_h) {
sy = 0, var sx = 0,
sWidth = source_w, sy = 0,
sHeight = source_h; sWidth = source_w,
if (source_w > source_h || (source_w == source_h && box_w < box_h)) { sHeight = source_h;
sWidth = box_w * sHeight / box_h; if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sx = (source_w - sWidth) / 2; sWidth = box_w * sHeight / box_h;
} else if (source_w < source_h || (source_w == source_h && box_w > box_h)) { sx = (source_w - sWidth) / 2;
sHeight = box_h * sWidth / box_w; } else if (source_w < source_h || (source_w == source_h && box_w > box_h)) {
sy = (source_h - sHeight) / 2; sHeight = box_h * sWidth / box_w;
} sY = (source_h - sHeight) / 2;
return { }
sx, return {
sy, sx,
sWidth, sy,
sHeight sWidth,
} sHeight
} }
}
// 创建 DOM 元素(不变)
function createDom(name, key, value, display = 'none') { function createDom(name, key, value, display = 'none') {
const $dom = document.createElement(name) const $dom = document.createElement(name)
$dom.setAttribute(key, value) $dom.setAttribute(key, value)
$dom.style.display = display $dom.style.display = display
$dom.width = WIDTH $dom.width = WIDTH
return $dom $dom.height = HEIGHT // 新增:确保 canvas 都有默认高度,尽管后续会重设
return $dom
} }
// 追加子元素(不变)
function appendChilds(parent, ...doms) { function appendChilds(parent, ...doms) {
doms.forEach(dom => { doms.forEach(dom => {
parent.appendChild(dom) parent.appendChild(dom)
}) })
} }
// 绘制单行文本(不变)
function drawOneline(canvas, style, content) { function drawOneline(canvas, style, content) {
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
canvas.height = parseInt(style.font.match(/\d+/), 10) + 20 canvas.height = parseInt(style.font.match(/\d+/), 10) + 20
ctx.font = style.font ctx.font = style.font
ctx.fillStyle = style.color ctx.fillStyle = style.color
ctx.textBaseline = 'top' ctx.textBaseline = 'top'
let lineWidth = 0 let lineWidth = 0
let idx = 0 let idx = 0
let truncated = false let truncated = false
for (let i = 0; i < content.length; i++) { for (let i = 0; i < content.length; i++) {
lineWidth += ctx.measureText(content[i]).width; lineWidth += ctx.measureText(content[i]).width;
if (lineWidth > canvas.width - 60) { if (lineWidth > canvas.width - 60) {
truncated = true truncated = true
idx = i idx = i
break break
}
} }
}
let padding = 30 let padding = 30
if (truncated) { if (truncated) {
content = content.substring(0, idx) content = content.substring(0, idx)
padding = canvas.width / 2 - lineWidth / 2 // 修正:如果内容被截断,应该重新计算截断后的文本宽度,再计算 padding
} lineWidth = ctx.measureText(content).width;
if (style.position === 'center') {
padding = canvas.width / 2 - lineWidth / 2;
} else if (style.position === 'left') {
padding = 30; // 保持左侧间距
} else {
padding = canvas.width - 30; // 保持右侧间距
}
}
if (DEBUG) { if (DEBUG) {
ctx.strokeStyle = "#6fda92"; ctx.strokeStyle = "#6fda92";
ctx.strokeRect(0, 0, canvas.width, canvas.height); ctx.strokeRect(0, 0, canvas.width, canvas.height);
} }
if (style.position === 'center') { if (style.position === 'center') {
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.fillText(content, canvas.width / 2, 0) ctx.fillText(content, canvas.width / 2, 0)
} else if (style.position === 'left') { } else if (style.position === 'left') {
ctx.fillText(content, padding, 0) ctx.textAlign = 'left'
} else { ctx.fillText(content, padding, 0)
ctx.textAlign = 'right' } else {
ctx.fillText(content, canvas.width - padding, 0) ctx.textAlign = 'right'
} ctx.fillText(content, canvas.width - padding, 0)
}
} }
// 绘制多行文本(不变)
function drawMoreLines(canvas, style, content) { function drawMoreLines(canvas, style, content) {
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
const fontHeight = parseInt(style.font.match(/\d+/), 10) const fontHeight = parseInt(style.font.match(/\d+/), 10)
let totalLines = 0;
if (DEBUG) { // 预计算行高并设置 Canvas 高度
ctx.strokeStyle = "#6fda92"; let lineWidth = 0
ctx.strokeRect(0, 0, canvas.width, canvas.height); let currentLine = 0
} for (let i = 0; i < content.length; i++) {
lineWidth += ctx.measureText(content[i]).width;
ctx.font = style.font if (lineWidth > canvas.width - 120) {
ctx.fillStyle = style.color currentLine++;
ctx.textBaseline = 'top' lineWidth = 0
ctx.textAlign = 'center' }
if (i === content.length - 1) {
let alignX = 0 currentLine++;
}
if (style.position === 'center') {
alignX = canvas.width / 2;
} else if (style.position === 'left') {
ctx.textAlign = 'left'
alignX = 40
} else {
ctx.textAlign = 'right'
alignX = canvas.width - 40
}
let lineWidth = 0
let lastSubStrIndex = 0
let offsetY = 0
for (let i = 0; i < content.length; i++) {
lineWidth += ctx.measureText(content[i]).width;
if (lineWidth > canvas.width - 120) {
ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
offsetY += fontHeight * style.lineHeight
lineWidth = 0
lastSubStrIndex = i
} }
if (i === content.length - 1) { totalLines = currentLine;
ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY); canvas.height = (fontHeight * style.lineHeight) * totalLines + 20; // 留出一些底部边距
if (DEBUG) {
ctx.strokeStyle = "#6fda92";
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
ctx.font = style.font
ctx.fillStyle = style.color
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
let alignX = 0
if (style.position === 'center') {
alignX = canvas.width / 2;
} else if (style.position === 'left') {
ctx.textAlign = 'left'
alignX = 40
} else {
ctx.textAlign = 'right'
alignX = canvas.width - 40
}
lineWidth = 0
let lastSubStrIndex = 0
let offsetY = 0
for (let i = 0; i < content.length; i++) {
lineWidth += ctx.measureText(content[i]).width;
if (lineWidth > canvas.width - 120) {
ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
offsetY += fontHeight * style.lineHeight
lineWidth = 0
lastSubStrIndex = i
}
if (i === content.length - 1) {
ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY);
}
} }
}
} }
return { return {
init init
} }
})() })()
// ajax生成文章海报
// 此处调用部分需要确保在 PJAX 环境下,该事件监听器能够重新绑定(如果使用传统的 document.ready,在 PJAX 中需要改为监听 pjax:success 等事件)
//ajax生成文章海报
$('body').on('click', '.cr_poster', function () { $('body').on('click', '.cr_poster', function () {
var post_id = $(this).attr('poster-data'); var post_id = $(this).attr('poster-data');
var banner = $(this).attr('banner'); var banner = $(this).attr('banner');
var single_content = $('.single-content') var single_content = $('.single-content');
var t_content = $('#post-'+post_id+' .t_content') var t_content = $('#post-'+post_id+' .t_content');
var content = single_content.length>0 ? single_content[0].innerText : t_content[0].innerText
var content_length = content.length
var permalink = t_content.length>0 ? window.location.origin + '/moments/'+post_id : window.location.origin + window.location.pathname;
var title = t_content.length>0 ? Theme.site_title+'-瞬间' : document.title;
new QRious({ element: document.getElementById("twoCode"), value: permalink, size: 260, });
$('.poster_box').remove();
$('#share_modal_' + post_id + ' .poster_box_ap').append('<div class="poster_box"></div>');
if (content_length > 120) { // 确保 content 区域存在
content = content.substring(0, 80) + '...' var content_element = single_content.length > 0 ? single_content[0] : (t_content.length > 0 ? t_content[0] : null);
}
function Posterdown(e) { if (!content_element) {
if (e == null) { // 如果没有内容元素,则不执行后续操作或给出提示
return; console.error('无法获取文章内容元素。');
return;
} }
var modal = '#share_modal_' + post_id; var content = content_element.innerText;
var content_length = content.length;
var permalink = t_content.length > 0 ? window.location.origin + '/moments/' + post_id : window.location.origin + window.location.pathname;
var title = t_content.length > 0 ? Theme.site_title + '-瞬间' : document.title;
var url = $('' + modal + ' .poster_box img').attr('src'); // 确保 QRious 库可用
$('' + modal + ' .post_share_box').removeClass('hide'); if (typeof QRious === 'undefined') {
$('' + modal + ' .poster_download').attr('href', url).attr('download', 'poster_' + post_id + '.png'); console.error('QRious 库未加载。');
} return;
}
$('#share_modal_' + post_id + ' .poster_box').append('<div class="loading_box"><div uk-spinner></div></div>'); // 检查 #twoCode 是否存在,如果不存在需要动态创建,否则 QRious 会失败
$('.loading_box').remove(); let twoCodeCanvas = document.getElementById("twoCode");
poster.init({ if (!twoCodeCanvas) {
banner: banner, twoCodeCanvas = document.createElement('canvas');
selector: '.poster_box', twoCodeCanvas.id = 'twoCode';
title: title, twoCodeCanvas.style.display = 'none';
content: content, document.body.appendChild(twoCodeCanvas); // 插入到 DOM 中
logo: Theme.site_logo, }
qrcode: $('#twoCode').attr('src'),
description: Theme.admin_des,
callback: Posterdown
});
new QRious({ element: twoCodeCanvas, value: permalink, size: 260, });
var poster_box_selector = '#share_modal_' + post_id + ' .poster_box';
// ------------------ 【修复点 2:清理容器】 ------------------
// 先移除旧的 poster_box
$('.poster_box').remove();
// 重新创建并插入新的 poster_box
$('#share_modal_' + post_id + ' .poster_box_ap').append('<div class="poster_box"></div>');
// -----------------------------------------------------------------------
if (content_length > 120) {
content = content.substring(0, 80) + '...'
}
// Posterdown 函数中不再需要移除 loading_box,因为 init 会清空容器
function Posterdown(e) {
var modal = '#share_modal_' + post_id;
// 检查海报是否成功生成
if (e && $(modal + ' .poster_box img').length > 0) {
var url = $(modal + ' .poster_box img').attr('src');
$(modal + ' .post_share_box').removeClass('hide');
$(modal + ' .poster_download').attr('href', url).attr('download', 'poster_' + post_id + '.png');
} else {
// 错误处理,如果海报生成失败
cocoMessage.error("海报生成失败,请检查图片链接!");
}
}
// 移除 loading box 的时机提前,或者在 init 开始前完成
// $('.loading_box').remove(); // 原始代码中这行在创建 loading_box 之后,但其作用是移除**所有** .loading_box,可能存在问题
// 重新添加 loading 状态,并在 init 中等待
$(poster_box_selector).append('<div class="loading_box"><div uk-spinner></div></div>');
poster.init({
banner: banner,
selector: poster_box_selector, // 传入完整的选择器
title: title,
content: content,
logo: Theme.site_logo,
qrcode: $('#twoCode').attr('src'),
description: Theme.admin_des,
callback: Posterdown
});
// 移除 loading 动画
$(poster_box_selector + ' .loading_box').remove();
}); });
function convertImgToBase64(url, callback) { function convertImgToBase64(url, callback) {
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
var img = new Image(); var img = new Image();
img.crossOrigin = 'Anonymous'; img.crossOrigin = 'Anonymous';
img.onload = function () { img.onload = function () {
canvas.width = img.width; canvas.width = img.width;
canvas.height = img.height; canvas.height = img.height;
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase(); var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
var dataURL = canvas.toDataURL('image/' + ext); // 修正:确保 toDataURL 使用正确的 MIME type,如果是 jpg/jpeg 应使用 image/jpeg
callback(dataURL); var mimeType = (ext === 'jpg' || ext === 'jpeg') ? 'image/jpeg' : 'image/png';
canvas = null; var dataURL = canvas.toDataURL(mimeType);
}; callback(dataURL);
img.src = url; canvas = null;
};
img.onerror = function() {
console.error('convertImgToBase64: 无法加载图片 ' + url);
callback(null);
}
img.src = url;
} }
function handleShare(e, pic, title,pathname) { function handleShare(e, pic, title, pathname) {
var permalink = window.location.origin + pathname; var permalink = window.location.origin + pathname;
switch (e) {
case 'wb': // 确保 cocoMessage 库可用
var url = `https://service.weibo.com/share/share.php?url=${permalink}&type=button&language=zh_cn&pic=${pic}&title=${title}` if (typeof cocoMessage === 'undefined') {
window.open(url); console.error('cocoMessage 库未加载。');
break // 如果 cocoMessage 不可用,可以替换为原生的 alert
case 'qzone': if (e === 'copy') {
var url = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${permalink}&title=${title}&pics=${pic}` alert("链接已复制到剪贴板!");
window.open(url);
break
case "qq":
var url = `http://connect.qq.com/widget/shareqq/index.html?url=${permalink}&title=${title}&pics=${pic}`
window.open(url);
break;
case "copy":
if (navigator.clipboard) {
navigator.clipboard.writeText(permalink).then(function() {
cocoMessage.success("链接已复制到剪贴板!");
}, function(err) {
cocoMessage.error("复制失败,请手动复制链接");
});
} else {
// 兼容旧浏览器
var tempInput = document.createElement('input');
tempInput.value = permalink;
document.body.appendChild(tempInput);
tempInput.select();
try {
document.execCommand('copy');
cocoMessage.success("链接已复制到剪贴板!");
} catch (err) {
cocoMessage.error("复制失败,请手动复制链接");
} }
document.body.removeChild(tempInput); }
}
break; switch (e) {
default: case 'wb':
break var url = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(permalink)}&type=button&language=zh_cn&pic=${encodeURIComponent(pic)}&title=${encodeURIComponent(title)}`
} window.open(url);
break
case 'qzone':
var url = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(permalink)}&title=${encodeURIComponent(title)}&pics=${encodeURIComponent(pic)}`
window.open(url);
break
case "qq":
var url = `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(permalink)}&title=${encodeURIComponent(title)}&pics=${encodeURIComponent(pic)}`
window.open(url);
break;
case "copy":
if (navigator.clipboard) {
navigator.clipboard.writeText(permalink).then(function() {
cocoMessage.success("链接已复制到剪贴板!");
}, function(err) {
cocoMessage.error("复制失败,请手动复制链接");
});
} else {
// 兼容旧浏览器
var tempInput = document.createElement('input');
tempInput.value = permalink;
document.body.appendChild(tempInput);
tempInput.select();
try {
document.execCommand('copy');
cocoMessage.success("链接已复制到剪贴板!");
} catch (err) {
cocoMessage.error("复制失败,请手动复制链接");
}
document.body.removeChild(tempInput);
}
break;
default:
break
}
} }
+750 -99
View File
@@ -1,21 +1,21 @@
/* /*
* Remix Icon v3.5.0 * Remix Icon v4.8.0
* https://remixicon.com * https://remixicon.com
* https://github.com/Remix-Design/RemixIcon * https://github.com/Remix-Design/RemixIcon
* *
* Copyright RemixIcon.com * Copyright RemixIcon.com
* Released under the Apache License Version 2.0 * Released under the Apache License Version 2.0
* *
* Date: 2023-07-30 * Date: 2025-12-26
*/ */
@font-face { @font-face {
font-family: "remixicon"; font-family: "remixicon";
src: url('remixicon.eot?t=1690730386070'); /* IE9*/ src: url('remixicon.eot?t=1766743011500'); /* IE9*/
src: url('remixicon.eot?t=1690730386070#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('remixicon.eot?t=1766743011500#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("remixicon.woff2?t=1690730386070") format("woff2"), url("remixicon.woff2?t=1766743011500") format("woff2"),
url("remixicon.woff?t=1690730386070") format("woff"), url("remixicon.woff?t=1766743011500") format("woff"),
url('remixicon.ttf?t=1690730386070') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('remixicon.ttf?t=1766743011500') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('remixicon.svg?t=1690730386070#remixicon') format('svg'); /* iOS 4.1- */ url('remixicon.svg?t=1766743011500#remixicon') format('svg'); /* iOS 4.1- */
font-display: swap; font-display: swap;
} }
@@ -258,8 +258,8 @@
.ri-book-3-line:before { content: "\ead5"; } .ri-book-3-line:before { content: "\ead5"; }
.ri-book-fill:before { content: "\ead6"; } .ri-book-fill:before { content: "\ead6"; }
.ri-book-line:before { content: "\ead7"; } .ri-book-line:before { content: "\ead7"; }
.ri-book-mark-fill:before { content: "\ead8"; } .ri-book-marked-fill:before { content: "\ead8"; }
.ri-book-mark-line:before { content: "\ead9"; } .ri-book-marked-line:before { content: "\ead9"; }
.ri-book-open-fill:before { content: "\eada"; } .ri-book-open-fill:before { content: "\eada"; }
.ri-book-open-line:before { content: "\eadb"; } .ri-book-open-line:before { content: "\eadb"; }
.ri-book-read-fill:before { content: "\eadc"; } .ri-book-read-fill:before { content: "\eadc"; }
@@ -798,8 +798,8 @@
.ri-file-list-line:before { content: "\ecf1"; } .ri-file-list-line:before { content: "\ecf1"; }
.ri-file-lock-fill:before { content: "\ecf2"; } .ri-file-lock-fill:before { content: "\ecf2"; }
.ri-file-lock-line:before { content: "\ecf3"; } .ri-file-lock-line:before { content: "\ecf3"; }
.ri-file-mark-fill:before { content: "\ecf4"; } .ri-file-marked-fill:before { content: "\ecf4"; }
.ri-file-mark-line:before { content: "\ecf5"; } .ri-file-marked-line:before { content: "\ecf5"; }
.ri-file-music-fill:before { content: "\ecf6"; } .ri-file-music-fill:before { content: "\ecf6"; }
.ri-file-music-line:before { content: "\ecf7"; } .ri-file-music-line:before { content: "\ecf7"; }
.ri-file-paper-2-fill:before { content: "\ecf8"; } .ri-file-paper-2-fill:before { content: "\ecf8"; }
@@ -2493,91 +2493,742 @@
.ri-font-family:before { content: "\f390"; } .ri-font-family:before { content: "\f390"; }
.ri-font-mono:before { content: "\f391"; } .ri-font-mono:before { content: "\f391"; }
.ri-font-sans-serif:before { content: "\f392"; } .ri-font-sans-serif:before { content: "\f392"; }
.ri-font-sans:before { content: "\f393"; } .ri-hard-drive-3-fill:before { content: "\f393"; }
.ri-hard-drive-3-fill:before { content: "\f394"; } .ri-hard-drive-3-line:before { content: "\f394"; }
.ri-hard-drive-3-line:before { content: "\f395"; } .ri-kick-fill:before { content: "\f395"; }
.ri-kick-fill:before { content: "\f396"; } .ri-kick-line:before { content: "\f396"; }
.ri-kick-line:before { content: "\f397"; } .ri-list-check-3:before { content: "\f397"; }
.ri-list-check-3:before { content: "\f398"; } .ri-list-indefinite:before { content: "\f398"; }
.ri-list-indefinite:before { content: "\f399"; } .ri-list-ordered-2:before { content: "\f399"; }
.ri-list-ordered-2:before { content: "\f39a"; } .ri-list-radio:before { content: "\f39a"; }
.ri-list-radio:before { content: "\f39b"; } .ri-openbase-fill:before { content: "\f39b"; }
.ri-openbase-fill:before { content: "\f39c"; } .ri-openbase-line:before { content: "\f39c"; }
.ri-openbase-line:before { content: "\f39d"; } .ri-planet-fill:before { content: "\f39d"; }
.ri-planet-fill:before { content: "\f39e"; } .ri-planet-line:before { content: "\f39e"; }
.ri-planet-line:before { content: "\f39f"; } .ri-prohibited-fill:before { content: "\f39f"; }
.ri-prohibited-fill:before { content: "\f3a0"; } .ri-prohibited-line:before { content: "\f3a0"; }
.ri-prohibited-line:before { content: "\f3a1"; } .ri-quote-text:before { content: "\f3a1"; }
.ri-quote-text:before { content: "\f3a2"; } .ri-seo-fill:before { content: "\f3a2"; }
.ri-seo-fill:before { content: "\f3a3"; } .ri-seo-line:before { content: "\f3a3"; }
.ri-seo-line:before { content: "\f3a4"; } .ri-slash-commands:before { content: "\f3a4"; }
.ri-slash-commands:before { content: "\f3a5"; } .ri-archive-2-fill:before { content: "\f3a5"; }
.ri-archive-2-fill:before { content: "\f3a6"; } .ri-archive-2-line:before { content: "\f3a6"; }
.ri-archive-2-line:before { content: "\f3a7"; } .ri-inbox-2-fill:before { content: "\f3a7"; }
.ri-inbox-2-fill:before { content: "\f3a8"; } .ri-inbox-2-line:before { content: "\f3a8"; }
.ri-inbox-2-line:before { content: "\f3a9"; } .ri-shake-hands-fill:before { content: "\f3a9"; }
.ri-shake-hands-fill:before { content: "\f3aa"; } .ri-shake-hands-line:before { content: "\f3aa"; }
.ri-shake-hands-line:before { content: "\f3ab"; } .ri-supabase-fill:before { content: "\f3ab"; }
.ri-supabase-fill:before { content: "\f3ac"; } .ri-supabase-line:before { content: "\f3ac"; }
.ri-supabase-line:before { content: "\f3ad"; } .ri-water-percent-fill:before { content: "\f3ad"; }
.ri-water-percent-fill:before { content: "\f3ae"; } .ri-water-percent-line:before { content: "\f3ae"; }
.ri-water-percent-line:before { content: "\f3af"; } .ri-yuque-fill:before { content: "\f3af"; }
.ri-yuque-fill:before { content: "\f3b0"; } .ri-yuque-line:before { content: "\f3b0"; }
.ri-yuque-line:before { content: "\f3b1"; } .ri-crosshair-2-fill:before { content: "\f3b1"; }
.ri-crosshair-2-fill:before { content: "\f3b2"; } .ri-crosshair-2-line:before { content: "\f3b2"; }
.ri-crosshair-2-line:before { content: "\f3b3"; } .ri-crosshair-fill:before { content: "\f3b3"; }
.ri-crosshair-fill:before { content: "\f3b4"; } .ri-crosshair-line:before { content: "\f3b4"; }
.ri-crosshair-line:before { content: "\f3b5"; } .ri-file-close-fill:before { content: "\f3b5"; }
.ri-file-close-fill:before { content: "\f3b6"; } .ri-file-close-line:before { content: "\f3b6"; }
.ri-file-close-line:before { content: "\f3b7"; } .ri-infinity-fill:before { content: "\f3b7"; }
.ri-infinity-fill:before { content: "\f3b8"; } .ri-infinity-line:before { content: "\f3b8"; }
.ri-infinity-line:before { content: "\f3b9"; } .ri-rfid-fill:before { content: "\f3b9"; }
.ri-rfid-fill:before { content: "\f3ba"; } .ri-rfid-line:before { content: "\f3ba"; }
.ri-rfid-line:before { content: "\f3bb"; } .ri-slash-commands-2:before { content: "\f3bb"; }
.ri-slash-commands-2:before { content: "\f3bc"; } .ri-user-forbid-fill:before { content: "\f3bc"; }
.ri-user-forbid-fill:before { content: "\f3bd"; } .ri-user-forbid-line:before { content: "\f3bd"; }
.ri-user-forbid-line:before { content: "\f3be"; } .ri-beer-fill:before { content: "\f3be"; }
.ri-beer-fill:before { content: "\f3bf"; } .ri-beer-line:before { content: "\f3bf"; }
.ri-beer-line:before { content: "\f3c0"; } .ri-circle-fill:before { content: "\f3c0"; }
.ri-circle-fill:before { content: "\f3c1"; } .ri-circle-line:before { content: "\f3c1"; }
.ri-circle-line:before { content: "\f3c2"; } .ri-dropdown-list:before { content: "\f3c2"; }
.ri-dropdown-list:before { content: "\f3c3"; } .ri-file-image-fill:before { content: "\f3c3"; }
.ri-file-image-fill:before { content: "\f3c4"; } .ri-file-image-line:before { content: "\f3c4"; }
.ri-file-image-line:before { content: "\f3c5"; } .ri-file-pdf-2-fill:before { content: "\f3c5"; }
.ri-file-pdf-2-fill:before { content: "\f3c6"; } .ri-file-pdf-2-line:before { content: "\f3c6"; }
.ri-file-pdf-2-line:before { content: "\f3c7"; } .ri-file-video-fill:before { content: "\f3c7"; }
.ri-file-video-fill:before { content: "\f3c8"; } .ri-file-video-line:before { content: "\f3c8"; }
.ri-file-video-line:before { content: "\f3c9"; } .ri-folder-image-fill:before { content: "\f3c9"; }
.ri-folder-image-fill:before { content: "\f3ca"; } .ri-folder-image-line:before { content: "\f3ca"; }
.ri-folder-image-line:before { content: "\f3cb"; } .ri-folder-video-fill:before { content: "\f3cb"; }
.ri-folder-video-fill:before { content: "\f3cc"; } .ri-folder-video-line:before { content: "\f3cc"; }
.ri-folder-video-line:before { content: "\f3cd"; } .ri-hexagon-fill:before { content: "\f3cd"; }
.ri-hexagon-fill:before { content: "\f3ce"; } .ri-hexagon-line:before { content: "\f3ce"; }
.ri-hexagon-line:before { content: "\f3cf"; } .ri-menu-search-fill:before { content: "\f3cf"; }
.ri-menu-search-fill:before { content: "\f3d0"; } .ri-menu-search-line:before { content: "\f3d0"; }
.ri-menu-search-line:before { content: "\f3d1"; } .ri-octagon-fill:before { content: "\f3d1"; }
.ri-octagon-fill:before { content: "\f3d2"; } .ri-octagon-line:before { content: "\f3d2"; }
.ri-octagon-line:before { content: "\f3d3"; } .ri-pentagon-fill:before { content: "\f3d3"; }
.ri-pentagon-fill:before { content: "\f3d4"; } .ri-pentagon-line:before { content: "\f3d4"; }
.ri-pentagon-line:before { content: "\f3d5"; } .ri-rectangle-fill:before { content: "\f3d5"; }
.ri-rectangle-fill:before { content: "\f3d6"; } .ri-rectangle-line:before { content: "\f3d6"; }
.ri-rectangle-line:before { content: "\f3d7"; } .ri-robot-2-fill:before { content: "\f3d7"; }
.ri-robot-2-fill:before { content: "\f3d8"; } .ri-robot-2-line:before { content: "\f3d8"; }
.ri-robot-2-line:before { content: "\f3d9"; } .ri-shapes-fill:before { content: "\f3d9"; }
.ri-shapes-fill:before { content: "\f3da"; } .ri-shapes-line:before { content: "\f3da"; }
.ri-shapes-line:before { content: "\f3db"; } .ri-square-fill:before { content: "\f3db"; }
.ri-square-fill:before { content: "\f3dc"; } .ri-square-line:before { content: "\f3dc"; }
.ri-square-line:before { content: "\f3dd"; } .ri-tent-fill:before { content: "\f3dd"; }
.ri-tent-fill:before { content: "\f3de"; } .ri-tent-line:before { content: "\f3de"; }
.ri-tent-line:before { content: "\f3df"; } .ri-threads-fill:before { content: "\f3df"; }
.ri-threads-fill:before { content: "\f3e0"; } .ri-threads-line:before { content: "\f3e0"; }
.ri-threads-line:before { content: "\f3e1"; } .ri-tree-fill:before { content: "\f3e1"; }
.ri-tree-fill:before { content: "\f3e2"; } .ri-tree-line:before { content: "\f3e2"; }
.ri-tree-line:before { content: "\f3e3"; } .ri-triangle-fill:before { content: "\f3e3"; }
.ri-triangle-fill:before { content: "\f3e4"; } .ri-triangle-line:before { content: "\f3e4"; }
.ri-triangle-line:before { content: "\f3e5"; } .ri-twitter-x-fill:before { content: "\f3e5"; }
.ri-twitter-x-fill:before { content: "\f3e6"; } .ri-twitter-x-line:before { content: "\f3e6"; }
.ri-twitter-x-line:before { content: "\f3e7"; } .ri-verified-badge-fill:before { content: "\f3e7"; }
.ri-verified-badge-fill:before { content: "\f3e8"; } .ri-verified-badge-line:before { content: "\f3e8"; }
.ri-verified-badge-line:before { content: "\f3e9"; } .ri-armchair-fill:before { content: "\f3e9"; }
.ri-armchair-line:before { content: "\f3ea"; }
.ri-bnb-fill:before { content: "\f3eb"; }
.ri-bnb-line:before { content: "\f3ec"; }
.ri-bread-fill:before { content: "\f3ed"; }
.ri-bread-line:before { content: "\f3ee"; }
.ri-btc-fill:before { content: "\f3ef"; }
.ri-btc-line:before { content: "\f3f0"; }
.ri-calendar-schedule-fill:before { content: "\f3f1"; }
.ri-calendar-schedule-line:before { content: "\f3f2"; }
.ri-dice-1-fill:before { content: "\f3f3"; }
.ri-dice-1-line:before { content: "\f3f4"; }
.ri-dice-2-fill:before { content: "\f3f5"; }
.ri-dice-2-line:before { content: "\f3f6"; }
.ri-dice-3-fill:before { content: "\f3f7"; }
.ri-dice-3-line:before { content: "\f3f8"; }
.ri-dice-4-fill:before { content: "\f3f9"; }
.ri-dice-4-line:before { content: "\f3fa"; }
.ri-dice-5-fill:before { content: "\f3fb"; }
.ri-dice-5-line:before { content: "\f3fc"; }
.ri-dice-6-fill:before { content: "\f3fd"; }
.ri-dice-6-line:before { content: "\f3fe"; }
.ri-dice-fill:before { content: "\f3ff"; }
.ri-dice-line:before { content: "\f400"; }
.ri-drinks-fill:before { content: "\f401"; }
.ri-drinks-line:before { content: "\f402"; }
.ri-equalizer-2-fill:before { content: "\f403"; }
.ri-equalizer-2-line:before { content: "\f404"; }
.ri-equalizer-3-fill:before { content: "\f405"; }
.ri-equalizer-3-line:before { content: "\f406"; }
.ri-eth-fill:before { content: "\f407"; }
.ri-eth-line:before { content: "\f408"; }
.ri-flower-fill:before { content: "\f409"; }
.ri-flower-line:before { content: "\f40a"; }
.ri-glasses-2-fill:before { content: "\f40b"; }
.ri-glasses-2-line:before { content: "\f40c"; }
.ri-glasses-fill:before { content: "\f40d"; }
.ri-glasses-line:before { content: "\f40e"; }
.ri-goggles-fill:before { content: "\f40f"; }
.ri-goggles-line:before { content: "\f410"; }
.ri-image-circle-fill:before { content: "\f411"; }
.ri-image-circle-line:before { content: "\f412"; }
.ri-info-i:before { content: "\f413"; }
.ri-money-rupee-circle-fill:before { content: "\f414"; }
.ri-money-rupee-circle-line:before { content: "\f415"; }
.ri-news-fill:before { content: "\f416"; }
.ri-news-line:before { content: "\f417"; }
.ri-robot-3-fill:before { content: "\f418"; }
.ri-robot-3-line:before { content: "\f419"; }
.ri-share-2-fill:before { content: "\f41a"; }
.ri-share-2-line:before { content: "\f41b"; }
.ri-sofa-fill:before { content: "\f41c"; }
.ri-sofa-line:before { content: "\f41d"; }
.ri-svelte-fill:before { content: "\f41e"; }
.ri-svelte-line:before { content: "\f41f"; }
.ri-vk-fill:before { content: "\f420"; }
.ri-vk-line:before { content: "\f421"; }
.ri-xrp-fill:before { content: "\f422"; }
.ri-xrp-line:before { content: "\f423"; }
.ri-xtz-fill:before { content: "\f424"; }
.ri-xtz-line:before { content: "\f425"; }
.ri-archive-stack-fill:before { content: "\f426"; }
.ri-archive-stack-line:before { content: "\f427"; }
.ri-bowl-fill:before { content: "\f428"; }
.ri-bowl-line:before { content: "\f429"; }
.ri-calendar-view:before { content: "\f42a"; }
.ri-carousel-view:before { content: "\f42b"; }
.ri-code-block:before { content: "\f42c"; }
.ri-color-filter-fill:before { content: "\f42d"; }
.ri-color-filter-line:before { content: "\f42e"; }
.ri-contacts-book-3-fill:before { content: "\f42f"; }
.ri-contacts-book-3-line:before { content: "\f430"; }
.ri-contract-fill:before { content: "\f431"; }
.ri-contract-line:before { content: "\f432"; }
.ri-drinks-2-fill:before { content: "\f433"; }
.ri-drinks-2-line:before { content: "\f434"; }
.ri-export-fill:before { content: "\f435"; }
.ri-export-line:before { content: "\f436"; }
.ri-file-check-fill:before { content: "\f437"; }
.ri-file-check-line:before { content: "\f438"; }
.ri-focus-mode:before { content: "\f439"; }
.ri-folder-6-fill:before { content: "\f43a"; }
.ri-folder-6-line:before { content: "\f43b"; }
.ri-folder-check-fill:before { content: "\f43c"; }
.ri-folder-check-line:before { content: "\f43d"; }
.ri-folder-close-fill:before { content: "\f43e"; }
.ri-folder-close-line:before { content: "\f43f"; }
.ri-folder-cloud-fill:before { content: "\f440"; }
.ri-folder-cloud-line:before { content: "\f441"; }
.ri-gallery-view-2:before { content: "\f442"; }
.ri-gallery-view:before { content: "\f443"; }
.ri-hand:before { content: "\f444"; }
.ri-import-fill:before { content: "\f445"; }
.ri-import-line:before { content: "\f446"; }
.ri-information-2-fill:before { content: "\f447"; }
.ri-information-2-line:before { content: "\f448"; }
.ri-kanban-view-2:before { content: "\f449"; }
.ri-kanban-view:before { content: "\f44a"; }
.ri-list-view:before { content: "\f44b"; }
.ri-lock-star-fill:before { content: "\f44c"; }
.ri-lock-star-line:before { content: "\f44d"; }
.ri-puzzle-2-fill:before { content: "\f44e"; }
.ri-puzzle-2-line:before { content: "\f44f"; }
.ri-puzzle-fill:before { content: "\f450"; }
.ri-puzzle-line:before { content: "\f451"; }
.ri-ram-2-fill:before { content: "\f452"; }
.ri-ram-2-line:before { content: "\f453"; }
.ri-ram-fill:before { content: "\f454"; }
.ri-ram-line:before { content: "\f455"; }
.ri-receipt-fill:before { content: "\f456"; }
.ri-receipt-line:before { content: "\f457"; }
.ri-shadow-fill:before { content: "\f458"; }
.ri-shadow-line:before { content: "\f459"; }
.ri-sidebar-fold-fill:before { content: "\f45a"; }
.ri-sidebar-fold-line:before { content: "\f45b"; }
.ri-sidebar-unfold-fill:before { content: "\f45c"; }
.ri-sidebar-unfold-line:before { content: "\f45d"; }
.ri-slideshow-view:before { content: "\f45e"; }
.ri-sort-alphabet-asc:before { content: "\f45f"; }
.ri-sort-alphabet-desc:before { content: "\f460"; }
.ri-sort-number-asc:before { content: "\f461"; }
.ri-sort-number-desc:before { content: "\f462"; }
.ri-stacked-view:before { content: "\f463"; }
.ri-sticky-note-add-fill:before { content: "\f464"; }
.ri-sticky-note-add-line:before { content: "\f465"; }
.ri-swap-2-fill:before { content: "\f466"; }
.ri-swap-2-line:before { content: "\f467"; }
.ri-swap-3-fill:before { content: "\f468"; }
.ri-swap-3-line:before { content: "\f469"; }
.ri-table-3:before { content: "\f46a"; }
.ri-table-view:before { content: "\f46b"; }
.ri-text-block:before { content: "\f46c"; }
.ri-text-snippet:before { content: "\f46d"; }
.ri-timeline-view:before { content: "\f46e"; }
.ri-blogger-fill:before { content: "\f46f"; }
.ri-blogger-line:before { content: "\f470"; }
.ri-chat-thread-fill:before { content: "\f471"; }
.ri-chat-thread-line:before { content: "\f472"; }
.ri-discount-percent-fill:before { content: "\f473"; }
.ri-discount-percent-line:before { content: "\f474"; }
.ri-exchange-2-fill:before { content: "\f475"; }
.ri-exchange-2-line:before { content: "\f476"; }
.ri-git-fork-fill:before { content: "\f477"; }
.ri-git-fork-line:before { content: "\f478"; }
.ri-input-field:before { content: "\f479"; }
.ri-progress-1-fill:before { content: "\f47a"; }
.ri-progress-1-line:before { content: "\f47b"; }
.ri-progress-2-fill:before { content: "\f47c"; }
.ri-progress-2-line:before { content: "\f47d"; }
.ri-progress-3-fill:before { content: "\f47e"; }
.ri-progress-3-line:before { content: "\f47f"; }
.ri-progress-4-fill:before { content: "\f480"; }
.ri-progress-4-line:before { content: "\f481"; }
.ri-progress-5-fill:before { content: "\f482"; }
.ri-progress-5-line:before { content: "\f483"; }
.ri-progress-6-fill:before { content: "\f484"; }
.ri-progress-6-line:before { content: "\f485"; }
.ri-progress-7-fill:before { content: "\f486"; }
.ri-progress-7-line:before { content: "\f487"; }
.ri-progress-8-fill:before { content: "\f488"; }
.ri-progress-8-line:before { content: "\f489"; }
.ri-remix-run-fill:before { content: "\f48a"; }
.ri-remix-run-line:before { content: "\f48b"; }
.ri-signpost-fill:before { content: "\f48c"; }
.ri-signpost-line:before { content: "\f48d"; }
.ri-time-zone-fill:before { content: "\f48e"; }
.ri-time-zone-line:before { content: "\f48f"; }
.ri-arrow-down-wide-fill:before { content: "\f490"; }
.ri-arrow-down-wide-line:before { content: "\f491"; }
.ri-arrow-left-wide-fill:before { content: "\f492"; }
.ri-arrow-left-wide-line:before { content: "\f493"; }
.ri-arrow-right-wide-fill:before { content: "\f494"; }
.ri-arrow-right-wide-line:before { content: "\f495"; }
.ri-arrow-up-wide-fill:before { content: "\f496"; }
.ri-arrow-up-wide-line:before { content: "\f497"; }
.ri-bluesky-fill:before { content: "\f498"; }
.ri-bluesky-line:before { content: "\f499"; }
.ri-expand-height-fill:before { content: "\f49a"; }
.ri-expand-height-line:before { content: "\f49b"; }
.ri-expand-width-fill:before { content: "\f49c"; }
.ri-expand-width-line:before { content: "\f49d"; }
.ri-forward-end-fill:before { content: "\f49e"; }
.ri-forward-end-line:before { content: "\f49f"; }
.ri-forward-end-mini-fill:before { content: "\f4a0"; }
.ri-forward-end-mini-line:before { content: "\f4a1"; }
.ri-friendica-fill:before { content: "\f4a2"; }
.ri-friendica-line:before { content: "\f4a3"; }
.ri-git-pr-draft-fill:before { content: "\f4a4"; }
.ri-git-pr-draft-line:before { content: "\f4a5"; }
.ri-play-reverse-fill:before { content: "\f4a6"; }
.ri-play-reverse-line:before { content: "\f4a7"; }
.ri-play-reverse-mini-fill:before { content: "\f4a8"; }
.ri-play-reverse-mini-line:before { content: "\f4a9"; }
.ri-rewind-start-fill:before { content: "\f4aa"; }
.ri-rewind-start-line:before { content: "\f4ab"; }
.ri-rewind-start-mini-fill:before { content: "\f4ac"; }
.ri-rewind-start-mini-line:before { content: "\f4ad"; }
.ri-scroll-to-bottom-fill:before { content: "\f4ae"; }
.ri-scroll-to-bottom-line:before { content: "\f4af"; }
.ri-add-large-fill:before { content: "\f4b0"; }
.ri-add-large-line:before { content: "\f4b1"; }
.ri-aed-electrodes-fill:before { content: "\f4b2"; }
.ri-aed-electrodes-line:before { content: "\f4b3"; }
.ri-aed-fill:before { content: "\f4b4"; }
.ri-aed-line:before { content: "\f4b5"; }
.ri-alibaba-cloud-fill:before { content: "\f4b6"; }
.ri-alibaba-cloud-line:before { content: "\f4b7"; }
.ri-align-item-bottom-fill:before { content: "\f4b8"; }
.ri-align-item-bottom-line:before { content: "\f4b9"; }
.ri-align-item-horizontal-center-fill:before { content: "\f4ba"; }
.ri-align-item-horizontal-center-line:before { content: "\f4bb"; }
.ri-align-item-left-fill:before { content: "\f4bc"; }
.ri-align-item-left-line:before { content: "\f4bd"; }
.ri-align-item-right-fill:before { content: "\f4be"; }
.ri-align-item-right-line:before { content: "\f4bf"; }
.ri-align-item-top-fill:before { content: "\f4c0"; }
.ri-align-item-top-line:before { content: "\f4c1"; }
.ri-align-item-vertical-center-fill:before { content: "\f4c2"; }
.ri-align-item-vertical-center-line:before { content: "\f4c3"; }
.ri-apps-2-add-fill:before { content: "\f4c4"; }
.ri-apps-2-add-line:before { content: "\f4c5"; }
.ri-close-large-fill:before { content: "\f4c6"; }
.ri-close-large-line:before { content: "\f4c7"; }
.ri-collapse-diagonal-2-fill:before { content: "\f4c8"; }
.ri-collapse-diagonal-2-line:before { content: "\f4c9"; }
.ri-collapse-diagonal-fill:before { content: "\f4ca"; }
.ri-collapse-diagonal-line:before { content: "\f4cb"; }
.ri-dashboard-horizontal-fill:before { content: "\f4cc"; }
.ri-dashboard-horizontal-line:before { content: "\f4cd"; }
.ri-expand-diagonal-2-fill:before { content: "\f4ce"; }
.ri-expand-diagonal-2-line:before { content: "\f4cf"; }
.ri-expand-diagonal-fill:before { content: "\f4d0"; }
.ri-expand-diagonal-line:before { content: "\f4d1"; }
.ri-firebase-fill:before { content: "\f4d2"; }
.ri-firebase-line:before { content: "\f4d3"; }
.ri-flip-horizontal-2-fill:before { content: "\f4d4"; }
.ri-flip-horizontal-2-line:before { content: "\f4d5"; }
.ri-flip-horizontal-fill:before { content: "\f4d6"; }
.ri-flip-horizontal-line:before { content: "\f4d7"; }
.ri-flip-vertical-2-fill:before { content: "\f4d8"; }
.ri-flip-vertical-2-line:before { content: "\f4d9"; }
.ri-flip-vertical-fill:before { content: "\f4da"; }
.ri-flip-vertical-line:before { content: "\f4db"; }
.ri-formula:before { content: "\f4dc"; }
.ri-function-add-fill:before { content: "\f4dd"; }
.ri-function-add-line:before { content: "\f4de"; }
.ri-goblet-2-fill:before { content: "\f4df"; }
.ri-goblet-2-line:before { content: "\f4e0"; }
.ri-golf-ball-fill:before { content: "\f4e1"; }
.ri-golf-ball-line:before { content: "\f4e2"; }
.ri-group-3-fill:before { content: "\f4e3"; }
.ri-group-3-line:before { content: "\f4e4"; }
.ri-heart-add-2-fill:before { content: "\f4e5"; }
.ri-heart-add-2-line:before { content: "\f4e6"; }
.ri-id-card-fill:before { content: "\f4e7"; }
.ri-id-card-line:before { content: "\f4e8"; }
.ri-information-off-fill:before { content: "\f4e9"; }
.ri-information-off-line:before { content: "\f4ea"; }
.ri-java-fill:before { content: "\f4eb"; }
.ri-java-line:before { content: "\f4ec"; }
.ri-layout-grid-2-fill:before { content: "\f4ed"; }
.ri-layout-grid-2-line:before { content: "\f4ee"; }
.ri-layout-horizontal-fill:before { content: "\f4ef"; }
.ri-layout-horizontal-line:before { content: "\f4f0"; }
.ri-layout-vertical-fill:before { content: "\f4f1"; }
.ri-layout-vertical-line:before { content: "\f4f2"; }
.ri-menu-fold-2-fill:before { content: "\f4f3"; }
.ri-menu-fold-2-line:before { content: "\f4f4"; }
.ri-menu-fold-3-fill:before { content: "\f4f5"; }
.ri-menu-fold-3-line:before { content: "\f4f6"; }
.ri-menu-fold-4-fill:before { content: "\f4f7"; }
.ri-menu-fold-4-line:before { content: "\f4f8"; }
.ri-menu-unfold-2-fill:before { content: "\f4f9"; }
.ri-menu-unfold-2-line:before { content: "\f4fa"; }
.ri-menu-unfold-3-fill:before { content: "\f4fb"; }
.ri-menu-unfold-3-line:before { content: "\f4fc"; }
.ri-menu-unfold-4-fill:before { content: "\f4fd"; }
.ri-menu-unfold-4-line:before { content: "\f4fe"; }
.ri-mobile-download-fill:before { content: "\f4ff"; }
.ri-mobile-download-line:before { content: "\f500"; }
.ri-nextjs-fill:before { content: "\f501"; }
.ri-nextjs-line:before { content: "\f502"; }
.ri-nodejs-fill:before { content: "\f503"; }
.ri-nodejs-line:before { content: "\f504"; }
.ri-pause-large-fill:before { content: "\f505"; }
.ri-pause-large-line:before { content: "\f506"; }
.ri-play-large-fill:before { content: "\f507"; }
.ri-play-large-line:before { content: "\f508"; }
.ri-play-reverse-large-fill:before { content: "\f509"; }
.ri-play-reverse-large-line:before { content: "\f50a"; }
.ri-police-badge-fill:before { content: "\f50b"; }
.ri-police-badge-line:before { content: "\f50c"; }
.ri-prohibited-2-fill:before { content: "\f50d"; }
.ri-prohibited-2-line:before { content: "\f50e"; }
.ri-shopping-bag-4-fill:before { content: "\f50f"; }
.ri-shopping-bag-4-line:before { content: "\f510"; }
.ri-snowflake-fill:before { content: "\f511"; }
.ri-snowflake-line:before { content: "\f512"; }
.ri-square-root:before { content: "\f513"; }
.ri-stop-large-fill:before { content: "\f514"; }
.ri-stop-large-line:before { content: "\f515"; }
.ri-tailwind-css-fill:before { content: "\f516"; }
.ri-tailwind-css-line:before { content: "\f517"; }
.ri-tooth-fill:before { content: "\f518"; }
.ri-tooth-line:before { content: "\f519"; }
.ri-video-off-fill:before { content: "\f51a"; }
.ri-video-off-line:before { content: "\f51b"; }
.ri-video-on-fill:before { content: "\f51c"; }
.ri-video-on-line:before { content: "\f51d"; }
.ri-webhook-fill:before { content: "\f51e"; }
.ri-webhook-line:before { content: "\f51f"; }
.ri-weight-fill:before { content: "\f520"; }
.ri-weight-line:before { content: "\f521"; }
.ri-book-shelf-fill:before { content: "\f522"; }
.ri-book-shelf-line:before { content: "\f523"; }
.ri-brain-2-fill:before { content: "\f524"; }
.ri-brain-2-line:before { content: "\f525"; }
.ri-chat-search-fill:before { content: "\f526"; }
.ri-chat-search-line:before { content: "\f527"; }
.ri-chat-unread-fill:before { content: "\f528"; }
.ri-chat-unread-line:before { content: "\f529"; }
.ri-collapse-horizontal-fill:before { content: "\f52a"; }
.ri-collapse-horizontal-line:before { content: "\f52b"; }
.ri-collapse-vertical-fill:before { content: "\f52c"; }
.ri-collapse-vertical-line:before { content: "\f52d"; }
.ri-dna-fill:before { content: "\f52e"; }
.ri-dna-line:before { content: "\f52f"; }
.ri-dropper-fill:before { content: "\f530"; }
.ri-dropper-line:before { content: "\f531"; }
.ri-expand-diagonal-s-2-fill:before { content: "\f532"; }
.ri-expand-diagonal-s-2-line:before { content: "\f533"; }
.ri-expand-diagonal-s-fill:before { content: "\f534"; }
.ri-expand-diagonal-s-line:before { content: "\f535"; }
.ri-expand-horizontal-fill:before { content: "\f536"; }
.ri-expand-horizontal-line:before { content: "\f537"; }
.ri-expand-horizontal-s-fill:before { content: "\f538"; }
.ri-expand-horizontal-s-line:before { content: "\f539"; }
.ri-expand-vertical-fill:before { content: "\f53a"; }
.ri-expand-vertical-line:before { content: "\f53b"; }
.ri-expand-vertical-s-fill:before { content: "\f53c"; }
.ri-expand-vertical-s-line:before { content: "\f53d"; }
.ri-gemini-fill:before { content: "\f53e"; }
.ri-gemini-line:before { content: "\f53f"; }
.ri-reset-left-fill:before { content: "\f540"; }
.ri-reset-left-line:before { content: "\f541"; }
.ri-reset-right-fill:before { content: "\f542"; }
.ri-reset-right-line:before { content: "\f543"; }
.ri-stairs-fill:before { content: "\f544"; }
.ri-stairs-line:before { content: "\f545"; }
.ri-telegram-2-fill:before { content: "\f546"; }
.ri-telegram-2-line:before { content: "\f547"; }
.ri-triangular-flag-fill:before { content: "\f548"; }
.ri-triangular-flag-line:before { content: "\f549"; }
.ri-user-minus-fill:before { content: "\f54a"; }
.ri-user-minus-line:before { content: "\f54b"; }
.ri-account-box-2-fill:before { content: "\f54c"; }
.ri-account-box-2-line:before { content: "\f54d"; }
.ri-account-circle-2-fill:before { content: "\f54e"; }
.ri-account-circle-2-line:before { content: "\f54f"; }
.ri-alarm-snooze-fill:before { content: "\f550"; }
.ri-alarm-snooze-line:before { content: "\f551"; }
.ri-arrow-down-box-fill:before { content: "\f552"; }
.ri-arrow-down-box-line:before { content: "\f553"; }
.ri-arrow-left-box-fill:before { content: "\f554"; }
.ri-arrow-left-box-line:before { content: "\f555"; }
.ri-arrow-left-down-box-fill:before { content: "\f556"; }
.ri-arrow-left-down-box-line:before { content: "\f557"; }
.ri-arrow-left-up-box-fill:before { content: "\f558"; }
.ri-arrow-left-up-box-line:before { content: "\f559"; }
.ri-arrow-right-box-fill:before { content: "\f55a"; }
.ri-arrow-right-box-line:before { content: "\f55b"; }
.ri-arrow-right-down-box-fill:before { content: "\f55c"; }
.ri-arrow-right-down-box-line:before { content: "\f55d"; }
.ri-arrow-right-up-box-fill:before { content: "\f55e"; }
.ri-arrow-right-up-box-line:before { content: "\f55f"; }
.ri-arrow-up-box-fill:before { content: "\f560"; }
.ri-arrow-up-box-line:before { content: "\f561"; }
.ri-bar-chart-box-ai-fill:before { content: "\f562"; }
.ri-bar-chart-box-ai-line:before { content: "\f563"; }
.ri-brush-ai-fill:before { content: "\f564"; }
.ri-brush-ai-line:before { content: "\f565"; }
.ri-camera-ai-fill:before { content: "\f566"; }
.ri-camera-ai-line:before { content: "\f567"; }
.ri-chat-ai-fill:before { content: "\f568"; }
.ri-chat-ai-line:before { content: "\f569"; }
.ri-chat-smile-ai-fill:before { content: "\f56a"; }
.ri-chat-smile-ai-line:before { content: "\f56b"; }
.ri-chat-voice-ai-fill:before { content: "\f56c"; }
.ri-chat-voice-ai-line:before { content: "\f56d"; }
.ri-code-ai-fill:before { content: "\f56e"; }
.ri-code-ai-line:before { content: "\f56f"; }
.ri-color-filter-ai-fill:before { content: "\f570"; }
.ri-color-filter-ai-line:before { content: "\f571"; }
.ri-custom-size:before { content: "\f572"; }
.ri-fediverse-fill:before { content: "\f573"; }
.ri-fediverse-line:before { content: "\f574"; }
.ri-flag-off-fill:before { content: "\f575"; }
.ri-flag-off-line:before { content: "\f576"; }
.ri-home-9-fill:before { content: "\f577"; }
.ri-home-9-line:before { content: "\f578"; }
.ri-image-ai-fill:before { content: "\f579"; }
.ri-image-ai-line:before { content: "\f57a"; }
.ri-image-circle-ai-fill:before { content: "\f57b"; }
.ri-image-circle-ai-line:before { content: "\f57c"; }
.ri-info-card-fill:before { content: "\f57d"; }
.ri-info-card-line:before { content: "\f57e"; }
.ri-landscape-ai-fill:before { content: "\f57f"; }
.ri-landscape-ai-line:before { content: "\f580"; }
.ri-letter-spacing-2:before { content: "\f581"; }
.ri-line-height-2:before { content: "\f582"; }
.ri-mail-ai-fill:before { content: "\f583"; }
.ri-mail-ai-line:before { content: "\f584"; }
.ri-mic-2-ai-fill:before { content: "\f585"; }
.ri-mic-2-ai-line:before { content: "\f586"; }
.ri-mic-ai-fill:before { content: "\f587"; }
.ri-mic-ai-line:before { content: "\f588"; }
.ri-movie-ai-fill:before { content: "\f589"; }
.ri-movie-ai-line:before { content: "\f58a"; }
.ri-music-ai-fill:before { content: "\f58b"; }
.ri-music-ai-line:before { content: "\f58c"; }
.ri-notification-snooze-fill:before { content: "\f58d"; }
.ri-notification-snooze-line:before { content: "\f58e"; }
.ri-php-fill:before { content: "\f58f"; }
.ri-php-line:before { content: "\f590"; }
.ri-pix-fill:before { content: "\f591"; }
.ri-pix-line:before { content: "\f592"; }
.ri-pulse-ai-fill:before { content: "\f593"; }
.ri-pulse-ai-line:before { content: "\f594"; }
.ri-quill-pen-ai-fill:before { content: "\f595"; }
.ri-quill-pen-ai-line:before { content: "\f596"; }
.ri-speak-ai-fill:before { content: "\f597"; }
.ri-speak-ai-line:before { content: "\f598"; }
.ri-star-off-fill:before { content: "\f599"; }
.ri-star-off-line:before { content: "\f59a"; }
.ri-translate-ai-2:before { content: "\f59b"; }
.ri-translate-ai:before { content: "\f59c"; }
.ri-user-community-fill:before { content: "\f59d"; }
.ri-user-community-line:before { content: "\f59e"; }
.ri-vercel-fill:before { content: "\f59f"; }
.ri-vercel-line:before { content: "\f5a0"; }
.ri-video-ai-fill:before { content: "\f5a1"; }
.ri-video-ai-line:before { content: "\f5a2"; }
.ri-video-on-ai-fill:before { content: "\f5a3"; }
.ri-video-on-ai-line:before { content: "\f5a4"; }
.ri-voice-ai-fill:before { content: "\f5a5"; }
.ri-voice-ai-line:before { content: "\f5a6"; }
.ri-ai-generate-2:before { content: "\f5a7"; }
.ri-ai-generate-text:before { content: "\f5a8"; }
.ri-anthropic-fill:before { content: "\f5a9"; }
.ri-anthropic-line:before { content: "\f5aa"; }
.ri-apps-2-ai-fill:before { content: "\f5ab"; }
.ri-apps-2-ai-line:before { content: "\f5ac"; }
.ri-camera-lens-ai-fill:before { content: "\f5ad"; }
.ri-camera-lens-ai-line:before { content: "\f5ae"; }
.ri-clapperboard-ai-fill:before { content: "\f5af"; }
.ri-clapperboard-ai-line:before { content: "\f5b0"; }
.ri-claude-fill:before { content: "\f5b1"; }
.ri-claude-line:before { content: "\f5b2"; }
.ri-closed-captioning-ai-fill:before { content: "\f5b3"; }
.ri-closed-captioning-ai-line:before { content: "\f5b4"; }
.ri-dvd-ai-fill:before { content: "\f5b5"; }
.ri-dvd-ai-line:before { content: "\f5b6"; }
.ri-film-ai-fill:before { content: "\f5b7"; }
.ri-film-ai-line:before { content: "\f5b8"; }
.ri-font-size-ai:before { content: "\f5b9"; }
.ri-mixtral-fill:before { content: "\f5ba"; }
.ri-mixtral-line:before { content: "\f5bb"; }
.ri-movie-2-ai-fill:before { content: "\f5bc"; }
.ri-movie-2-ai-line:before { content: "\f5bd"; }
.ri-mv-ai-fill:before { content: "\f5be"; }
.ri-mv-ai-line:before { content: "\f5bf"; }
.ri-perplexity-fill:before { content: "\f5c0"; }
.ri-perplexity-line:before { content: "\f5c1"; }
.ri-poker-clubs-fill:before { content: "\f5c2"; }
.ri-poker-clubs-line:before { content: "\f5c3"; }
.ri-poker-diamonds-fill:before { content: "\f5c4"; }
.ri-poker-diamonds-line:before { content: "\f5c5"; }
.ri-poker-hearts-fill:before { content: "\f5c6"; }
.ri-poker-hearts-line:before { content: "\f5c7"; }
.ri-poker-spades-fill:before { content: "\f5c8"; }
.ri-poker-spades-line:before { content: "\f5c9"; }
.ri-safe-3-fill:before { content: "\f5ca"; }
.ri-safe-3-line:before { content: "\f5cb"; }
.ri-accessibility-fill:before { content: "\f5cc"; }
.ri-accessibility-line:before { content: "\f5cd"; }
.ri-alarm-add-fill:before { content: "\f5ce"; }
.ri-alarm-add-line:before { content: "\f5cf"; }
.ri-arrow-down-long-fill:before { content: "\f5d0"; }
.ri-arrow-down-long-line:before { content: "\f5d1"; }
.ri-arrow-left-down-long-fill:before { content: "\f5d2"; }
.ri-arrow-left-down-long-line:before { content: "\f5d3"; }
.ri-arrow-left-long-fill:before { content: "\f5d4"; }
.ri-arrow-left-long-line:before { content: "\f5d5"; }
.ri-arrow-left-up-long-fill:before { content: "\f5d6"; }
.ri-arrow-left-up-long-line:before { content: "\f5d7"; }
.ri-arrow-right-down-long-fill:before { content: "\f5d8"; }
.ri-arrow-right-down-long-line:before { content: "\f5d9"; }
.ri-arrow-right-long-fill:before { content: "\f5da"; }
.ri-arrow-right-long-line:before { content: "\f5db"; }
.ri-arrow-right-up-long-fill:before { content: "\f5dc"; }
.ri-arrow-right-up-long-line:before { content: "\f5dd"; }
.ri-arrow-up-long-fill:before { content: "\f5de"; }
.ri-arrow-up-long-line:before { content: "\f5df"; }
.ri-chess-fill:before { content: "\f5e0"; }
.ri-chess-line:before { content: "\f5e1"; }
.ri-diamond-fill:before { content: "\f5e2"; }
.ri-diamond-line:before { content: "\f5e3"; }
.ri-diamond-ring-fill:before { content: "\f5e4"; }
.ri-diamond-ring-line:before { content: "\f5e5"; }
.ri-figma-fill:before { content: "\f5e6"; }
.ri-figma-line:before { content: "\f5e7"; }
.ri-firefox-browser-fill:before { content: "\f5e8"; }
.ri-firefox-browser-line:before { content: "\f5e9"; }
.ri-jewelry-fill:before { content: "\f5ea"; }
.ri-jewelry-line:before { content: "\f5eb"; }
.ri-multi-image-fill:before { content: "\f5ec"; }
.ri-multi-image-line:before { content: "\f5ed"; }
.ri-no-credit-card-fill:before { content: "\f5ee"; }
.ri-no-credit-card-line:before { content: "\f5ef"; }
.ri-service-bell-fill:before { content: "\f5f0"; }
.ri-service-bell-line:before { content: "\f5f1"; }
.ri-ai-agent-fill:before { content: "\f5f2"; }
.ri-ai-agent-line:before { content: "\f5f3"; }
.ri-ai-generate-2-fill:before { content: "\f5f4"; }
.ri-ai-generate-2-line:before { content: "\f5f5"; }
.ri-ai-generate-3d-fill:before { content: "\f5f6"; }
.ri-ai-generate-3d-line:before { content: "\f5f7"; }
.ri-ai:before { content: "\f5f8"; }
.ri-apps-ai-fill:before { content: "\f5f9"; }
.ri-apps-ai-line:before { content: "\f5fa"; }
.ri-atom-fill:before { content: "\f5fb"; }
.ri-atom-line:before { content: "\f5fc"; }
.ri-book-ai-fill:before { content: "\f5fd"; }
.ri-book-ai-line:before { content: "\f5fe"; }
.ri-brain-3-fill:before { content: "\f5ff"; }
.ri-brain-3-line:before { content: "\f600"; }
.ri-brain-ai-3-fill:before { content: "\f601"; }
.ri-brain-ai-3-line:before { content: "\f602"; }
.ri-brush-ai-3-fill:before { content: "\f603"; }
.ri-brush-ai-3-line:before { content: "\f604"; }
.ri-camera-4-fill:before { content: "\f605"; }
.ri-camera-4-line:before { content: "\f606"; }
.ri-camera-ai-2-fill:before { content: "\f607"; }
.ri-camera-ai-2-line:before { content: "\f608"; }
.ri-chat-ai-2-fill:before { content: "\f609"; }
.ri-chat-ai-2-line:before { content: "\f60a"; }
.ri-chat-ai-3-fill:before { content: "\f60b"; }
.ri-chat-ai-3-line:before { content: "\f60c"; }
.ri-chat-ai-4-fill:before { content: "\f60d"; }
.ri-chat-ai-4-line:before { content: "\f60e"; }
.ri-chat-smile-ai-3-fill:before { content: "\f60f"; }
.ri-chat-smile-ai-3-line:before { content: "\f610"; }
.ri-deepseek-fill:before { content: "\f611"; }
.ri-deepseek-line:before { content: "\f612"; }
.ri-file-ai-2-fill:before { content: "\f613"; }
.ri-file-ai-2-line:before { content: "\f614"; }
.ri-file-ai-fill:before { content: "\f615"; }
.ri-file-ai-line:before { content: "\f616"; }
.ri-function-ai-fill:before { content: "\f617"; }
.ri-function-ai-line:before { content: "\f618"; }
.ri-game-2-fill:before { content: "\f619"; }
.ri-game-2-line:before { content: "\f61a"; }
.ri-goblet-broken-fill:before { content: "\f61b"; }
.ri-goblet-broken-line:before { content: "\f61c"; }
.ri-lightbulb-ai-fill:before { content: "\f61d"; }
.ri-lightbulb-ai-line:before { content: "\f61e"; }
.ri-loop-left-ai-fill:before { content: "\f61f"; }
.ri-loop-left-ai-line:before { content: "\f620"; }
.ri-loop-right-ai-fill:before { content: "\f621"; }
.ri-loop-right-ai-line:before { content: "\f622"; }
.ri-message-ai-3-fill:before { content: "\f623"; }
.ri-message-ai-3-line:before { content: "\f624"; }
.ri-painting-ai-fill:before { content: "\f625"; }
.ri-painting-ai-line:before { content: "\f626"; }
.ri-painting-fill:before { content: "\f627"; }
.ri-painting-line:before { content: "\f628"; }
.ri-pencil-ai-2-fill:before { content: "\f629"; }
.ri-pencil-ai-2-line:before { content: "\f62a"; }
.ri-pencil-ai-fill:before { content: "\f62b"; }
.ri-pencil-ai-line:before { content: "\f62c"; }
.ri-remix-fill:before { content: "\f62d"; }
.ri-remix-line:before { content: "\f62e"; }
.ri-search-ai-2-fill:before { content: "\f62f"; }
.ri-search-ai-2-line:before { content: "\f630"; }
.ri-search-ai-3-fill:before { content: "\f631"; }
.ri-search-ai-3-line:before { content: "\f632"; }
.ri-search-ai-4-fill:before { content: "\f633"; }
.ri-search-ai-4-line:before { content: "\f634"; }
.ri-search-ai-fill:before { content: "\f635"; }
.ri-search-ai-line:before { content: "\f636"; }
.ri-speech-to-text-fill:before { content: "\f637"; }
.ri-speech-to-text-line:before { content: "\f638"; }
.ri-target-fill:before { content: "\f639"; }
.ri-target-line:before { content: "\f63a"; }
.ri-text-to-speech-fill:before { content: "\f63b"; }
.ri-text-to-speech-line:before { content: "\f63c"; }
.ri-wrench-fill:before { content: "\f63d"; }
.ri-wrench-line:before { content: "\f63e"; }
.ri-area-chart-fill:before { content: "\f63f"; }
.ri-area-chart-line:before { content: "\f640"; }
.ri-baseball-fill:before { content: "\f641"; }
.ri-baseball-line:before { content: "\f642"; }
.ri-binoculars-fill:before { content: "\f643"; }
.ri-binoculars-line:before { content: "\f644"; }
.ri-cursor-hand:before { content: "\f645"; }
.ri-emotion-add-fill:before { content: "\f646"; }
.ri-emotion-add-line:before { content: "\f647"; }
.ri-file-scan-fill:before { content: "\f648"; }
.ri-file-scan-line:before { content: "\f649"; }
.ri-fiverr-fill:before { content: "\f64a"; }
.ri-fiverr-line:before { content: "\f64b"; }
.ri-font-serif:before { content: "\f64c"; }
.ri-ghost-3-fill:before { content: "\f64d"; }
.ri-ghost-3-line:before { content: "\f64e"; }
.ri-gitee-fill:before { content: "\f64f"; }
.ri-gitee-line:before { content: "\f650"; }
.ri-global-off-fill:before { content: "\f651"; }
.ri-global-off-line:before { content: "\f652"; }
.ri-image-download-fill:before { content: "\f653"; }
.ri-image-download-line:before { content: "\f654"; }
.ri-image-upload-fill:before { content: "\f655"; }
.ri-image-upload-line:before { content: "\f656"; }
.ri-issues-fill:before { content: "\f657"; }
.ri-issues-line:before { content: "\f658"; }
.ri-issues-reopen-fill:before { content: "\f659"; }
.ri-issues-reopen-line:before { content: "\f65a"; }
.ri-network-error-fill:before { content: "\f65b"; }
.ri-network-error-line:before { content: "\f65c"; }
.ri-network-fill:before { content: "\f65d"; }
.ri-network-line:before { content: "\f65e"; }
.ri-network-off-fill:before { content: "\f65f"; }
.ri-network-off-line:before { content: "\f660"; }
.ri-piano-fill:before { content: "\f661"; }
.ri-piano-grand-fill:before { content: "\f662"; }
.ri-piano-grand-line:before { content: "\f663"; }
.ri-piano-line:before { content: "\f664"; }
.ri-plug-3-fill:before { content: "\f665"; }
.ri-plug-3-line:before { content: "\f666"; }
.ri-send-ins-fill:before { content: "\f667"; }
.ri-send-ins-line:before { content: "\f668"; }
.ri-signal-cellular-1-fill:before { content: "\f669"; }
.ri-signal-cellular-1-line:before { content: "\f66a"; }
.ri-signal-cellular-2-fill:before { content: "\f66b"; }
.ri-signal-cellular-2-line:before { content: "\f66c"; }
.ri-signal-cellular-3-fill:before { content: "\f66d"; }
.ri-signal-cellular-3-line:before { content: "\f66e"; }
.ri-signal-cellular-off-fill:before { content: "\f66f"; }
.ri-signal-cellular-off-line:before { content: "\f670"; }
.ri-stacked-chart-fill:before { content: "\f671"; }
.ri-stacked-chart-line:before { content: "\f672"; }
.ri-upwork-fill:before { content: "\f673"; }
.ri-upwork-line:before { content: "\f674"; }
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
+74 -1
View File
@@ -1 +1,74 @@
@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}#nprogress{pointer-events:none}#nprogress .bar{background:#172eff;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute} @-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #22bb6d; /* ? 修改后的横条颜色 */
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
#nprogress .peg {
display: block;
position: absolute;
right: 0;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #22bb6d, 0 0 5px #22bb6d;
opacity: 1;
transform: rotate(3deg) translate(0, -4px);
}
/* ? 修改 Spinner -> 使用自定义图片且居中 */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
}
/* ? 不再使用旋转圆形,换成图片 */
#nprogress .spinner-icon {
width: 100%;
height: 100%;
background-image: url("/upload/jiazai.gif");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .bar,
.nprogress-custom-parent #nprogress .spinner {
position: absolute;
}
+19 -17
View File
@@ -2433,17 +2433,19 @@ select.uk-form-width-xsmall {
color: #666 color: #666
} }
.uk-spinner>* { .uk-spinner {
animation: uk-spinner-rotate 1.4s linear infinite width: 80px;
height: 80px;
background-image: url("/upload/jiazai.gif");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
} }
.uk-spinner>*>* { /* 隐藏内部那个 svg */
stroke-dasharray: 88px; .uk-spinner > svg {
stroke-dashoffset: 0; display: none !important;
transform-origin: center;
animation: uk-spinner-dash 1.4s ease-in-out infinite;
stroke-width: 1;
stroke-linecap: round
} }
.uk-totop { .uk-totop {
@@ -3257,9 +3259,9 @@ iframe[uk-cover] {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: -270px; left: -150px;
box-sizing: border-box; box-sizing: border-box;
width: 270px; width: 150px;
padding: 20px; padding: 20px;
background: #222; background: #222;
overflow-y: auto; overflow-y: auto;
@@ -3276,7 +3278,7 @@ iframe[uk-cover] {
.uk-offcanvas-flip .uk-offcanvas-bar { .uk-offcanvas-flip .uk-offcanvas-bar {
left: auto; left: auto;
right: -270px right: -150px
} }
@media (min-width:640px) { @media (min-width:640px) {
@@ -3318,7 +3320,7 @@ iframe[uk-cover] {
} }
.uk-open>.uk-offcanvas-reveal { .uk-open>.uk-offcanvas-reveal {
width: 270px width: 150px
} }
@media (min-width:640px) { @media (min-width:640px) {
@@ -3382,11 +3384,11 @@ iframe[uk-cover] {
} }
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
left: 270px left: 150px
} }
.uk-offcanvas-flip.uk-offcanvas-container-animation { .uk-offcanvas-flip.uk-offcanvas-container-animation {
left: -270px left: -150px
} }
@media (min-width:640px) { @media (min-width:640px) {
@@ -3395,7 +3397,7 @@ iframe[uk-cover] {
} }
.uk-offcanvas-flip.uk-offcanvas-container-animation { .uk-offcanvas-flip.uk-offcanvas-container-animation {
left: -350px left: -200px
} }
} }
@@ -3439,7 +3441,7 @@ iframe[uk-cover] {
left: 10px; left: 10px;
z-index: 1040; z-index: 1040;
box-sizing: border-box; box-sizing: border-box;
width: 350px width: 200px
} }
.uk-notification-bottom-right, .uk-notification-bottom-right,
+1 -1
View File
@@ -15,7 +15,7 @@
<div class="nodata_main" uk-height-viewport="offset-top: true" > <div class="nodata_main" uk-height-viewport="offset-top: true" >
<section class="error-404 not-found"> <section class="error-404 not-found">
<div class="page-content no_resault"> <div class="page-content no_resault">
<img src="/themes/theme-pix/assets/img/404.png"> <img src="/upload/404.png">
</div> </div>
</section> </section>
</div> </div>
+28 -14
View File
@@ -6,7 +6,7 @@
<div class="page_main uk-width-2-3@m"> <div class="page_main uk-width-2-3@m">
<th:block th:replace="~{modules/header}"/> <th:block th:replace="~{modules/header}" />
<div id="pjax-container"> <div id="pjax-container">
@@ -15,60 +15,74 @@
<div id="post_item" class="moment_list"> <div id="post_item" class="moment_list">
<div th:each="postInfo, iterstat: ${friends.items}" th:id="${'post-'+postInfo.metadata.name}" <div th:each="postInfo, iterstat: ${friends.items}"
th:id="${'post-'+postInfo.metadata.name}"
class="loop_content p_item moment_item uk-animation-slide-bottom-small" class="loop_content p_item moment_item uk-animation-slide-bottom-small"
th:with="spec = ${postInfo.spec}"> th:with="spec = ${postInfo.spec}">
<div class="p_item_inner"> <div class="p_item_inner">
<div class="list_user_meta"> <div class="list_user_meta">
<div class="avatar"> <div class="avatar">
<img th:src="@{${spec.logo}}"> <img th:src="@{${spec.logo}}">
</div> </div>
<div class="name"> <div class="name">
<div class="avatar_title"> <div class="avatar_title">
<a target="_blank" th:href="${spec.authorUrl}">[[${spec.author}]]</a> <a target="_blank" th:href="${spec.authorUrl}">
[[${spec.author}]]
</a>
</div> </div>
<time itemprop="datePublished" <time itemprop="datePublished"
th:datetime="${#dates.format(spec.pubDate, 'yyyy-MM-dd HH:mm')}"> th:datetime="${#dates.format(spec.pubDate, 'yyyy-MM-dd HH:mm')}">
<th:block th:replace="~{modules/widgets/time :: time(${spec.pubDate})}"></th:block> <th:block th:replace="~{modules/widgets/time :: time(${spec.pubDate})}">
</th:block>
</time> </time>
</div> </div>
</div> </div>
<div class="blog_content"> <div class="blog_content">
<div class="entry-content"> <div class="entry-content">
<div class="p_title"> <div class="p_title moment-collapse-container">
<a target="_blank" th:href="${spec.postLink}"><i class="ri-at-line"></i>[[${spec.title}]]</a> <a target="_blank" th:href="${spec.postLink}">
<div th:utext="${spec.description}"></div>
</a>
</div> </div>
<th:block th:with="excerpt = ${#strings.length(spec.description) > 100 ? 100 : #strings.length(spec.description)}">
<div class="t_content" th:text="${#strings.substring(spec.description,0,excerpt)+'...'}">
</div>
</th:block>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 空数据 -->
<th:block th:if="${#lists.isEmpty(friends.items)}"> <th:block th:if="${#lists.isEmpty(friends.items)}">
<th:block th:replace="~{macro/tpl/content-none}"/> <th:block th:replace="~{macro/tpl/content-none}" />
</th:block> </th:block>
</div> </div>
<!-- 分页:必须保持在 blog_list_inner 里面 -->
<th:block th:if="${friends.totalPages>1}"> <th:block th:if="${friends.totalPages>1}">
<div id="t_pagination"> <div id="t_pagination">
<div class="post-paging" th:if="${friends.hasNext()}" <div class="post-paging"
th:if="${friends.hasNext()}"
th:with="_page = ${friends.page+1}"> th:with="_page = ${friends.page+1}">
<a th:data="${'/friends/page/'+_page+'?preview-theme=theme-pix'}" th:text="${theme.config.base_set.site_page}"></a> <a th:data="${'/friends/page/'+_page}"
th:text="${theme.config.base_set.site_page}">
</a>
</div> </div>
</div> </div>
</th:block> </th:block>
<div id="comment_form_reset"></div> <div id="comment_form_reset"></div>
</div> </div>
</div> </div>
</div> </div>
<th:block th:replace="~{modules/footer-main}"/> <th:block th:replace="~{modules/footer-main}" />
</div> </div>
</th:block> </th:block>
+4 -4
View File
@@ -5,17 +5,17 @@
<div class="posts_cat_nav"> <div class="posts_cat_nav">
<ul id="cat_nav_items"> <ul id="cat_nav_items">
<li><a th:data="|${path}?preview-theme=theme-pix|" class="active">全部<span></span></a> <li><a th:data="${path}" class="active">全部<span></span></a>
</li> </li>
<li th:if="${theme.config.post.post_nav == 'category'}" th:each="categoryItem,iStat : ${categoryFinder.listAll()}"> <li th:if="${theme.config.post.post_nav == 'category'}" th:each="categoryItem,iStat : ${categoryFinder.listAll()}">
<a th:data="|${categoryItem.status.permalink}?preview-theme=theme-pix|" <a th:data="${categoryItem.status.permalink}"
class="">[[${categoryItem.spec.displayName}]]<span></span></a> class="">[[${categoryItem.spec.displayName}]]<span></span></a>
</li> </li>
<li th:if="${theme.config.post.post_nav == 'custom_category'}" <li th:if="${theme.config.post.post_nav == 'custom_category'}"
th:each="category : ${theme.config.post.nav_category}"> th:each="category : ${theme.config.post.nav_category}">
<th:block th:with="categoryItem = ${categoryFinder.getByName(category)}"> <th:block th:with="categoryItem = ${categoryFinder.getByName(category)}">
<a th:if="${categoryItem!=null}" <a th:if="${categoryItem!=null}"
th:data="|${categoryItem.status.permalink}?preview-theme=theme-pix|" th:data="${categoryItem.status.permalink}"
class="">[[${categoryItem.spec.displayName}]]<span></span> class="">[[${categoryItem.spec.displayName}]]<span></span>
</a> </a>
</th:block> </th:block>
@@ -31,7 +31,7 @@
<th:block th:if="${_posts.totalPages>1}"> <th:block th:if="${_posts.totalPages>1}">
<div id="pagination"> <div id="pagination">
<div class="post-paging" th:if="${_posts.hasNext()}" <div class="post-paging" th:if="${_posts.hasNext()}"
th:with="_page = ${_posts.page+1},_path = ${path == '/archives' ? path+'?preview-theme=theme-pix&page='+_page : path +'page/'+_page+'?preview-theme=theme-pix' }"> th:with="_page = ${_posts.page+1},_path = ${path == '/archives' ? path+'?page='+_page : path +'page/'+_page }">
<a th:data="${_path}" th:text="${theme.config.base_set.site_page}"></a> <a th:data="${_path}" th:text="${theme.config.base_set.site_page}"></a>
</div> </div>
</div> </div>
+3 -3
View File
@@ -4,11 +4,11 @@
<div class="blog_list_inner" uk-height-viewport="offset-top: true"> <div class="blog_list_inner" uk-height-viewport="offset-top: true">
<div class="moment_cat_nav"> <div class="moment_cat_nav">
<ul id="cat_nav_items"> <ul id="cat_nav_items">
<li><a data="/moments?preview-theme=theme-pix" class="" th:classappend="${#lists.isEmpty(param.tag) ? 'active' : ''}" <li><a data="/moments" class="" th:classappend="${#lists.isEmpty(param.tag) ? 'active' : ''}"
><span>全部</span></a> ><span>全部</span></a>
</li> </li>
<li th:each="tag,iStat : ${tags}"> <li th:each="tag,iStat : ${tags}">
<a th:data="|/moments?preview-theme=theme-pix&tag=${tag.name}|" class="" <a th:data="|/moments?tag=${tag.name}|" class=""
th:classappend="${#lists.contains(param.tag, tag.name) ? 'active' : ''}" th:classappend="${#lists.contains(param.tag, tag.name) ? 'active' : ''}"
><span>[[${tag.name}]]</span></a> ><span>[[${tag.name}]]</span></a>
</li> </li>
@@ -28,7 +28,7 @@
<div id="t_pagination"> <div id="t_pagination">
<div class="post-paging" th:if="${_moments.hasNext()}" <div class="post-paging" th:if="${_moments.hasNext()}"
th:with="tag = ${not #lists.isEmpty(param.tag) ? '?tag='+param.tag : ''},_page = ${_moments.page+1}"> th:with="tag = ${not #lists.isEmpty(param.tag) ? '?tag='+param.tag : ''},_page = ${_moments.page+1}">
<a th:data="${'/moments/page/'+_page+tag+'?preview-theme=theme-pix'}" th:text="${theme.config.base_set.site_page}"></a> <a th:data="${'/moments/page/'+_page+tag}" th:text="${theme.config.base_set.site_page}"></a>
</div> </div>
</div> </div>
</th:block> </th:block>
+1 -1
View File
@@ -31,7 +31,7 @@
<div class="post_footer_meta"> <div class="post_footer_meta">
<div class="left"> <div class="left">
<span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span> <span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
<span class="comnum"><i class="ri-chat-4-line"></i><small>[[${post.stats.comment}]]</small></span> <span class="comnum"><i class="ri-chat-4-line"></i>[[${post.stats.comment}]]</span>
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}"> <a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
<i class="ri-heart-2-line"></i> <i class="ri-heart-2-line"></i>
<span>[[${post.stats.upvote}]]</span> <span>[[${post.stats.upvote}]]</span>
+1 -1
View File
@@ -28,7 +28,7 @@
[[${post.stats.visit}]] [[${post.stats.visit}]]
</span> </span>
<span class="comnum"><i class="ri-chat-4-line"></i> <span class="comnum"><i class="ri-chat-4-line"></i>
<small> [[${post.stats.comment}]] </small> <small>[[${post.stats.comment}]]</small>
</span> </span>
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}"> <a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
<i class="ri-heart-2-line"></i> <i class="ri-heart-2-line"></i>
+36 -23
View File
@@ -1,18 +1,19 @@
<th:block th:fragment="content-moment(moments)"> <th:block th:fragment="content-moment(moments)">
<div th:each="moment,iStat : ${moments}" th:id="${'post-'+moment.metadata.name}" <div th:each="moment,iStat : ${moments}" th:id="${'post-'+moment.metadata.name}"
class="loop_content p_item moment_item"> class="loop_content p_item moment_item">
<div class="p_item_inner"> <div class="p_item_inner">
<!-- 帖子控制按钮(编辑/删除) -->
<div th:if="${roleName == 'super-role' || moment.owner.name == user.name}" class="post_control"> <div th:if="${roleName == 'super-role' || moment.owner.name == user.name}" class="post_control">
<a class="post_control_btn"><i class="ri-menu-3-line"></i></a> <a class="post_control_btn"><i class="ri-menu-3-line"></i></a>
<div class="post_control_box"> <div class="post_control_box">
<div class="post_control_list round8 shadow uk-animation-slide-bottom-small uk-animation-fast" <div class="post_control_list round8 shadow uk-animation-slide-bottom-small uk-animation-fast"
th:pid="${moment.metadata.name}"> th:pid="${moment.metadata.name}">
<a class="control_edit_post control_type" uk-toggle="target: #create_post_box">编辑瞬间</a> <a class="control_edit_post control_type" uk-toggle="target: #create_post_box">编辑瞬间</a>
<a class="control_delete_post control_type">删除瞬间</a> <a class="control_delete_post control_type">删除瞬间</a>
</div> </div>
</div> </div>
</div> </div>
<!-- 用户信息(头像/名称/时间) -->
<div class="list_user_meta"> <div class="list_user_meta">
<div class="avatar"> <div class="avatar">
<img th:src="@{${moment.owner.avatar}}"> <img th:src="@{${moment.owner.avatar}}">
@@ -20,55 +21,58 @@
<div class="name"> <div class="name">
[[${moment.owner.displayName}]] [[${moment.owner.displayName}]]
<time itemprop="datePublished" <time itemprop="datePublished"
th:datetime="${#dates.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}"> th:datetime="${#dates.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}">
<th:block th:replace="~{modules/widgets/time :: time(${moment.spec.releaseTime})}"></th:block> <th:block th:replace="~{modules/widgets/time :: time(${moment.spec.releaseTime})}"></th:block>
</time> </time>
</div> </div>
</div> </div>
<!-- 内容区域 -->
<div class="blog_content"> <div class="blog_content">
<div class="entry-content" th:with="content=${moment.spec.content}"> <div class="entry-content" th:with="content=${moment.spec.content}">
<div class="p_title"></div> <div class="p_title"></div>
<div class="t_content" th:utext="${content.html}"> <!-- 内容容器(仅新增moment-collapse-container类) -->
<div class="t_content moment-collapse-container" th:utext="${content.html}">
<th:block th:utext="${content.html}"></th:block> <th:block th:utext="${content.html}"></th:block>
</div> </div>
<th:block th:replace="~{'macro/tpl/moment-medium'}" /> <th:block th:replace="~{'macro/tpl/moment-medium'}" />
</div> </div>
<!-- IP地址显示 -->
<span class="ip_loca" th:if="${not #strings.isEmpty(moment.metadata.annotations.mylocal)}"> <span class="ip_loca" th:if="${not #strings.isEmpty(moment.metadata.annotations.mylocal)}">
<i class="ri-map-pin-2-line"></i> <i class="ri-map-pin-2-line"></i>
[[${moment.metadata.annotations.mylocal}]] [[${moment.metadata.annotations.mylocal}]]
</span> </span>
<!-- 底部操作栏 -->
<div class="entry-footer"> <div class="entry-footer">
<div class="post_footer_meta"> <div class="post_footer_meta">
<!-- 左侧(点赞/分享) -->
<div class="left"> <div class="left">
<a class="up_like " data-action="up" data-key="moment" th:data-id="${moment.metadata.name}"> <a class="up_like " data-action="up" data-key="moment" th:data-id="${moment.metadata.name}">
<i class="ri-heart-2-line"></i> <i class="ri-heart-2-line"></i>
<span th:text="${moment.stats.upvote}"></span> <span th:text="${moment.stats.upvote}"></span>
</a> </a>
<div class="pix_share_btn" th:with="_cover = ${not #strings.isEmpty(theme.config.moments.banner) ? theme.config.moments.banner : '/themes/theme-pix/assets/img/banner.jpg'}"> <div class="pix_share_btn"
<a class="pix_icon share_btn_icon cr_poster" th:with="_cover = ${not #strings.isEmpty(theme.config.moments.banner) ? theme.config.moments.banner : '/themes/theme-pix/assets/img/banner.jpg'}">
th:poster-data="${moment.metadata.name}" <a class="pix_icon share_btn_icon cr_poster" th:poster-data="${moment.metadata.name}"
th:banner = "${_cover}" th:banner="${_cover}" th:uk-toggle="|target: #share_modal_${moment.metadata.name}|"
th:uk-toggle="|target: #share_modal_${moment.metadata.name}|" uk-tooltip="title: 瞬间分享; pos: top;" tabindex="0" title=""
uk-tooltip="title: 瞬间分享; pos: top;" tabindex="0" title="" aria-describedby="uk-tooltip-250" aria-expanded="false"><i
aria-describedby="uk-tooltip-250" aria-expanded="false"><i
class="ri-share-forward-box-line"></i></a> class="ri-share-forward-box-line"></i></a>
<div th:id="|share_modal_${moment.metadata.name}|" class="uk-flex-top poster_modal uk-modal" <div th:id="|share_modal_${moment.metadata.name}|"
uk-modal> class="uk-flex-top poster_modal uk-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
<button class="uk-modal-close-outside uk-icon uk-close" <button class="uk-modal-close-outside uk-icon uk-close" type="button"
type="button" uk-close></button> uk-close></button>
<div class="poster_box_ap"></div> <div class="poster_box_ap"></div>
<div class="post_share_box hide"> <div class="post_share_box hide">
<a th:onclick="handleShare('wb','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')" <a th:onclick="handleShare('wb','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
uk-tooltip="title: 微博分享; pos: top;" target="_blank"> uk-tooltip="title: 微博分享; pos: top;" target="_blank">
<i class="ri-weibo-line"></i></a> <i class="ri-weibo-line"></i></a>
<a th:onclick="handleShare('qzone','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')" <a th:onclick="handleShare('qzone','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
uk-tooltip="title: QQ分享; pos: top;" target="_blank"> uk-tooltip="title: QQ分享; pos: top;" target="_blank">
<i class="ri-chrome-line"></i> <i class="ri-chrome-line"></i>
</a> </a>
<a th:onclick="handleShare('qq','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')" <a th:onclick="handleShare('qq','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
uk-tooltip="title: QQ好友分享; pos: top;" target="_blank"> uk-tooltip="title: QQ好友分享; pos: top;" target="_blank">
<i class="ri-qq-line"></i> <i class="ri-qq-line"></i>
</a> </a>
<a th:onclick="handleShare('copy','','','[(${'/moments/'+moment.metadata.name})]')" <a th:onclick="handleShare('copy','','','[(${'/moments/'+moment.metadata.name})]')"
@@ -83,17 +87,26 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧(评论数 + 新增标签显示) -->
<div class="right" th:if="${(not theme.config.com.com_close) && haloCommentEnabled}"> <div class="right" th:if="${(not theme.config.com.com_close) && haloCommentEnabled}">
<!-- 新增:标签显示(样式与分类一致) -->
<th:block th:if="${not #lists.isEmpty(moment.spec.tags)}">
<div class="normal_cat"># [[${moment.spec.tags[0]}]]</div>
</th:block>
<span class="moment_tag_gap"></span>
<span class="comnum show_comment" th:pid="${moment.metadata.name}"><i <span class="comnum show_comment" th:pid="${moment.metadata.name}"><i
class="ri-message-3-line"></i>[[${moment.stats.totalComment}]]</span> class="ri-message-3-line"></i>[[${moment.stats.totalComment}]]</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 评论区 -->
<div th:if="${(not theme.config.com.com_close) && haloCommentEnabled}" th:id="${'halo-comment-'+moment.metadata.name}" class="topic_comments_wrap" style="display: none"> <div th:if="${(not theme.config.com.com_close) && haloCommentEnabled}"
th:id="${'halo-comment-'+moment.metadata.name}" class="topic_comments_wrap" style="display: none">
<div class="topic_comments comments comments-area" data="moment"> <div class="topic_comments comments comments-area" data="moment">
<div class="toi_comments_main halo-comment"> <div class="toi_comments_main halo-comment">
<th:block th:replace="~{modules/widgets/halo-comment :: halo-comment(name=${moment.metadata.name},kind='Moment',group='moment.halo.run')}"></th:block> <th:block
th:replace="~{modules/widgets/halo-comment :: halo-comment(name=${moment.metadata.name},kind='Moment',group='moment.halo.run')}">
</th:block>
</div> </div>
</div> </div>
</div> </div>
+1 -1
View File
@@ -1,5 +1,5 @@
<section class="no-results not-found"> <section class="no-results not-found">
<div class="page-content no_resault"> <div class="page-content no_resault">
<img src="/themes/theme-pix/assets/img/nodata.png"> <img src="/upload/nodata.png">
</div> </div>
</section> </section>
+43 -45
View File
@@ -1,54 +1,52 @@
<div th:id="${'post-'+post.metadata.name}" <div th:id="${'post-'+post.metadata.name}"
class="loop_content p_item uk-animation-slide-bottom-small" th:classappend="${post.spec.pinned ? 'sticky' :''}"> class="loop_content p_item uk-animation-slide-bottom-small" th:classappend="${post.spec.pinned ? 'sticky' :''}">
<div class="normal_item_inner"> <div class="normal_item_inner">
<div class="normal_content"> <div class="normal_card_content">
<div class="entry-content"> <div class="feature round12">
<h2 class="entry-title"><a th:href="@{${post.status.permalink}}" rel="bookmark">[[${post.spec.title}]]</a></h2> <a th:href="@{${post.status.permalink}}"
<div class="entry_meta"> th:with="cover_img=${#strings.contains(theme.config.post.post_banner,'http') ? ((#strings.contains(theme.config.post.post_banner,'?') ? theme.config.post.post_banner : theme.config.post.post_banner+'?')+','+post.spec.title): theme.config.post.post_banner}">
<span class="nickname">@[[${post.owner.displayName}]] <img class="round12 shadow lazy"
</span> - <time itemprop="datePublished" th:datetime="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"> th:with="_cover = ${#strings.isEmpty(post.spec.cover) ? cover_img : thumbnail.gen(post.spec.cover, 's')}"
<th:block th:replace="~{modules/widgets/time :: time(${post.spec.publishTime})}"></th:block> th:data-src="${_cover}" alt="">
</time> </a>
</div> </div>
<th:block th:if="${not #strings.isEmpty(post.status.excerpt)}"> <div class="card_right">
<p th:with="post_word_max = ${#conversions.convert(theme.config.post.post_word_max, 'java.lang.Integer') >= 0 ? theme.config.post.post_word_max : 100 }, <div class="entry-content">
excerpt = ${#strings.length(post.status.excerpt) > #conversions.convert(post_word_max, 'java.lang.Integer') ? post_word_max : #strings.length(post.status.excerpt)}"> <h2 class="entry-title"><a th:href="@{${post.status.permalink}}" rel="bookmark">[[${post.spec.title}]]</a></h2>
[[${#strings.substring(post.status.excerpt,0,excerpt)+'...'}]] <div class="entry_meta">
</p> <span class="nickname">@[[${post.owner.displayName}]]</span> - <time itemprop="datePublished"
</th:block> th:datetime="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
<div class="feature round12"> <th:block th:replace="~{modules/widgets/time :: time(${post.spec.publishTime})}"></th:block></time>
<a th:href="@{${post.status.permalink}}"
th:with="cover_img=${#strings.contains(theme.config.post.post_banner,'http') ? ((#strings.contains(theme.config.post.post_banner,'?') ? theme.config.post.post_banner : theme.config.post.post_banner+'?')+','+post.spec.title): theme.config.post.post_banner}">
<img class="round12 shadow lazy"
th:with="_cover = ${#strings.isEmpty(post.spec.cover) ? cover_img : thumbnail.gen(post.spec.cover, 'm')}"
th:src="@{/assets/img/lazyload.png}"
th:data-src="${_cover}" alt="">
</a>
</div>
</div><!-- .entry-content -->
<div class="entry-footer">
<div class="post_footer_meta">
<div class="left">
<span class="post_views"><i class="ri-eye-line"></i>
[[${post.stats.visit}]]
</span>
<span class="comnum"><i class="ri-chat-4-line"></i>
<small> [[${post.stats.comment}]] </small>
</span>
<a class="up_like " data-key="post" data-action="up" th:data-id="${post.metadata.name}">
<i class="ri-heart-2-line"></i>
<span>[[${post.stats.upvote}]]</span>
</a>
</div>
<div class="right">
<span th:if="${post.spec.pinned}" class="sticky_icon"><i class="ri-fire-line"></i> TOP</span>
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<div class="normal_cat"># [[${post.categories[0].spec.displayName}]]</div>
</th:block>
</div> </div>
<th:block th:if="${not #strings.isEmpty(post.status.excerpt)}">
<p th:with="post_word_max = ${#conversions.convert(theme.config.post.post_word_max, 'java.lang.Integer') >= 0 ? theme.config.post.post_word_max : 100 },
excerpt = ${#strings.length(post.status.excerpt) > #conversions.convert(post_word_max, 'java.lang.Integer') ? post_word_max : #strings.length(post.status.excerpt)}">
[[${#strings.substring(post.status.excerpt,0,excerpt)+'...'}]]
</p>
</th:block>
</div> </div>
</div><!-- .entry-footer --> <div class="entry-footer">
<div class="post_footer_meta">
<div class="left">
<span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
<span class="comnum"><i class="ri-chat-4-line"></i><small>[[${post.stats.comment}]]</small></span>
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
<i class="ri-heart-2-line"></i>
<span>[[${post.stats.upvote}]]</span>
</a>
</div>
<div class="right">
<span th:if="${post.spec.pinned}" class="sticky_icon"><i class="ri-fire-line"></i> TOP</span>
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<div class="normal_cat"># [[${post.categories[0].spec.displayName}]]</div>
</th:block>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
-6
View File
@@ -4,12 +4,6 @@
<i class="ri-focus-2-line"></i> <i class="ri-focus-2-line"></i>
<h1 class="entry-title" th:text="${singlePage.spec.title}"></h1> <h1 class="entry-title" th:text="${singlePage.spec.title}"></h1>
</div> </div>
<div class="right">
<time itemprop="datePublished"
th:datetime="${#dates.format(singlePage.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
[[${#dates.format(singlePage.spec.publishTime, 'yyyy年MM月dd日')}]]
</time>
</div>
</header> </header>
<div class="entry-content single-content"> <div class="entry-content single-content">
+43 -33
View File
@@ -1,33 +1,43 @@
<th:block th:if="${not #lists.isEmpty(content.medium)}"> <th:block th:if="${not #lists.isEmpty(content.medium)}">
<div class="img_list" th:if="${#strings.contains(content.medium,'PHOTO')}">
<div class="list_inner" th:num="${content.medium.size}">
<span th:each="momentItem : ${content.medium}" th:if="${momentItem.type.name == 'PHOTO'}"
class="fancybox mo_img" th:href="${momentItem.url}"
th:data-fancybox="${'post-images-'+moment.metadata.name}">
<img class="lazy" th:src="@{/assets/img/lazyload.png}" th:data-src="${momentItem.url}">
</span>
</div>
</div>
<div class="video_list" th:if="${#strings.contains(content.medium,'VIDEO')}">
<div class="list_inner">
<th:block th:each="momentItem : ${content.medium}">
<div class="pix_local_player"
th:if="${momentItem.type.name == 'VIDEO' && momentItem.originType != 'video/bili'}">
<div class="video_play_btn">
<a><i class="ri-play-mini-line"></i></a>
</div>
<video th:src="${momentItem.url}" id="pix_video_player" objectfit="cover" x5-video-player-type="h5"
onplay="stopOtherMedia(this)"></video>
</div>
<div class="pix_bili_player"
th:if="${momentItem.type.name == 'VIDEO' && momentItem.originType == 'video/bili'}">
<iframe th:src="|//player.bilibili.com/player.html?bvid=${momentItem.url}&autoplay=0&page=1|"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
</th:block>
<div class="img_list">
<div class="list_inner" th:num="${content.medium.size}">
<th:block th:each="momentItem : ${content.medium}">
<th:block th:with="isStrictVideo=${momentItem.type.name == 'VIDEO'},
isVideoExt=${#strings.endsWith(#strings.toLowerCase(momentItem.url), '.mp4')
|| #strings.endsWith(#strings.toLowerCase(momentItem.url), '.webm')
|| #strings.endsWith(#strings.toLowerCase(momentItem.url), '.ogv')}">
<div class="pix_bili_player" th:if="${isStrictVideo && momentItem.originType == 'video/bili'}">
<iframe th:src="|//player.bilibili.com/player.html?bvid=${momentItem.url}&autoplay=0&page=1|"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
<!-- 非 Bilibili 视频:使用 Fancybox 灯箱 -->
<span th:if="${(isStrictVideo || isVideoExt) && momentItem.originType != 'video/bili'}"
class="fancybox mo_img" th:href="${momentItem.url}"
th:data-fancybox="${'post-images-' + moment.metadata.name}" th:data-type="video">
<video th:src="${momentItem.url}" class="pix_video"
style="width:100%; border-radius:8px;"></video>
<div
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
<i class="ri-play-circle-line"
style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
</div>
</span>
<span th:if="${momentItem.type.name == 'PHOTO' && !isVideoExt}" class="fancybox mo_img"
th:href="${momentItem.url}" th:data-fancybox="${'post-images-' + moment.metadata.name}">
<img class="lazy" th:src="@{/assets/img/lazyload.png}" th:data-src="${momentItem.url}">
</span>
</th:block>
</th:block>
</div> </div>
</div> </div>
<div class="audio_list" th:if="${#strings.contains(content.medium,'AUDIO')}"> <div class="audio_list" th:if="${#strings.contains(content.medium,'AUDIO')}">
<div class="list_inner"> <div class="list_inner">
<th:block th:each="momentItem : ${content.medium}"> <th:block th:each="momentItem : ${content.medium}">
@@ -39,8 +49,7 @@
<div class="pix_player qt" th:if="${momentItem.type.name == 'AUDIO' && <div class="pix_player qt" th:if="${momentItem.type.name == 'AUDIO' &&
(momentItem.originType == 'audio/netease' || momentItem.originType == 'audio/tencent' || (momentItem.originType == 'audio/netease' || momentItem.originType == 'audio/tencent' ||
momentItem.originType == 'audio/kugou' || momentItem.originType == 'audio/kuwo')}" momentItem.originType == 'audio/kugou' || momentItem.originType == 'audio/kuwo')}"
th:id="${momentItem.url}" th:id="${momentItem.url}" th:type="${momentItem.originType}">
th:type="${momentItem.originType}">
</div> </div>
</th:block> </th:block>
</div> </div>
@@ -51,29 +60,29 @@
<th:block th:each="momentItem : ${content.medium}"> <th:block th:each="momentItem : ${content.medium}">
<th:block th:if="${momentItem.type.name == 'POST'}"> <th:block th:if="${momentItem.type.name == 'POST'}">
<div class="moment_card_item loop_card_item" th:pid="${momentItem.url}" <div class="moment_card_item loop_card_item" th:pid="${momentItem.url}"
th:type="${momentItem.originType}"> th:type="${momentItem.originType}">
<th:block th:if="${momentItem.originType == 'post'}"> <th:block th:if="${momentItem.originType == 'post'}">
<a th:with="post = ${postFinder.getByName(momentItem.url)}" <a th:with="post = ${postFinder.getByName(momentItem.url)}"
th:href="@{${post.status.permalink}}" target="_blank"> th:href="@{${post.status.permalink}}">
<div class="left"><img th:src="${post.spec.cover}"></div> <div class="left"><img th:src="${post.spec.cover}"></div>
<div class="right"> <div class="right">
<h4 th:text="${post.spec.title}"></h4> <h4 th:text="${post.spec.title}"></h4>
<div class="content"> <div class="content">
<th:block th:if="${!post.spec.excerpt.autoGenerate}" <th:block th:if="${!post.spec.excerpt.autoGenerate}"
th:text="${post.spec.excerpt.raw}" /> th:text="${post.spec.excerpt.raw}" />
</div> </div>
</div> </div>
</a> </a>
</th:block> </th:block>
<th:block th:if="${momentItem.originType == 'page'}"> <th:block th:if="${momentItem.originType == 'page'}">
<a th:with="page = ${singlePageFinder.getByName(momentItem.url)}" <a th:with="page = ${singlePageFinder.getByName(momentItem.url)}"
th:href="@{${page.status.permalink}}" target="_blank"> th:href="@{${page.status.permalink}}" target="_blank">
<div class="left"><img th:src="${page.spec.cover}"></div> <div class="left"><img th:src="${page.spec.cover}"></div>
<div class="right"> <div class="right">
<h4 th:text="${page.spec.title}"></h4> <h4 th:text="${page.spec.title}"></h4>
<div class="content"> <div class="content">
<th:block th:if="${!page.spec.excerpt.autoGenerate}" <th:block th:if="${!page.spec.excerpt.autoGenerate}"
th:text="${page.spec.excerpt.raw}" /> th:text="${page.spec.excerpt.raw}" />
</div> </div>
</div> </div>
</a> </a>
@@ -86,4 +95,5 @@
</div> </div>
</div> </div>
</th:block> </th:block>
+33 -21
View File
@@ -1,28 +1,40 @@
<th:block th:fragment="footer"> <th:block th:fragment="footer">
<script th:if="${pluginFinder.available('plugin-douban')}" th:src="@{/plugins/plugin-douban/assets/static/db.min.js?v='1.1.6'}" class="pjax"></script> <th:block th:with="customJsVersion='1.2.5-1'">
<script th:src="@{/assets/libs/axios/axios.min.js}" id="axios.min-js"></script>
<script th:src="@{/assets/libs/jsencrypt/jsencrypt.min.js}" id="jsencrypt.min-js"></script> <div class="center-img-container" id="centerImgContainer">
<script th:src="@{/assets/libs/jquery/jquery.min.js}" id="jquery.min-js"></script> <img class="center-img" id="targetImg">
<script th:src="@{/assets/libs/qrious/qrious.min.js}"></script> </div>
<script th:src="@{/assets/libs/uikit/uikit.min.js}" id="uikit.js-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.cookie.js}" id="jquery.cookie-js"></script> <script th:if="${pluginFinder.available('plugin-douban')}" th:src="@{/plugins/plugin-douban/assets/static/db.min.js(v=${customJsVersion})}" class="pjax"></script>
<script th:src="@{/assets/libs/fancybox/jquery.fancybox.min.js}" id="fancybox.js-js"></script> <script th:src="@{/assets/libs/axios/axios.min.js(v=${customJsVersion})}" id="axios.min-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.form.js}" id="jquery.form-js"></script> <script th:src="@{/assets/libs/jsencrypt/jsencrypt.min.js(v=${customJsVersion})}" id="jsencrypt.min-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.validate.js}" id="jquery.validate-js"></script> <script th:src="@{/assets/libs/jquery/jquery.min.js(v=${customJsVersion})}" id="jquery.min-js"></script>
<script th:src="@{/assets/libs/message/coco-message.js}" id="mesage-js"></script> <script th:src="@{/assets/libs/qrious/qrious.min.js(v=${customJsVersion})}"></script>
<script th:src="@{/assets/libs/lazyload/lazyload.min.js}" id="lazyload-js"></script> <script th:src="@{/assets/libs/uikit/uikit.min.js(v=${customJsVersion})}" id="uikit.js-js"></script>
<script th:src="@{/assets/js/moment-push.js?v={version}(version=${theme.spec.version})}" id="moment-push-js"></script> <script th:src="@{/assets/libs/jquery/jquery.cookie.js(v=${customJsVersion})}" id="jquery.cookie-js"></script>
<script th:src="@{/assets/libs/nprogress/nprogress.js}" id="nprogress-js"></script> <script th:src="@{/assets/libs/fancybox/jquery.fancybox.min.js(v=${customJsVersion})}" id="fancybox.js-js"></script>
<script th:src="@{/assets/js/poster.js?v={version}(version=${theme.spec.version})}" id="poster-js"></script> <script th:src="@{/assets/libs/jquery/jquery.form.js(v=${customJsVersion})}" id="jquery.form-js"></script>
<script th:src="@{/assets/libs/pjax/pjax.min.js}" id="pjax-js"></script> <script th:src="@{/assets/libs/jquery/jquery.validate.js(v=${customJsVersion})}" id="jquery.validate-js"></script>
<script th:src="@{/assets/js/pixplayer.js?v={version}(version=${theme.spec.version})}" id="pixplayer.js-js"></script> <script th:src="@{/assets/libs/message/coco-message.js(v=${customJsVersion})}" id="mesage-js"></script>
<script th:src="@{/assets/js/pix.js?v={version}(version=${theme.spec.version})}" id="pix-js"></script> <script th:src="@{/assets/libs/lazyload/lazyload.min.js(v=${customJsVersion})}" id="lazyload-js"></script>
<script th:src="@{/assets/js/app.js?v={version}(version=${theme.spec.version})}" id="app-js"></script> <script th:src="@{/assets/libs/nprogress/nprogress.js(v=${customJsVersion})}" id="nprogress-js"></script>
<script th:src="@{/assets/libs/pjax/pjax.min.js(v=${customJsVersion})}" id="pjax-js"></script>
<script th:src="@{/assets/js/moment-push.js(v=${customJsVersion})}" id="moment-push-js"></script>
<script th:src="@{/assets/js/poster.js(v=${customJsVersion})}" id="poster-js"></script>
<script th:src="@{/assets/js/pixplayer.js(v=${customJsVersion})}" id="pixplayer.js-js"></script>
<script th:src="@{/assets/js/pix.js(v=${customJsVersion})}" id="pix-js"></script>
<script th:src="@{/assets/js/app.js(v=${customJsVersion})}" id="app-js"></script>
<script th:src="@{/assets/js/anian.js(v=${customJsVersion})}" id="anian-js"></script>
<link rel="prefetch" href="/upload/ma-shan-zheng.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/upload/mu-yao-sui-xin-shou-xie-ti.woff2" as="font" type="font/woff2" crossorigin>
</th:block>
<!-- 自定义js --> <!-- 自定义js -->
<script type="text/javascript" th:if="${not #strings.isEmpty(theme.config.custom.code_js)}" <script type="text/javascript" th:if="${not #strings.isEmpty(theme.config.custom.code_js)}"
th:utext="${theme.config.custom.code_js}"> th:utext="${theme.config.custom.code_js}">
</script>
</script>
<th:block th:if="${not #strings.isEmpty(theme.config.custom.footer_html)}" <th:block th:if="${not #strings.isEmpty(theme.config.custom.footer_html)}"
th:utext="${theme.config.custom.footer_html}"> </th:block> th:utext="${theme.config.custom.footer_html}"> </th:block>
+85 -94
View File
@@ -1,109 +1,100 @@
<th:block th:fragment="head"> <th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-1'}">
<th:block th:replace="~{'modules/variables/msg'}" />
<th:block th:replace="~{'modules/variables/msg'}"/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title th:text="${site_title}"></title> <title th:text="${site_title}"></title>
<link rel="shortcut icon" th:href="@{${theme.config.base_set.favicon}}" title="Favicon"> <link rel="shortcut icon" th:href="@{${theme.config.base_set.favicon}}" title="Favicon">
<th:block th:replace="~{modules/variables/cst-script-parameter}"/>
<meta name="robots" content="max-image-preview:large"> <meta name="robots" content="max-image-preview:large">
<th:block th:if="${not #strings.isEmpty(theme.config.custom.head_html)}" <style>
th:utext="${theme.config.custom.head_html}"> </th:block> .dl-warning-card { overflow: hidden; position: fixed; bottom: 1rem; left: 0; right: 0; margin: 0 auto; background-color: #ffffff; border-radius: 0.5rem; max-width: 720px; width: calc(100% - 2rem); box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 9999; display: none; opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; border-left: 4px solid #f59e0b; }
.dl-warning-header { display: flex; align-items: center; padding: 1rem; gap: 1rem; }
<meta property="og:title" th:content="${site_title}"> .dl-warning-image { flex-shrink: 0; background-color: #fef3c7; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; }
<meta property="og:site_name" th:content="${site.title}"> .dl-warning-image svg { color: #f59e0b; width: 1.25rem; height: 1.25rem; }
<meta property="og:type" content="website"> .dl-warning-content { flex: 1; text-align: left; word-wrap: break-word; word-break: break-all; min-width: 0; }
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css?v={version}(version=${theme.spec.version})}" media="all"> .dl-warning-title { color: #F59E0B; font-size: 0.95rem; font-weight: 600; line-height: 1.3rem; display: block; margin-bottom: 0.25rem; }
<style id="classic-theme-styles-inline-css"> .dl-warning-message { color: #6b7280; font-size: 0.875rem; line-height: 1.25rem; margin: 0; }
/*! This file is auto-generated */ .dl-warning-actions { display: flex; flex-direction: row; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.wp-block-button__link { .dl-warning-desactivate { padding: 0.375rem 0.75rem; background-color: #f59e0b; color: #ffffff; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; justify-content: center; align-items: center; display: inline-flex; border-radius: 0.375rem; border: none; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); cursor: pointer; white-space: nowrap; }
color: #fff; .dl-warning-desactivate.loading { background-color: #d97706; cursor: not-allowed; opacity: 0.8; pointer-events: none; }
background-color: #32373c; .dl-warning-desactivate.loading::after { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid rgba(255,255,255,0.5); border-top-color: #ffffff; border-radius: 50%; margin-left: 0.5rem; margin-right: 0.25rem; animation: spin 1s linear infinite; flex-shrink: 0; }
border-radius: 9999px; .dl-warning-desactivate:not(.loading):hover { background-color: #fbbf24; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.06); transition: all 0.2s ease-in-out; }
box-shadow: none; .dl-warning-cancel { padding: 0.375rem 0.75rem; background-color: #ffffff; color: #374151; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; justify-content: center; align-items: center; display: inline-flex; border-radius: 0.375rem; border: 1px solid #d1d5db; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); cursor: pointer; white-space: nowrap; }
text-decoration: none; .dl-warning-cancel:hover { background-color: #ededed; border-color: #e5e7eb; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.06); transition: all 0.2s ease-in-out; }
padding: calc(.667em + 2px) calc(1.333em + 2px); @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
font-size: 1.125em @media (max-width: 480px) {
} .dl-warning-card { bottom: 1rem; width: calc(100% - 1rem); max-width: 100%; }
.dl-warning-header { padding: 0.75rem; gap: 0.75rem; align-items: center; }
.wp-block-file__button { .dl-warning-image { width: 2rem; height: 2rem; }
background: #32373c; .dl-warning-image svg { width: 1rem; height: 1rem; }
color: #fff; .dl-warning-title { font-size: 0.9rem; }
text-decoration: none .dl-warning-message { font-size: 0.85rem; }
} .dl-warning-actions { flex-direction: column; gap: 0.375rem; align-items: stretch; flex-shrink: 0; width: auto; margin-top: 0; }
</style> .dl-warning-desactivate, .dl-warning-cancel { font-size: 0.75rem; padding: 0.25rem 0.5rem; width: 100%; }
<link rel="stylesheet" id="pix-style-css" th:href="@{/assets/css/style.css?v={version}(version=${theme.spec.version})}" media="all"> .dl-warning-content { min-width: 0; word-wrap: break-word; word-break: break-all; }
<link rel="stylesheet" id="fancybox.css-css" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css}" media="all">
<link rel="stylesheet" id="nprogress.css-css" th:href="@{/assets/libs/nprogress/nprogress.css}" media="all">
<link rel="stylesheet" id="iconfont-css" th:href="@{/assets/libs/fonts/remixicon.css}" media="all">
<link rel="stylesheet" id="uikit.css-css" th:href="@{/assets/libs/uikit/uikit.min.css}" media="all">
<link rel="stylesheet" id="main.css-css" th:href="@{/assets/css/main.css?v={version}(version=${theme.spec.version})}" media="all">
<link th:if="${theme.config.style.theme_set != 'green-normal' && theme.config.style.theme_set != 'dark-theme'}"
rel="stylesheet" id="theme.color-css" th:href="@{/assets/css/{theme_set}.css?v={version}(version=${theme.spec.version},theme_set=${theme.config.style.theme_set})}" media="all">
<link rel="stylesheet" id="dark-css" th:href="@{/assets/css/dark.css?v={version}(version=${theme.spec.version})}" media="all">
<link rel="stylesheet" id="mobile-css" th:href="@{/assets/css/mobile.css?v={version}(version=${theme.spec.version})}" media="all">
<link rel="stylesheet" id="album-css" th:href="@{/assets/css/album.css?v={version}(version=${theme.spec.version})}" media="all">
<script th:src="@{/assets/libs/imgstatus/imgStatus.min.js}" id="imgstatus-js"></script>
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}" id="waterfall-js"></script>
<script th:if="${pluginFinder.available('PluginPrismJS')}" src="/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js"></script>
<link th:if="${pluginFinder.available('plugin-douban')}" rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css}" type="text/css"
media="screen">
<style type="text/css"
th:if="${not #strings.isEmpty(theme.config.custom.code_css)}"
th:utext="${theme.config.custom.code_css}" ></style>
<style type="text/css">
:root {
--toc-color: [(${theme.config.post.tocColor})];
}
</style>
<style type="text/css" th:if="${!theme.config.post.toc.mobile_open}">
@media screen and (max-width: 768px) {
.listree-box {
display: none !important;
}
}
</style>
<!-- 自定义css -->
<style type="text/css" th:if="${not #strings.isEmpty(theme.config.base_set.custom_fonts)}">
@font-face {
font-style: normal;
font-family: "HarmonyOS_M";
src: url("[(${theme.config.base_set.custom_fonts})]") format("truetype");
font-display: swap;
} }
</style> </style>
<div class="dl-warning-card" id="lineCard">
<div class="dl-warning-header">
<div class="dl-warning-image"><svg aria-hidden="true" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" stroke-linejoin="round" stroke-linecap="round"></path></svg></div>
<div class="dl-warning-content"><span class="dl-warning-title" id="cardHeading"></span><p class="dl-warning-message" id="cardPara"></p></div>
<div class="dl-warning-actions"><button class="dl-warning-desactivate" id="switchBtn"></button><button class="dl-warning-cancel" id="cancelBtn">取消</button></div>
</div>
</div>
<script>
const card=document.getElementById('lineCard'),heading=document.getElementById('cardHeading'),para=document.getElementById('cardPara'),switchBtn=document.getElementById('switchBtn'),cancelBtn=document.getElementById('cancelBtn');
const showCard=()=>{card.style.display='block';setTimeout(()=>{card.style.opacity='1';card.style.transform='translateY(0)';},10)};
const hideCard=()=>{card.style.opacity='0';card.style.transform='translateY(20px)';setTimeout(()=>{card.style.display='none'},300)};
const handleSwitch=(baseUrl)=>{switchBtn.classList.add('loading');switchBtn.textContent='切换中';switchBtn.disabled=true;const currentScrollTop=window.scrollY||document.documentElement.scrollTop;document.cookie=`scrollParam=${currentScrollTop}; path=/; domain=anian.cc`;let finalUrl=baseUrl+location.pathname+location.search+location.hash;setTimeout(()=>location.href=finalUrl,500)};
let isResourceLoaded=false,pageLoadTimeoutTimer=null,isLoadTimeoutAborted=false;
const currentHost=location.hostname,isMainDomain=currentHost.includes('anian.cc')&&!currentHost.includes('www.anian.cc');
cancelBtn.addEventListener('click',hideCard);
const scrollTop = document.cookie.split('; ').find(c => c.startsWith('scrollParam='))?.split('=')[1] ? decodeURIComponent(document.cookie.split('; ').find(c => c.startsWith('scrollParam='))?.split('=')[1]) : null;
if(!isMainDomain && !scrollTop && !isNaN(scrollTop)){heading.textContent='温馨提示';para.textContent='当前为备用线路,若主线路正常,请优先选择主线路';switchBtn.textContent='切换主线路';switchBtn.onclick=()=>handleSwitch('https://anian.cc');showCard();}
if(isMainDomain){pageLoadTimeoutTimer=setTimeout(()=>{if(!isResourceLoaded){isLoadTimeoutAborted=true;heading.textContent='线路异常';para.textContent='当前线路拥塞,若本地网络正常,可尝试切换至备用线路';switchBtn.textContent='切换副线路';switchBtn.onclick=()=>handleSwitch('https://www.anian.cc');showCard();}},15000);window.onload=()=>{isResourceLoaded=true;clearTimeout(pageLoadTimeoutTimer);if(isLoadTimeoutAborted)return;const xhr=new XMLHttpRequest();xhr.open('GET',`/upload/%E4%B8%8B%E8%BD%BD%20(9).mp4?_t=${Date.now()}`,true);let t=setTimeout(()=>{xhr.abort();heading.textContent='线路异常';para.textContent='当前线路拥塞,若本地网络正常,可尝试切换至备用线路';switchBtn.textContent='切换副线路';switchBtn.onclick=()=>handleSwitch('https://www.anian.cc');showCard()},7500);xhr.onload=xhr.onerror=xhr.onabort=()=>clearTimeout(t);xhr.send();}}
</script>
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="pix-style-css" th:href="@{/assets/css/style.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="fancybox.css-css" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="nprogress.css-css" th:href="@{/assets/libs/nprogress/nprogress.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="iconfont-css" th:href="@{/assets/libs/fonts/remixicon.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="uikit.css-css" th:href="@{/assets/libs/uikit/uikit.min.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="main.css-css" th:href="@{/assets/css/main.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="dark-css" th:href="@{/assets/css/dark.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="mobile-css" th:href="@{/assets/css/mobile.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="album-css" th:href="@{/assets/css/album.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="anian-css" th:href="@{/assets/css/anian.css(v=${customJsVersion})}" media="all">
<link th:if="${theme.config.style.theme_set != 'green-normal' && theme.config.style.theme_set != 'dark-theme'}" rel="stylesheet" id="theme.color-css" th:href="@{/assets/css/{theme_set}.css(theme_set=${theme.config.style.theme_set},v=${customJsVersion})}" media="all">
<link th:if="${pluginFinder.available('plugin-douban')}" rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css(v=${customJsVersion})}" type="text/css" media="screen">
<style th:if="${not #strings.isEmpty(theme.config.custom.code_css)}" th:utext="${theme.config.custom.code_css}"></style>
<style>:root { --toc-color: [(${theme.config.post.tocColor})]; } .wp-block-button__link { color: #fff; background-color: #32373c; border-radius: 9999px; text-decoration: none; padding: .6em 1.3em; } .wp-block-file__button { background: #32373c; color: #fff; text-decoration: none; }</style>
<style th:if="${!theme.config.post.toc.mobile_open}">@media screen and (max-width: 768px) { .listree-box { display: none !important; } }</style>
<style th:if="${not #strings.isEmpty(theme.config.base_set.custom_fonts)}">@font-face { font-family: "HarmonyOS_M"; src: url("[(${theme.config.base_set.custom_fonts})]") format("truetype"); font-display: swap; }</style>
<th:block th:replace="~{modules/variables/cst-script-parameter}" />
<th:block th:if="${not #strings.isEmpty(theme.config.custom.head_html)}" th:utext="${theme.config.custom.head_html}"></th:block>
<meta property="og:title" th:content="${site_title}"><meta property="og:site_name" th:content="${site.title}"><meta property="og:type" content="website">
<script th:src="@{/assets/libs/imgstatus/imgStatus.min.js(v=${customJsVersion})}" id="imgstatus-js"></script>
<script th:src="@{/assets/libs/waterfall/waterfall.min.js(v=${customJsVersion})}" id="waterfall-js"></script>
<script th:if="${pluginFinder.available('PluginPrismJS')}" th:src="@{/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js(v=${customJsVersion})}"></script>
<th:block th:replace="~{'modules/variables/moments-img-style'}"></th:block> <th:block th:replace="~{'modules/variables/moments-img-style'}"></th:block>
<script> <script>
(win => { (win => {
win.getCookie = function(name) { win.getCookie = (name) => {
var cookieArr = document.cookie.split(';'); let pair = document.cookie.split('; ').find(row => row.startsWith(name + '='));
for (var i = 0; i < cookieArr.length; i++) { return pair ? decodeURIComponent(pair.split('=')[1]) : "";
var cookiePair = cookieArr[i].split('='); };
var cookieName = cookiePair[0].trim(); win.darkmode = () => {
if (cookieName === name) { const dark = getCookie("dark");
return decodeURIComponent(cookiePair[1]); return dark ? (dark === 'dark') : (Theme.theme_set === 'dark-theme');
} };
} if (darkmode()) document.documentElement.classList.add('dark');
return "";
}
win.darkmode = function () {
$darkmode = false;
const dark = getCookie("dark")
if (dark) {
$darkmode = (dark == 'dark') ? true : false;
} else if (Theme.theme_set == 'dark-theme') {
$darkmode = true;
}
return $darkmode;
}
if (darkmode()) {
document.documentElement.classList.add('dark')
}
})(window) })(window)
</script> </script>
</th:block> </th:block>
+3 -2
View File
@@ -20,8 +20,9 @@
</header><!-- #masthead --> </header><!-- #masthead -->
<div class="index_banner" <div class="index_banner">
th:data-src="${theme.config.style.topbg_banner}" uk-img="loading: eager"> <div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="user_info"> <div class="user_info">
<div class="top"> <div class="top">
<div class="left"> <div class="left">
+6 -6
View File
@@ -15,8 +15,8 @@
<div id="top_ava" class="top_ava"><img th:src="${user.avatar}"></div> <div id="top_ava" class="top_ava"><img th:src="${user.avatar}"></div>
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava;pos:bottom-right;animation:uk-animation-slide-top-small"> <div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava;pos:bottom-right;animation:uk-animation-slide-top-small">
<div class="inner"> <div class="inner">
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>控制台</a> <a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>登出</a> <a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>退出登录</a>
</div> </div>
</div> </div>
@@ -24,7 +24,7 @@
</th:block> </th:block>
<div sec:authorize="isAnonymous()" class="top_tool"> <div sec:authorize="isAnonymous()" class="top_tool">
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-4-fill"></i></a> <a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-3-line"></i></a>
</div> </div>
</div> </div>
@@ -46,8 +46,8 @@
<div id="top_ava2" class="top_ava"><img th:src="${user.avatar}"></div> <div id="top_ava2" class="top_ava"><img th:src="${user.avatar}"></div>
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava2;pos:bottom-right;animation:uk-animation-slide-top-small"> <div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava2;pos:bottom-right;animation:uk-animation-slide-top-small">
<div class="inner"> <div class="inner">
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>控制台</a> <a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>登出</a> <a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>退出登录</a>
</div> </div>
</div> </div>
@@ -55,7 +55,7 @@
</th:block> </th:block>
<div sec:authorize="isAnonymous()" class="top_tool"> <div sec:authorize="isAnonymous()" class="top_tool">
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-4-fill"></i></a> <a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-3-line"></i></a>
</div> </div>
</div> </div>
+1 -1
View File
@@ -4,7 +4,7 @@
<button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""></button> <button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""></button>
<div class="msg_modal_inner"> <div class="msg_modal_inner">
<p class="no_posts"><small># 暂无消息 #</small> <p class="no_posts"><small># 暂无消息 #</small>
<img class="s_nodata" rc="/themes/theme-pix/assets/img/nodata.png"> <img class="s_nodata" rc="/upload/nodata.png">
</p> </p>
<p class="msg_limit">只显示最新10条未读和已读信息</p> <p class="msg_limit">只显示最新10条未读和已读信息</p>
</div> </div>
+6 -6
View File
@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
</div> </div>
<textarea id="topic_content" name="topic_content" placeholder="今日份分享 ! " maxlength="800"></textarea> <textarea id="topic_content" name="topic_content" placeholder="可否归来?在水一方" maxlength="800"></textarea>
</div> </div>
</div> </div>
<div class="topic_tool"> <div class="topic_tool">
@@ -67,7 +67,7 @@
<div class="local_box round8 shadow" uk-dropdown="mode: click;toggle:.loca_text;boundary: .tool_box; stretch: x;pos: top-center"> <div class="local_box round8 shadow" uk-dropdown="mode: click;toggle:.loca_text;boundary: .tool_box; stretch: x;pos: top-center">
<div class="inner"> <div class="inner">
<div class="set_local_box"><input type="text" placeholder="输入自定义位置" name="set_local" id="set_local"><a class="set_local_btn">确定</a></div> <div class="set_local_box"><input type="text" placeholder="输入自定义位置" name="set_local" id="set_local"><a class="set_local_btn">确定</a></div>
<a class="close_local">位置已开启</a> <a class="close_local">位置已开启,点击关闭</a>
</div> </div>
</div> </div>
</div> </div>
@@ -83,7 +83,7 @@
<div class="img_show" uk-sortable="handle: .t_media_item;cls-no-drag:up_img_btn;"> <div class="img_show" uk-sortable="handle: .t_media_item;cls-no-drag:up_img_btn;">
<a class="up_img_btn"> <a class="up_img_btn">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
<input type="file" name="topic_img_up" id="topic_img_up" accept="image/jpg,image/jpeg,image/png,image/gif,image/webp" multiple="multiple" title="上传图片"> <input type="file" name="topic_img_up" id="topic_img_up" accept="image/*,video/*" multiple="multiple" title="上传图片/视频">
</a> </a>
</div> </div>
@@ -92,7 +92,7 @@
<a><i class="ri-gallery-line"></i>从媒体库选择</a> <a><i class="ri-gallery-line"></i>从媒体库选择</a>
</div> </div>
<div class="up_from_cdn"> <div class="up_from_cdn">
<a><i class="ri-image-add-line"></i>插入图床图片</a> <a><i class="ri-image-add-line"></i>从链接中插入</a>
</div> </div>
</div> </div>
@@ -113,7 +113,7 @@
<input type="text" placeholder="外部图片链接" name="img_link_up" id="img_link_up"> <input type="text" placeholder="外部图片链接" name="img_link_up" id="img_link_up">
<a class="img_link_btn">插入</a><a class="img_link_cancel">取消</a> <a class="img_link_btn">插入</a><a class="img_link_cancel">取消</a>
</div> </div>
<span>支持: jpg | png | gif | webp | jpeg</span> <span>支持图片与视频类型</span>
</div> </div>
</div> </div>
@@ -123,7 +123,7 @@
<div class="form_footer"> <div class="form_footer">
<div class="admin_tool"> <div class="admin_tool">
<a href="/console" target="_blank"><i class="ri-function-line"></i> 控制台</a> <a href="/console" target="_blank"><i class="ri-function-line"></i> 管理</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i> 登出</a> <a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i> 登出</a>
</div> </div>
<div class="moment_sure"> <div class="moment_sure">
@@ -165,41 +165,82 @@
grid-area: 3 / 3 / 4 / 4; grid-area: 3 / 3 / 4 / 4;
} }
.img_list .list_inner[num='7'] span:nth-child(1) { .img_list .list_inner[num='7'] {
grid-area: 1 / 1 / 3 / 3; display: grid;
} /* 采用 6 列网格,支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
grid-template-columns: repeat(6, 1fr);
.img_list .list_inner[num='7'] span:nth-child(2) { /* 间距修正 */
grid-area: 1 / 3 / 3 / 5; gap: 6px;
} padding: 3px;
.img_list .list_inner[num='7'] span:nth-child(3) { /* 清除干扰 */
grid-area: 3 / 1 / 5 / 3; justify-content: unset;
} align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='7'] span:nth-child(4) { .img_list .list_inner[num='7'] span {
grid-area: 3 / 3 / 4 / 4; /* 清除干扰,保持稳定性 */
} margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
.img_list .list_inner[num='7'] span:nth-child(5) { /* 默认尺寸:中等 (33.3% 宽度, span 2/6) */
grid-area: 3 / 4 / 4 / 5; grid-column: span 2;
} }
.img_list .list_inner[num='7'] span:nth-child(6) { /* 第一行 (Item 1, 2):大尺寸 (50% 宽度, span 3/6) */
grid-area: 4 / 3 / 5 / 4; .img_list .list_inner[num='7'] span:nth-child(1),
} .img_list .list_inner[num='7'] span:nth-child(2) {
grid-column: span 3;
}
.img_list .list_inner[num='7'] span:nth-child(7) { /* 第三行 (Item 6, 7):大尺寸 (50% 宽度, span 3/6) */
grid-area: 4 / 4 / 5 / 5; .img_list .list_inner[num='7'] span:nth-child(6),
} .img_list .list_inner[num='7'] span:nth-child(7) {
grid-column: span 3;
}
.img_list .list_inner[num='8'] span:nth-child(8) { /* 容器设置:保持 6 列网格,用于计算 1/3 和 1/2 宽度 */
grid-area: 3 / 2 / 4 / 4; .img_list .list_inner[num='8'] {
} display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 列 */
.img_list .list_inner[num='8'] span:nth-child(8) img { max-height: 100vw;
aspect-ratio: 3;
} gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
/* 默认规则:应用到所有子项,用于第 1 行和第 3 行 (1/3 宽度) */
.img_list .list_inner[num='8'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
grid-column: span 2;
}
/* 特殊规则:仅应用于第 2 行的 2 张图片 (1/2 宽度) */
.img_list .list_inner[num='8'] span:nth-child(4),
.img_list .list_inner[num='8'] span:nth-child(5) {
/* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
grid-column: span 3;
}
/* 确保第 1 行和第 3 行的宽度不被其他 CSS 规则干扰 */
.img_list .list_inner[num='8'] span:nth-child(-n+3), /* 第 1, 2, 3 个 */
.img_list .list_inner[num='8'] span:nth-child(n+6) { /* 第 6, 7, 8 个 */
grid-column: span 2;
}
.img_list span img { .img_list span img {
@@ -9,7 +9,7 @@
<div class="left"><span class="day">[[${#dates.format(#dates.createNow(),'dd')}]]</span><span class="ym">[[${#dates.format(#dates.createNow(),'yyyy/MM')}]]</span></div><a <div class="left"><span class="day">[[${#dates.format(#dates.createNow(),'dd')}]]</span><span class="ym">[[${#dates.format(#dates.createNow(),'yyyy/MM')}]]</span></div><a
class="change"><i class="ri-refresh-line"></i></a> class="change"><i class="ri-refresh-line"></i></a>
</div> </div>
<p uk-tooltip="东京喰种" aria-describedby="uk-tooltip-23" tabindex="0">错的不是我,而是这个世界!</p> <p uk-tooltip="阿年的日记簿" aria-describedby="uk-tooltip-23" tabindex="0">一日不见 如隔三秋</p>
</div> </div>
</div> </div>
</ul> </ul>
+63 -21
View File
@@ -1,44 +1,81 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" <html xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}"> th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
<th:block th:fragment="content"> <th:block th:fragment="content">
<div class="page_main uk-width-2-3@m"> <div class="page_main uk-width-2-3@m">
<th:block th:replace="~{modules/header}"/> <th:block th:replace="~{modules/header}" />
<div id="pjax-container"> <div id="pjax-container">
<div class="normal_list"> <div class="normal_list">
<div class="normal_list_inner" uk-height-viewport="offset-top: true"> <div class="normal_list_inner" uk-height-viewport="offset-top: true">
<!-- 分类导航 -->
<div class="photos_cat_nav"> <div class="photos_cat_nav">
<ul id="cat_nav_items"> <ul id="cat_nav_items">
<li> <li>
<a href="/photos" <!-- 修改:href 改为 data-href,并添加一个通用 class 如 'cat-link' -->
th:classappend="${#lists.isEmpty(param.group) ? 'active' : ''}">全部<span></span></a> <a th:attr="data-href=@{/photos}"
th:classappend="${#lists.isEmpty(param.group) ? 'active' : ''}" class="cat-link">
全部<span></span>
</a>
</li> </li>
<th:block th:each="group : ${groups}"> <th:block th:each="group : ${groups}">
<li> <li>
<a th:href="@{|/photos?group=${group.metadata.name}|}" <!-- 修改:这里也改为 data-href -->
th:classappend="${#lists.contains(param.group, group.metadata.name) ? 'active' : ''}" <a th:attr="data-href=@{|/photos?group=${group.metadata.name}|}"
th:text="${group.spec.displayName}"><span></span> th:classappend="${#lists.contains(param.group, group.metadata.name) ? 'active' : ''}"
th:text="${group.spec.displayName}" class="cat-link">
<span></span>
</a> </a>
</li> </li>
</th:block> </th:block>
</ul> </ul>
</div> </div>
<!-- 相册列表 -->
<div id="photos_item" class="norpost_list"> <div id="photos_item" class="norpost_list">
<div th:unless="${#lists.isEmpty(photos.items)}" class="gallery-photos page" > <div th:unless="${#lists.isEmpty(photos.items)}" class="gallery-photos page">
<div th:each="photo : ${photos.items}" class="gallery-photo"> <div th:each="photo : ${photos.items}" class="gallery-photo">
<span th:with="img = ${ not #strings.isEmpty(photo.spec.cover) ? photo.spec.cover : photo.spec.url}"
th:href="${img}" data-fancybox="gallery" class="fancybox" <th:block th:with="
th:data-thumb="${img}"> img = ${!#strings.isEmpty(photo.spec.cover) ? photo.spec.cover : photo.spec.url},
<img class="photo-img" loading='lazy' th:src="${img}"> isVideo = ${#strings.endsWith(img, '.mp4') or #strings.endsWith(img, '.webm') or #strings.endsWith(img, '.ogg')}
</span> ">
<span th:if="${isVideo}" th:href="${img}" data-fancybox="gallery"
class="fancybox video-fancybox"
style="position: relative; display: block; cursor: pointer;">
<video class="photo-img" preload="metadata" muted playsinline>
<source th:src="${img}" th:type="${#strings.endsWith(img, '.mp4') ? 'video/mp4' :
(#strings.endsWith(img, '.webm') ? 'video/webm' : 'video/ogg')}" />
</video>
<div
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
<i class="ri-play-circle-line play-icon"
style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
</div>
</span>
<span th:unless="${isVideo}" th:href="${img}" data-fancybox="gallery"
class="fancybox" th:data-thumb="${img}"
style="position: relative; display: block;">
<img class="photo-img" loading="lazy" th:src="${img}" />
</span>
</th:block>
</div> </div>
</div> </div>
<!-- 空数据 -->
<th:block th:if="${#lists.isEmpty(photos.items)}"> <th:block th:if="${#lists.isEmpty(photos.items)}">
<th:block th:replace="~{macro/tpl/content-none}"/> <th:block th:replace="~{macro/tpl/content-none}" />
</th:block> </th:block>
</div> </div>
<!-- 分页 -->
<th:block th:if="${photos.hasPrevious()} or ${photos.hasNext()}"> <th:block th:if="${photos.hasPrevious()} or ${photos.hasNext()}">
<div id="p_pagination"> <div id="p_pagination">
<div class="post-paging" th:if="${photos.hasNext()}"> <div class="post-paging" th:if="${photos.hasNext()}">
@@ -46,19 +83,24 @@
</div> </div>
</div> </div>
</th:block> </th:block>
</div> </div>
</div> </div>
</div> </div>
<!-- 瀑布流自适应 -->
<script> <script>
window.onresize = () => { window.onresize = () => {
var galleryPhotos = document.querySelectorAll('.gallery-photos .gallery-photo'); const galleryPhotos = document.querySelectorAll('.gallery-photos .gallery-photo');
if(galleryPhotos.length>0) { if (galleryPhotos.length > 0) {
waterfall('.gallery-photos'); waterfall('.gallery-photos');
} }
}; };
</script> </script>
<th:block th:replace="~{modules/footer-main}"/>
<th:block th:replace="~{modules/footer-main}" />
</div> </div>
</th:block> </th:block>
</html> </html>
+1 -1
View File
@@ -17,7 +17,7 @@ spec:
issues: "https://github.com/chengzhongxue/halo-theme-pix/issues" issues: "https://github.com/chengzhongxue/halo-theme-pix/issues"
settingName: "theme-pix-setting" settingName: "theme-pix-setting"
configMapName: "theme-pix-configMap" configMapName: "theme-pix-configMap"
version: "1.2.5" version: "1.2.5-1"
require: ">=2.20.0" require: ">=2.20.0"
customTemplates: customTemplates:
page: page: