Revision of ech0说说展示到前端网站 - 清羽飞扬の代码片段

LiuShen revised this gist 5 months ago. Go to revision

1 file changed, 8 insertions

twikoo-comments.js(file created)

		@@ -0,0 +1,8 @@
1	+	const goComment = (e) => {
2	+	const n = document.querySelector(".el-textarea__inner");
3	+	n.value = `> ${e}\n\n`;
4	+	n.focus();
5	+	btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
6	+	};
7	+
8	+	// 如果是twikoo评论区，请自行替换goComment函数，注意，如果评论区开了懒加载可能导致无法找到元素。

LiuShen revised this gist 5 months ago. Go to revision

1 file changed, 3 insertions, 3 deletions

ech0-shuoshuo.js

			@@ -76,7 +76,7 @@ function renderTalks() {
76	76		};
77	77
78	78		const fetchAndRenderTalks = () => {
79		-	const url = 'https://says.liushen.fun/api/messages/page';
	79	+	const url = 'https://says.liushen.fun/api';
80	80		const cacheKey = 'talksCache';
81	81		const cacheTimeKey = 'talksCacheTime';
82	82		const cacheDuration = 30 * 60 * 1000; // 半个小时 (30 分钟)
			@@ -92,7 +92,7 @@ function renderTalks() {
92	92		} else {
93	93		if (talkContainer) {
94	94		talkContainer.innerHTML = '';
95		-	fetch(url, {
	95	+	fetch(url + "/messages/page", {
96	96		method: 'POST',
97	97		headers: {
98	98		'Content-Type': 'application/json',
			@@ -134,7 +134,7 @@ function renderTalks() {
134	134		const formatTalk = (item, url) => {
135	135		let date = formatTime(new Date(item.created_at).toString());
136	136		let content = item.content;
137		-	const baseUrl = new URL(url).origin;
	137	+	const baseUrl = url;
138	138		let imgs = Array.isArray(item.images) ? item.images.map(img => {
139	139		const imageUrl = img.image_url;
140	140		// 如果是相对地址（不以 http 或 https 开头），则拼接 baseUrl

LiuShen revised this gist 5 months ago. Go to revision

1 file changed, 8 insertions, 3 deletions

ech0-shuoshuo.js

			@@ -121,7 +121,7 @@ function renderTalks() {
121	121		function renderTalks(list) {
122	122		// 确保 data 是一个数组
123	123		if (Array.isArray(list)) {
124		-	let items = list.map(item => formatTalk(item));
	124	+	let items = list.map(item => formatTalk(item, url));
125	125		items.forEach(item => talkContainer.appendChild(generateTalkElement(item)));
126	126		waterfall('#talk');
127	127		} else {
			@@ -131,10 +131,15 @@ function renderTalks() {
131	131		};
132	132
133	133
134		-	const formatTalk = (item) => {
	134	+	const formatTalk = (item, url) => {
135	135		let date = formatTime(new Date(item.created_at).toString());
136	136		let content = item.content;
137		-	let imgs = Array.isArray(item.images) ? item.images.map(img => img.image_url) : [];
	137	+	const baseUrl = new URL(url).origin;
	138	+	let imgs = Array.isArray(item.images) ? item.images.map(img => {
	139	+	const imageUrl = img.image_url;
	140	+	// 如果是相对地址（不以 http 或 https 开头），则拼接 baseUrl
	141	+	return /^https?:\/\//.test(imageUrl) ? imageUrl : `${baseUrl}${imageUrl}`;
	142	+	}) : [];
138	143		let text = content;
139	144		content = text.replace(/\[(.?)\]$(.?)$/g, `<a href="$2" target="_blank" rel="nofollow noopener noreferrer">@$1</a>`)
140	145		.replace(/- \[ \]/g, '⚪')

LiuShen revised this gist 5 months ago. Go to revision

1 file changed, 425 insertions

ech0-shuoshuo.js(file created)

		@@ -0,0 +1,425 @@
1	+	function renderTalks() {
2	+	const talkContainer = document.querySelector('#talk');
3	+	if (!talkContainer) return;
4	+	talkContainer.innerHTML = '';
5	+	const generateIconSVG = () => {
6	+	return `<svg viewBox="0 0 512 512"xmlns="http://www.w3.org/2000/svg"class="is-badge icon"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z"fill="#1da1f2"></path></svg>`;
7	+	}
8	+	const waterfall = (a) => {
9	+	function b(a, b) {
10	+	var c = window.getComputedStyle(b);
11	+	return parseFloat(c["margin" + a]) \|\| 0
12	+	}
13	+
14	+	function c(a) {
15	+	return a + "px"
16	+	}
17	+
18	+	function d(a) {
19	+	return parseFloat(a.style.top)
20	+	}
21	+
22	+	function e(a) {
23	+	return parseFloat(a.style.left)
24	+	}
25	+
26	+	function f(a) {
27	+	return a.clientWidth
28	+	}
29	+
30	+	function g(a) {
31	+	return a.clientHeight
32	+	}
33	+
34	+	function h(a) {
35	+	return d(a) + g(a) + b("Bottom", a)
36	+	}
37	+
38	+	function i(a) {
39	+	return e(a) + f(a) + b("Right", a)
40	+	}
41	+
42	+	function j(a) {
43	+	a = a.sort(function (a, b) {
44	+	return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
45	+	})
46	+	}
47	+
48	+	function k(b) {
49	+	f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
50	+	}
51	+	"string" == typeof a && (a = document.querySelector(a));
52	+	var l = [].map.call(a.children, function (a) {
53	+	return a.style.position = "absolute", a
54	+	});
55	+	a.style.position = "relative";
56	+	var m = [];
57	+	l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
58	+	for (var n = 1; n < l.length; n++) {
59	+	var o = l[n - 1],
60	+	p = l[n],
61	+	q = i(o) + f(p) <= f(a);
62	+	if (!q) break;
63	+	p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
64	+	}
65	+	for (; n < l.length; n++) {
66	+	j(m);
67	+	var p = l[n],
68	+	r = m.pop();
69	+	p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
70	+	}
71	+	j(m);
72	+	var s = m[0];
73	+	a.style.height = c(h(s) + b("Bottom", s));
74	+	var t = f(a);
75	+	window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
76	+	};
77	+
78	+	const fetchAndRenderTalks = () => {
79	+	const url = 'https://says.liushen.fun/api/messages/page';
80	+	const cacheKey = 'talksCache';
81	+	const cacheTimeKey = 'talksCacheTime';
82	+	const cacheDuration = 30 * 60 * 1000; // 半个小时 (30 分钟)
83	+
84	+	const cachedData = localStorage.getItem(cacheKey);
85	+	const cachedTime = localStorage.getItem(cacheTimeKey);
86	+	const currentTime = new Date().getTime();
87	+
88	+	// 判断缓存是否有效
89	+	if (cachedData && cachedTime && (currentTime - cachedTime < cacheDuration)) {
90	+	const data = JSON.parse(cachedData);
91	+	renderTalks(data); // 使用缓存渲染数据
92	+	} else {
93	+	if (talkContainer) {
94	+	talkContainer.innerHTML = '';
95	+	fetch(url, {
96	+	method: 'POST',
97	+	headers: {
98	+	'Content-Type': 'application/json',
99	+	},
100	+	body: JSON.stringify({
101	+	page: 1,
102	+	pageSize: 30
103	+	})
104	+	})
105	+	.then(res => res.json())
106	+	.then(data => {
107	+	if (data.code === 1 && data.data && Array.isArray(data.data.items)) {
108	+	// 缓存数据
109	+	localStorage.setItem(cacheKey, JSON.stringify(data.data.items));
110	+	localStorage.setItem(cacheTimeKey, currentTime.toString());
111	+	renderTalks(data.data.items); // 渲染数据
112	+	}
113	+	})
114	+	.catch(error => {
115	+	console.error('Error fetching data:', error);
116	+	});
117	+	}
118	+	}
119	+
120	+	// 渲染函数
121	+	function renderTalks(list) {
122	+	// 确保 data 是一个数组
123	+	if (Array.isArray(list)) {
124	+	let items = list.map(item => formatTalk(item));
125	+	items.forEach(item => talkContainer.appendChild(generateTalkElement(item)));
126	+	waterfall('#talk');
127	+	} else {
128	+	console.error('Data is not an array:', list);
129	+	}
130	+	}
131	+	};
132	+
133	+
134	+	const formatTalk = (item) => {
135	+	let date = formatTime(new Date(item.created_at).toString());
136	+	let content = item.content;
137	+	let imgs = Array.isArray(item.images) ? item.images.map(img => img.image_url) : [];
138	+	let text = content;
139	+	content = text.replace(/\[(.?)\]$(.?)$/g, `<a href="$2" target="_blank" rel="nofollow noopener noreferrer">@$1</a>`)
140	+	.replace(/- \[ \]/g, '⚪')
141	+	.replace(/- \[x\]/g, '⚫');
142	+	// 保留换行符，转换 \n 为 <br>
143	+	content = content.replace(/\n/g, '<br>');
144	+	// 将content用一个类包裹，便于后续处理
145	+	content = `<div class="talk_content_text">${content}</div>`;
146	+	if (imgs.length > 0) {
147	+	const imgDiv = document.createElement('div');
148	+	imgDiv.className = 'zone_imgbox';
149	+	imgs.forEach(e => {
150	+	const imgLink = document.createElement('a');
151	+	imgLink.href = e;
152	+	imgLink.setAttribute('data-fancybox', 'gallery');
153	+	imgLink.className = 'fancybox';
154	+	imgLink.setAttribute('data-thumb', e);
155	+	const imgTag = document.createElement('img');
156	+	imgTag.src = e;
157	+	imgLink.appendChild(imgTag);
158	+	imgDiv.appendChild(imgLink);
159	+	});
160	+	content += imgDiv.outerHTML;
161	+	}
162	+
163	+	// 外链分享功能
164	+	if (item.extension_type ==="WEBSITE") {
165	+	let extension = item.extension ? JSON.parse(item.extension) : {};
166	+	const externalUrl = extension.site;
167	+	const externalTitle = extension.title;
168	+	const externalFavicon = "https://p.liiiu.cn/i/2025/03/13/67d2fc82d329c.webp" // item.externalFavicon;
169	+
170	+	const externalContainer = `
171	+	<div class="shuoshuo-external-link">
172	+	<a class="external-link" href="${externalUrl}" target="_blank" rel="nofollow noopener noreferrer">
173	+	<div class="external-link-left" style="background-image: url(${externalFavicon})"></div>
174	+	<div class="external-link-right">
175	+	<div class="external-link-title">${externalTitle}</div>
176	+	<div>点击跳转<i class="fa-solid fa-angle-right"></i></div>
177	+	</div>
178	+	</a>
179	+	</div>`;
180	+
181	+	content += externalContainer;
182	+	}
183	+
184	+	// const ext = JSON.parse(item.ext \|\| '{}');
185	+
186	+	else if (item.extension_type === "MUSIC") {
187	+	const musicUrl = item.extension;
188	+	if (musicUrl && musicUrl.includes('music.163.com')) {
189	+	const match = musicUrl.match(/id=(\d+)/);
190	+	const musicServer = "netease";
191	+	const musicType = "song";
192	+	const musicId = match ? match[1] : '';
193	+
194	+	content += `
195	+	<meting-js server="${musicServer}" type="${musicType}" id="${musicId}" api="https://met.liiiu.cn/meting/api?server=:server&type=:type&id=:id&r=:r"></meting-js>
196	+	`;
197	+	} else {
198	+	// 懒得适配，自己搞
199	+	}
200	+	}
201	+
202	+	// if (ext.doubanMovie && ext.doubanMovie.id) {
203	+	// const doubanMovie = ext.doubanMovie;
204	+	// const doubanMovieUrl = doubanMovie.url;
205	+	// const doubanTitle = doubanMovie.title;
206	+	// // const doubanDesc = doubanMovie.desc \|\| '暂无描述';
207	+	// const doubanImage = doubanMovie.image;
208	+	// const doubanDirector = doubanMovie.director \|\| '未知导演';
209	+	// const doubanRating = doubanMovie.rating \|\| '暂无评分';
210	+	// // const doubanReleaseDate = doubanMovie.releaseDate \|\| '未知上映时间';
211	+	// // const doubanActors = doubanMovie.actors \|\| '未知演员';
212	+	// const doubanRuntime = doubanMovie.runtime \|\| '未知时长';
213	+
214	+	// content += `
215	+	// <a class="douban-card" href="${doubanMovieUrl}" target="_blank" rel="nofollow noopener noreferrer">
216	+	// <div class="douban-card-bgimg" style="background-image: url('${doubanImage}');"></div>
217	+	// <div class="douban-card-left">
218	+	// <div class="douban-card-img" style="background-image: url('${doubanImage}');"></div>
219	+	// </div>
220	+	// <div class="douban-card-right">
221	+	// <div class="douban-card-item"><span>电影名: </span><strong>${doubanTitle}</strong></div>
222	+	// <div class="douban-card-item"><span>导演: </span><span>${doubanDirector}</span></div>
223	+	// <div class="douban-card-item"><span>评分: </span><span>${doubanRating}</span></div>
224	+	// <div class="douban-card-item"><span>时长: </span><span>${doubanRuntime}</span></div>
225	+	// </div>
226	+	// </a>
227	+	// `;
228	+	// }
229	+
230	+	// if (ext.doubanBook && ext.doubanBook.id) {
231	+	// const doubanBook = ext.doubanBook;
232	+	// const bookUrl = doubanBook.url;
233	+	// const bookTitle = doubanBook.title;
234	+	// // const bookDesc = doubanBook.desc;
235	+	// const bookImage = doubanBook.image;
236	+	// const bookAuthor = doubanBook.author;
237	+	// const bookRating = doubanBook.rating;
238	+	// const bookPubDate = doubanBook.pubDate;
239	+
240	+	// const bookTemplate = `
241	+	// <a class="douban-card" href="${bookUrl}" target="_blank" rel="nofollow noopener noreferrer">
242	+	// <div class="douban-card-bgimg" style="background-image: url('${bookImage}');"></div>
243	+	// <div class="douban-card-left">
244	+	// <div class="douban-card-img" style="background-image: url('${bookImage}');"></div>
245	+	// </div>
246	+	// <div class="douban-card-right">
247	+	// <div class="douban-card-item">
248	+	// <span>书名: </span><strong>${bookTitle}</strong>
249	+	// </div>
250	+	// <div class="douban-card-item">
251	+	// <span>作者: </span><span>${bookAuthor}</span>
252	+	// </div>
253	+	// <div class="douban-card-item">
254	+	// <span>出版年份: </span><span>${bookPubDate}</span>
255	+	// </div>
256	+	// <div class="douban-card-item">
257	+	// <span>评分: </span><span>${bookRating}</span>
258	+	// </div>
259	+	// </div>
260	+	// </a>
261	+	// `;
262	+
263	+	// content += bookTemplate;
264	+	// }
265	+
266	+	else if (item.extension_type === "VIDEO") {
267	+	// const videoType = ext.video.type;
268	+	const BVId = item.extension;
269	+	// Bilibili 视频模板
270	+	// const NewVideoUrl = videoUrl.replace("player.bilibili.com/player.html", "www.bilibili.com/blackboard/html5mobileplayer.html")
271	+	const biliTemplate = `
272	+	<div style="position: relative; padding: 30% 45%; margin-top: 10px;">
273	+	<iframe
274	+	style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 12px;"
275	+	src="https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${BVId}&as_wide=1&high_quality=1&danmaku=0"
276	+	scrolling="no"
277	+	border="0"
278	+	frameborder="no"
279	+	framespacing="0"
280	+	allowfullscreen="true"
281	+	loading="lazy"
282	+	>
283	+	</iframe>
284	+	</div>
285	+	`;
286	+	// 将模板插入到 DOM 中
287	+	content += biliTemplate;
288	+
289	+
290	+	// else if (videoType === 'youtube') {
291	+	// // YouTube 视频模板
292	+	// // 从形如https://youtu.be/2V6lvCUPT8I?si=DVhUas6l6qlAr6Ru的链接中提取视频 ID2V6lvCUPT8I
293	+	// const youtubeTemplate = `
294	+	// <div style="position: relative; padding: 30% 45%; margin-top: 10px;">
295	+	// <iframe width="100%"
296	+	// style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 12px;"
297	+	// src="${videoUrl}"
298	+	// title="YouTube video player"
299	+	// frameborder="0"
300	+	// allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
301	+	// referrerpolicy="strict-origin-when-cross-origin"
302	+	// allowfullscreen>
303	+	// </iframe>
304	+	// </div>
305	+	// `;
306	+	// // 将模板插入到 DOM 中
307	+	// content += youtubeTemplate;
308	+	// }
309	+	}
310	+
311	+	return {
312	+	content: content,
313	+	user: item.username \|\| '匿名',
314	+	avatar: 'https://p.liiiu.cn/i/2024/03/29/66061417537af.png',
315	+	date: date,
316	+	location: item.location \|\| '陕西西安',
317	+	tags: item.tags ? item.tags.split(',').filter(tag => tag.trim() !== '') : ['日常点滴'],
318	+	text: content.replace(/\[(.?)\]$(.?)$/g, '[链接]' + `${imgs.length ? '[图片]' : ''}`)
319	+	};
320	+	};
321	+
322	+	const generateTalkElement = (item) => {
323	+	const talkItem = document.createElement('div');
324	+	talkItem.className = 'talk_item';
325	+
326	+	const talkMeta = document.createElement('div');
327	+	talkMeta.className = 'talk_meta';
328	+
329	+	const avatar = document.createElement('img');
330	+	avatar.className = 'no-lightbox avatar';
331	+	avatar.src = item.avatar;
332	+
333	+	const info = document.createElement('div');
334	+	info.className = 'info';
335	+
336	+	const talkNick = document.createElement('span');
337	+	talkNick.className = 'talk_nick';
338	+	talkNick.innerHTML = `${item.user} ${generateIconSVG()}`;
339	+
340	+	const talkDate = document.createElement('span');
341	+	talkDate.className = 'talk_date';
342	+	talkDate.textContent = item.date;
343	+
344	+	const talkContent = document.createElement('div');
345	+	talkContent.className = 'talk_content';
346	+	talkContent.innerHTML = item.content;
347	+
348	+	const talkBottom = document.createElement('div');
349	+	talkBottom.className = 'talk_bottom';
350	+
351	+	const TagContainer = document.createElement('div');
352	+
353	+	const talkTag = document.createElement('span');
354	+	talkTag.className = 'talk_tag';
355	+	talkTag.textContent = `🏷️${item.tags}`;
356	+
357	+	const locationTag = document.createElement('span');
358	+	locationTag.className = 'location_tag';
359	+	locationTag.textContent = `🌍${item.location}`;
360	+
361	+	TagContainer.appendChild(talkTag);
362	+	TagContainer.appendChild(locationTag);
363	+
364	+	const commentLink = document.createElement('a');
365	+	commentLink.href = 'javascript:;';
366	+	commentLink.onclick = () => goComment(item.text);
367	+	const commentIcon = document.createElement('span');
368	+	commentIcon.className = 'icon';
369	+	const commentIconInner = document.createElement('i');
370	+	commentIconInner.className = 'fa-solid fa-message fa-fw';
371	+	commentIcon.appendChild(commentIconInner);
372	+	commentLink.appendChild(commentIcon);
373	+
374	+	talkMeta.appendChild(avatar);
375	+	info.appendChild(talkNick);
376	+	info.appendChild(talkDate);
377	+	talkMeta.appendChild(info);
378	+	talkItem.appendChild(talkMeta);
379	+	talkItem.appendChild(talkContent);
380	+	talkBottom.appendChild(TagContainer);
381	+	talkBottom.appendChild(commentLink);
382	+	talkItem.appendChild(talkBottom);
383	+
384	+	return talkItem;
385	+	};
386	+
387	+	const goComment = (e) => {
388	+	const match = e.match(/<div class="talk_content_text">([\s\S]*?)<\/div>/);
389	+	const textContent = match ? match[1] : "";
390	+	const n = document.querySelector(".atk-textarea");
391	+	n.value = `> ${textContent}\n\n`;
392	+	n.focus();
393	+	btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
394	+	// const n = document.querySelector(".atk-textarea");
395	+	// n.value = `> ${e}\n\n`;
396	+	// n.focus();
397	+	// btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
398	+	};
399	+
400	+	const formatTime = (time) => {
401	+	const d = new Date(time);
402	+	const ls = [
403	+	d.getFullYear(),
404	+	d.getMonth() + 1,
405	+	d.getDate(),
406	+	d.getHours(),
407	+	d.getMinutes(),
408	+	d.getSeconds(),
409	+	];
410	+	const r = ls.map((a) => (a.toString().length === 1 ? '0' + a : a));
411	+	return `${r[0]}-${r[1]}-${r[2]} ${r[3]}:${r[4]}`;
412	+	};
413	+
414	+	fetchAndRenderTalks();
415	+	}
416	+
417	+	renderTalks();
418	+
419	+	// function whenDOMReady() {
420	+	// const talkContainer = document.querySelector('#talk');
421	+	// talkContainer.innerHTML = '';
422	+	// fetchAndRenderTalks();
423	+	// }
424	+	// whenDOMReady();
425	+	// document.addEventListener("pjax:complete", whenDOMReady);

Newer Older