mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
fix(parser):添加 divider 解析
This commit is contained in:
89
src/assets/css/mys-parser.css
Normal file
89
src/assets/css/mys-parser.css
Normal file
@@ -0,0 +1,89 @@
|
||||
/*
|
||||
* @description 米游社解析 css
|
||||
* @since Alpha v0.1.1
|
||||
*/
|
||||
.mys-post-body {
|
||||
margin: 20px auto;
|
||||
width: 800px;
|
||||
font-family: "Genshin", serif;
|
||||
}
|
||||
|
||||
.mys-post-div {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.mys-post-span {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.mys-post-link {
|
||||
color: #00c3ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mys-post-divider {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.mys-post-divider img {
|
||||
width: 800px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mys-post-img {
|
||||
width: 800px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mys-post-vod {
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.mys-post-link-card {
|
||||
width: 800px;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
background: #e1e1e1;
|
||||
}
|
||||
|
||||
.mys-post-link-card-cover {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-cover img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-content {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-title {
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-price {
|
||||
font-size: 20px;
|
||||
color: #ff667f;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mys-post-link-card-btn {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
color: #00c3ff;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1,80 +1,5 @@
|
||||
@import "fonts/index.css";
|
||||
|
||||
/*
|
||||
* @description 米游社解析 css
|
||||
* @since Alpha v0.1.1
|
||||
*/
|
||||
.mys-post-body {
|
||||
margin: 20px auto;
|
||||
width: 800px;
|
||||
font-family: "Genshin", serif;
|
||||
}
|
||||
|
||||
.mys-post-div {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.mys-post-span {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.mys-post-img {
|
||||
width: 800px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mys-post-vod {
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.mys-post-link-card {
|
||||
width: 800px;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
background: #e1e1e1;
|
||||
}
|
||||
|
||||
.mys-post-link-card-cover {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-cover img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-content {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-title {
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.mys-post-link-card-price {
|
||||
font-size: 20px;
|
||||
color: #ff667f;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mys-post-link-card-btn {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
color: #00c3ff;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
@import "css/mys-parser.css";
|
||||
|
||||
/*
|
||||
* @description 米游社解析 json
|
||||
|
||||
@@ -237,7 +237,8 @@ export interface PostStat {
|
||||
* @property {object} insert.fold 折叠内容
|
||||
* @property {string} insert.fold.title 折叠标题,反序列化后为 PostStructuredContent[]
|
||||
* @property {string} insert.fold.content 折叠文本,反序列化后为 PostStructuredContent[]
|
||||
* @property {PostStructuredContentLinkCard} link_card 链接卡片
|
||||
* @property {PostStructuredContentLinkCard} insert.link_card 链接卡片
|
||||
* @property {string} insert.divider 分割线
|
||||
* @property {object} attributes 属性
|
||||
* @property {number} attributes.height 高度
|
||||
* @property {number} attributes.width 宽度
|
||||
@@ -259,6 +260,7 @@ export interface PostStructuredContent {
|
||||
content: string;
|
||||
};
|
||||
link_card?: PostStructuredContentLinkCard;
|
||||
divider?: string;
|
||||
}
|
||||
| string;
|
||||
attributes?: {
|
||||
|
||||
@@ -45,7 +45,10 @@ function ParserTransfer(data: PostStructuredContent): HTMLDivElement | HTMLSpanE
|
||||
return BackupTextParser(data);
|
||||
} else if (data.insert.link_card) {
|
||||
return LinkCardParser(data);
|
||||
} else if (data.insert.divider) {
|
||||
return DividerParser(data);
|
||||
} else {
|
||||
console.log(data);
|
||||
throw new Error("Unknown data.insert type");
|
||||
}
|
||||
}
|
||||
@@ -68,11 +71,7 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement {
|
||||
if (data.attributes.bold) text.style.fontWeight = "bold";
|
||||
if (data.attributes.color) text.style.color = data.attributes.color;
|
||||
if (data.attributes.link) {
|
||||
const a = document.createElement("a");
|
||||
a.href = data.attributes.link;
|
||||
a.target = "void(0)";
|
||||
a.innerText = data.insert;
|
||||
return a;
|
||||
return LinkTextParser(data);
|
||||
}
|
||||
}
|
||||
// 添加 class
|
||||
@@ -83,6 +82,69 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement {
|
||||
return text;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 解析链接
|
||||
* @since Alpha v0.1.1
|
||||
* @param {PostStructuredContent} data Mys数据
|
||||
* @returns {HTMLSpanElement} 解析后的链接
|
||||
*/
|
||||
function LinkTextParser(data: PostStructuredContent): HTMLSpanElement {
|
||||
// 检查数据
|
||||
if (typeof data.insert !== "string") {
|
||||
throw new Error("data.insert is not a string");
|
||||
}
|
||||
if (!data.attributes) {
|
||||
throw new Error("data.attributes is not defined");
|
||||
}
|
||||
if (!data.attributes.link) {
|
||||
throw new Error("data.attributes.link is not defined");
|
||||
}
|
||||
// 创建图标
|
||||
const icon = document.createElement("i");
|
||||
icon.classList.add("mdi", "mdi-link-variant");
|
||||
// 创建链接
|
||||
const link = document.createElement("a");
|
||||
link.classList.add("mys-post-link");
|
||||
link.href = data.attributes.link;
|
||||
link.target = "view_window";
|
||||
link.innerText = data.insert;
|
||||
// 插入图标作为链接前缀
|
||||
link.prepend(icon);
|
||||
// 返回链接
|
||||
return link;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 解析分割线
|
||||
* @since Alpha v0.1.1
|
||||
* @param {PostStructuredContent} data Mys数据
|
||||
* @returns {HTMLDivElement} 解析后的分割线
|
||||
*/
|
||||
function DividerParser(data: PostStructuredContent): HTMLDivElement {
|
||||
// 数据检查
|
||||
if (typeof data.insert === "string") {
|
||||
throw new Error("data.insert is a string");
|
||||
}
|
||||
if (!data.insert.divider) {
|
||||
throw new Error("data.insert.divider is not defined");
|
||||
}
|
||||
// 创建分割线
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("mys-post-divider");
|
||||
// 创建 img
|
||||
const img = document.createElement("img");
|
||||
if (data.insert.divider === "line_2") {
|
||||
img.src =
|
||||
"https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/477d4c535e965bec1791203aecdfa8e6.png";
|
||||
} else {
|
||||
throw new Error("Unknown divider type");
|
||||
}
|
||||
// 插入 img
|
||||
div.appendChild(img);
|
||||
// 返回分割线
|
||||
return div;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 解析图片
|
||||
* @since Alpha v0.1.1
|
||||
@@ -259,7 +321,7 @@ function LinkCardParser(data: PostStructuredContent): HTMLDivElement {
|
||||
button.classList.add("mys-post-link-card-btn");
|
||||
button.innerHTML = data.insert.link_card.button_text + " >";
|
||||
button.href = data.insert.link_card.origin_url;
|
||||
button.target = "void(0)";
|
||||
button.target = "view_window";
|
||||
// 插入 button
|
||||
content.appendChild(button);
|
||||
// 插入 content
|
||||
|
||||
Reference in New Issue
Block a user