fix(parser):添加 divider 解析

This commit is contained in:
BTMuli
2023-03-30 21:43:58 +08:00
parent bc2dd5f10d
commit 643caa03bf
4 changed files with 161 additions and 83 deletions

View 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;
}

View File

@@ -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

View File

@@ -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?: {

View File

@@ -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