fixed bug 若干
This commit is contained in:
Vaica committed
1 parent
e59a772985
commit
830c2d5947
10 files changed
+324
-58
No files matched your search
@@ -441,27 +441,38 @@ ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.header .site-description h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .site-description nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
min-width: 50px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header .site-description nav ul a {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin: 0 5px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.header .site-description nav ul a i {
|
||||
font-size: 1.15rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header .site-description nav ul a:hover {
|
||||
color: #586069;
|
||||
color: #24292e;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Pjax 页面切换过渡动画 */
|
||||
@@ -1007,8 +1018,23 @@ h3.diy-h3 {
|
||||
.yiyandes {
|
||||
font-size: .9rem;
|
||||
line-height: 2rem;
|
||||
margin-left: -28.6px;
|
||||
margin-top: -2px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.yiyandes:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.yiyandes.typing::after {
|
||||
content: '|';
|
||||
animation: blink 1s step-start infinite;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/*comments*/
|
||||
@@ -2214,12 +2240,16 @@ input[type=submit] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
min-width: 26px !important;
|
||||
}
|
||||
|
||||
.barrage .header-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pause {
|
||||
|
||||
+114
-20
@@ -104,10 +104,10 @@ function initArtalkAndGetComments() {
|
||||
|
||||
Artalk.init({
|
||||
el: '#Comments', // 绑定元素的 Selector
|
||||
server: 'https://artalk.usj.cc', // 后端地址
|
||||
site: '优世界', // 你的站点名
|
||||
server: window.siteConfig.artalk.server, // 后端地址
|
||||
site: window.siteConfig.artalk.site, // 你的站点名
|
||||
flatMode: true,
|
||||
emoticons: '/emotion/OwO.json'
|
||||
emoticons: window.siteConfig.artalk.emoticons
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -115,35 +115,63 @@ function initArtalkAndGetComments() {
|
||||
// 异步创建弹幕
|
||||
async function createBarragerFromArtalk(commentsData) {
|
||||
const looperTime = 1000; // 每条弹幕的发送间隔，单位毫秒
|
||||
|
||||
// 1. 处理评论数据（扁平化、乱序）
|
||||
const flattenedComments = flattenComments(commentsData);
|
||||
const totalComments = flattenedComments.length;
|
||||
let currentIndex = 0;
|
||||
shuffleArray(flattenedComments); // 随机打乱评论顺序
|
||||
const selectedComments = flattenedComments; // 使用所有评论
|
||||
|
||||
// 2. 构建弹幕列表
|
||||
let barrageList = selectedComments.map(comment => ({
|
||||
type: 'comment',
|
||||
content: stripHTML(comment.content_marked) || 'No comment',
|
||||
// 修复头像模糊：请求 200px 的图片 (s=200)
|
||||
headImg: window.siteConfig.artalk.gravatar + comment.email_encrypted + "?s=200" || 'static/default-avatar.png',
|
||||
href: comment.link || '#',
|
||||
speed: 35
|
||||
}));
|
||||
|
||||
// 3. 尝试获取在线一言并插入
|
||||
if (window.siteConfig.barrage && window.siteConfig.barrage.enableHitokoto) {
|
||||
try {
|
||||
const hitokoto = await fetchHitokoto();
|
||||
if (hitokoto) {
|
||||
const insertIndex = Math.floor(Math.random() * (barrageList.length + 1));
|
||||
barrageList.splice(insertIndex, 0, {
|
||||
type: 'hitokoto',
|
||||
content: `『一言』${hitokoto}`,
|
||||
headImg: window.siteConfig.author.avatar,
|
||||
href: 'https://hitokoto.cn',
|
||||
speed: 35
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取一言失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化弹幕插件
|
||||
let barrage = new Barrage.default({
|
||||
el: 'body',
|
||||
backColor: "#000000b5",
|
||||
fontSize: "14px",
|
||||
fontSize: "13px", // 字体稍微改小一点点以适配小头像
|
||||
isLeft: true,
|
||||
speed: 0,
|
||||
height: "33px"
|
||||
height: "30px" // 整体高度稍微减小
|
||||
});
|
||||
|
||||
if (totalComments !== 0) {
|
||||
while (currentIndex < totalComments) {
|
||||
const currentComment = flattenedComments[currentIndex];
|
||||
const barragerItem = {
|
||||
headImg: "https://cravatar.cn/avatar/"+currentComment.email_encrypted + "?s=33" || 'static/default-avatar.png',
|
||||
content: stripHTML(currentComment.content_marked) || 'No comment',
|
||||
href: currentComment.link || '#',
|
||||
speed: 10
|
||||
};
|
||||
const totalItems = barrageList.length;
|
||||
let currentIndex = 0;
|
||||
|
||||
if (totalItems !== 0) {
|
||||
while (currentIndex < totalItems) {
|
||||
const item = barrageList[currentIndex];
|
||||
|
||||
// 发送弹幕
|
||||
barrage.start(barragerItem.content, {
|
||||
speed: barragerItem.speed,
|
||||
headImg: barragerItem.headImg,
|
||||
speed: 35
|
||||
barrage.start(item.content, {
|
||||
speed: item.speed,
|
||||
headImg: item.headImg,
|
||||
href: item.href
|
||||
});
|
||||
|
||||
currentIndex++;
|
||||
@@ -152,6 +180,26 @@ async function createBarragerFromArtalk(commentsData) {
|
||||
}
|
||||
}
|
||||
|
||||
// 数组乱序算法 (Fisher-Yates Shuffle)
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
}
|
||||
|
||||
// 获取一言
|
||||
async function fetchHitokoto() {
|
||||
const url = window.siteConfig.barrage.hitokotoUrl || 'https://v1.hitokoto.cn?c=a&c=b&c=c&c=d&c=i';
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
return data.hitokoto;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟函数，返回一个 Promise，用于等待指定的毫秒数
|
||||
function delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
@@ -276,4 +324,50 @@ function initCodeCopy() {
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initCodeCopy();
|
||||
initDescriptionHitokoto();
|
||||
});
|
||||
|
||||
// 初始化个人描述一言切换
|
||||
function initDescriptionHitokoto() {
|
||||
const descEl = document.querySelector('.yiyandes');
|
||||
if (!descEl) return;
|
||||
|
||||
descEl.title = '点击切换一言';
|
||||
|
||||
descEl.addEventListener('click', async () => {
|
||||
if (descEl.dataset.loading === 'true') return;
|
||||
|
||||
descEl.dataset.loading = 'true';
|
||||
const originalText = descEl.innerText;
|
||||
descEl.innerText = '正在获取灵感...';
|
||||
|
||||
const hitokoto = await fetchHitokoto();
|
||||
|
||||
if (hitokoto) {
|
||||
typeWriter(descEl, hitokoto);
|
||||
} else {
|
||||
descEl.innerText = originalText;
|
||||
descEl.dataset.loading = 'false';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 打字机效果
|
||||
function typeWriter(element, text, speed = 100) {
|
||||
element.innerText = '';
|
||||
element.classList.add('typing');
|
||||
let i = 0;
|
||||
|
||||
function type() {
|
||||
if (i < text.length) {
|
||||
element.innerText += text.charAt(i);
|
||||
i++;
|
||||
setTimeout(type, speed);
|
||||
} else {
|
||||
element.dataset.loading = 'false';
|
||||
element.classList.remove('typing');
|
||||
}
|
||||
}
|
||||
|
||||
type();
|
||||
}
|
||||
File renamed without changes.
@@ -5,10 +5,10 @@
|
||||
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > #szh; cls: uk-animation-slide-bottom-small; delay: 0">
|
||||
{{ .Content }}
|
||||
<div id="szh">
|
||||
- 名称：优世界<br>
|
||||
- 简介：一个很佛系的博客<br>
|
||||
- 链接：https://usj.cc<br>
|
||||
- 图标：https://usj.cc/favicon.ico
|
||||
- 名称：{{ .Site.Params.artalk.site }}<br>
|
||||
- 简介：{{ .Site.Params.author.description }}<br>
|
||||
- 链接：{{ .Site.BaseURL }}<br>
|
||||
- 图标：{{ .Site.Params.author.avatar }}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="uk-divider-icon">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<article style="margin-bottom: 3.5em;">
|
||||
<h1 class="post-title" itemprop="name headline" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 200">{{ .Title }}</h1>
|
||||
<div class="meta" uk-scrollspy="cls: uk-animation-fade; delay: 300">
|
||||
<span class="meta-item">作者: {{ .Params.author | default .Site.Params.author }}</span>
|
||||
<span class="meta-item">作者: {{ .Params.author | default .Site.Params.author.name }}</span>
|
||||
<span class="meta-item">浏览: <span id="busuanzi_value_page_uv"></span></span>
|
||||
<span class="meta-item">字数: {{ .WordCount }}</span>
|
||||
<span class="meta-item">阅读: 约 {{ .ReadingTime }} 分钟</span>
|
||||
|
||||
@@ -29,12 +29,12 @@
|
||||
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
Artalk.init({
|
||||
el: '#Comments',
|
||||
server: 'https://artalk.usj.cc',
|
||||
site: '优世界',
|
||||
server: '{{ .Site.Params.artalk.server }}',
|
||||
site: '{{ .Site.Params.artalk.site }}',
|
||||
pageKey: '{{ .RelPermalink }}',
|
||||
flatMode: true,
|
||||
darkMode: isDark,
|
||||
emoticons: '/emotion/OwO.json'
|
||||
emoticons: '{{ .Site.Params.artalk.emoticons | relURL }}'
|
||||
});
|
||||
} else {
|
||||
console.error('Artalk is not defined. Bundle js may not be loaded yet.');
|
||||
|
||||
@@ -58,6 +58,26 @@
|
||||
<!-- Preload Fonts -->
|
||||
<link rel="preload" href="{{ "font/zql.woff2" | relURL }}" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<!-- Site Configuration -->
|
||||
<script>
|
||||
window.siteConfig = {
|
||||
artalk: {
|
||||
server: "{{ .Site.Params.artalk.server }}",
|
||||
site: "{{ .Site.Params.artalk.site }}",
|
||||
emoticons: "{{ .Site.Params.artalk.emoticons | relURL }}",
|
||||
gravatar: "{{ .Site.Params.artalk.gravatar }}"
|
||||
},
|
||||
author: {
|
||||
avatar: "{{ .Site.Params.author.avatar }}",
|
||||
description: "{{ .Site.Params.author.description }}"
|
||||
},
|
||||
barrage: {
|
||||
enableHitokoto: {{ .Site.Params.barrage.enableHitokoto | default true }},
|
||||
hitokotoUrl: "{{ .Site.Params.barrage.hitokotoUrl }}"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
{{ $normalize := resources.Get "css/normalize.css" }}
|
||||
{{ $remixicon := resources.Get "css/remixicon.css" }}
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<div class="header">
|
||||
<div class="header-top">
|
||||
<div class="head_author_img load-memos-editor">
|
||||
<img src="{{ .Site.Params.authorImage }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
|
||||
<img src="{{ .Site.Params.author.avatar }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
|
||||
<div class="avatar-theme-tip">
|
||||
点击头像切换昼夜
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-description">
|
||||
<h2><span class="uk-invisible">{{ .Site.Params.description }}</span></h2>
|
||||
<h2><span class="uk-invisible">{{ .Site.Params.author.description }}</span></h2>
|
||||
<nav class="nav social uk-visible@m">
|
||||
<ul class="flat">
|
||||
{{ with .Site.Params.social }}
|
||||
@@ -18,7 +18,7 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="yiyandes">{{ .Site.Params.description }}</div>
|
||||
<div class="yiyandes">{{ .Site.Params.author.description }}</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user