<script src="https://cdn.jsdelivr.net/npm/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.js" data-pjax
async></script>
<script src="https://cdn.jsdelivr.net/npm/js-beautify/js/lib/beautify-html.js" data-pjax></script>
<script type="module" data-pjax>
import {
provideFluentDesignSystem,
fluentAccordion,
fluentAccordionItem,
fluentAnchor,
fluentButton,
fluentCombobox,
fluentOption,
fluentSelect,
fluentTextArea,
fluentTextField,
fillColor,
accentBaseColor,
SwatchRGB,
neutralLayerFloating,
baseLayerLuminance,
StandardLuminance
} from "https://cdn.jsdelivr.net/npm/@fluentui/web-components/+esm";
provideFluentDesignSystem()
.register(
fluentAccordion(),
fluentAccordionItem(),
fluentAnchor(),
fluentButton(),
fluentCombobox(),
fluentOption(),
fluentSelect(),
fluentTextArea(),
fluentTextField()
);
accentBaseColor.withDefault(SwatchRGB.create(0xFC / 0xFF, 0x64 / 0xFF, 0x23 / 0xFF));
fillColor.withDefault(neutralLayerFloating);
const scheme = matchMedia("(prefers-color-scheme: dark)");
if (typeof scheme !== "undefined") {
scheme.addEventListener("change", e => baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode));
if (scheme.matches) {
baseLayerLuminance.withDefault(StandardLuminance.DarkMode);
}
}
</script>
<script type="module" data-pjax>
import { createApp, toRaw } from "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js";
import { fillColor, neutralFillInputRest, neutralFillLayerAltRest } from "https://cdn.jsdelivr.net/npm/@fluentui/web-components/+esm";
import { encodeHTML } from "https://cdn.jsdelivr.net/npm/entities/+esm";
import { HighlightJS as hljs } from "https://cdn.jsdelivr.net/npm/highlight.js/+esm";
import message from "https://cdn.jsdelivr.net/npm/hexo-tag-bilibili-card/components/bilibili-card-message/bilibili-card-message.esm.js";
import builder from "https://cdn.jsdelivr.net/npm/hexo-tag-bilibili-card/components/bilibili-card-builder/bilibili-card-builder.esm.js";
createApp({
data() {
return {
id: null,
output: "components",
type: "video",
json: null,
imageProxy: null,
infoTypes: null,
theme: null,
types: {
video: "视频",
article: "专栏",
user: "用户",
live: "直播",
bangumi: "番剧",
audio: "音频",
dynamic: "动态",
favorite: "收藏夹",
album: "相簿"
},
example: null,
fillColor: neutralFillInputRest
}
},
methods: {
getApiUrl() {
const id = this.id;
if (!id) { return null; }
else { return message.getApi(id, this.type); }
},
async getApiAsync() {
const id = this.id;
if (!id) { return; }
json = await fetch(message.getApi(id, this.type))
.then(x => x.text())
.catch(ex => ex.toString());
},
getTypeIcon(type) {
switch (type) {
case "video":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/video_clip_20_regular.svg";
case "article":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/document_20_regular.svg";
case "user":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/person_20_regular.svg";
case "live":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/live_20_regular.svg";
case "bangumi":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/movies_and_tv_20_regular.svg";
case "audio":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/music_note_2_20_regular.svg";
case "dynamic":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/feed_20_regular.svg";
case "favorite":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/collections_20_regular.svg";
case "album":
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/album_20_regular.svg";
default:
return "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/presence_unknown_20_regular.svg";
}
},
getExampleID(type) {
switch (type) {
case "video":
return "BV1y54y1a768";
case "article":
return "cv8930865";
case "user":
return "266112738";
case "live":
return "12720436";
case "bangumi":
return "md1689";
case "audio":
return "au13598";
case "dynamic":
return "501590001933778048";
case "favorite":
return "1026854530";
case "album":
return "99184721";
}
},
getDefaultInfoTypes(type) {
switch (type) {
case "video":
return "views, danmakus";
case "user":
return "views, likes";
case "live":
return "views";
case "bangumi":
return "favorites";
case "favorite":
return "views, favorites";
case "article":
case "audio":
case "dynamic":
case "album":
default:
return "views, comments";
}
},
onCopyClicked(event, text) {
const button = event.target;
navigator.clipboard.writeText(text)
.then(() => {
if (button instanceof HTMLElement) {
const content = button.innerHTML;
button.innerText = "已复制";
setTimeout(() => button.innerHTML = content, 1000)
}
});
},
createExample(json, imageProxy, id, type, infoTypes, theme) {
this.updateExample(this.createCard(JSON.parse(json), imageProxy, id, type, infoTypes, theme));
},
updateExample(element) {
const example = this.$refs.example;
if (example instanceof HTMLElement) {
if (!element) {
example.innerHTML = this.example = '';
}
else {
element = html_beautify(element);
example.innerHTML = this.example = element;
const pre = document.createElement("pre");
pre.className = "highlight html language-html";
pre.style.marginTop = "calc(var(--design-unit) * 1px)";
pre.style.marginBottom = "unset";
pre.style.borderRadius = "6px";
const code = document.createElement("code");
code.innerHTML = encodeHTML(element);
pre.appendChild(code);
example.appendChild(pre);
hljs.highlightElement(code);
}
}
},
createCard(token, imageProxy, id, type, infoTypes, theme) {
if (!token) { return ''; }
const _message = message.getMessage(type, id, token, console);
return this.createElement(imageProxy, infoTypes, _message, theme);
},
createElement(imageProxy, infoTypes, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }, theme) {
switch (this.output) {
case "components":
return builder.createHost(imageProxy, infoTypes, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }, theme).outerHTML;
case "html":
const card = builder.createCardWithTagName("div", imageProxy, infoTypes, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }, theme);
if (card instanceof HTMLElement) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = this.getTheme(this.theme || '0');
card.insertBefore(link, card.firstChild);
return card.innerHTML;
}
}
},
getTheme(theme) {
const baseUrl = "https://cdn.jsdelivr.net/npm/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card";
switch (theme.toLowerCase()) {
case '1':
case "light":
return `${baseUrl}.light.css`;
case '2':
case "dark":
return `${baseUrl}.dark.css`;
case '0':
case "auto":
case "system":
case "default":
return `${baseUrl}.css`;
case "fd":
case "fd2":
case "fluent":
case "fluentui":
return `${baseUrl}.fluent.css`;
case "-1":
case "none":
return '';
default:
return theme;
}
}
},
mounted() {
if (typeof NexT !== "undefined") {
NexT.utils.registerSidebarTOC();
}
}
}).directive("check-solt",
(element, binding) => {
if (element instanceof HTMLElement) {
const solt = binding.value;
function setDisplay(value) {
if (value) {
if (element.style.display === "none") {
element.style.display = '';
}
}
else {
element.style.display = "none";
}
}
if (typeof solt === "undefined") {
setDisplay(false);
}
else if (typeof solt === "function") {
let value = solt();
if (value instanceof Array) {
const result = value.some(x => {
if (typeof x === "object") {
if (typeof x.type === "symbol") {
x = x.children;
if (typeof x === "string" || x instanceof Array) {
return !!x.length;
}
else {
return !!x;
}
}
else {
return true;
}
}
else {
return false;
}
});
setDisplay(result);
}
}
else if (solt !== binding.oldValue) {
setDisplay(false);
}
}
}
).directive("fill-color",
(element, binding) => {
if (element instanceof HTMLElement) {
const color = toRaw(binding.value);
if (color !== binding.oldValue) {
fillColor.setValueFor(element, color.getValueFor(element.parentElement));
}
}
}
).component("value-change-host", {
template: "#empty-slot-template",
props: {
valueName: String,
eventName: String,
modelValue: undefined
},
emits: ['update:modelValue'],
watch: {
eventName(newValue, oldValue) {
if (newValue !== oldValue) {
const $el = this.$el;
if ($el instanceof HTMLElement) {
const element = $el.children[0];
if (element instanceof HTMLElement) {
if (oldValue) {
element.removeEventListener(oldValue, this.onValueChanged);
}
if (newValue) {
element.addEventListener(newValue, this.onValueChanged);
}
}
}
}
},
modelValue(newValue, oldValue) {
if (newValue !== oldValue) {
const valueName = this.valueName;
if (valueName) {
const $el = this.$el;
if ($el instanceof HTMLElement) {
const element = $el.children[0];
if (element instanceof HTMLElement) {
element[valueName] = newValue;
}
}
}
}
}
},
methods: {
registerEvent(valueName) {
const $el = this.$el;
if ($el instanceof HTMLElement) {
const element = $el.children[0];
if (element instanceof HTMLElement) {
const modelValue = this.modelValue;
if (modelValue === undefined) {
this.$emit('update:modelValue', element[valueName]);
}
else {
element[valueName] = modelValue;
}
element.addEventListener(this.eventName, this.onValueChanged);
}
}
},
onValueChanged(event) {
const target = event.target;
if (target instanceof HTMLElement) {
this.$emit('update:modelValue', target[this.valueName]);
}
}
},
mounted() {
const valueName = this.valueName;
if (valueName && this.eventName) {
this.registerEvent(valueName);
}
}
}).component("svg-host", {
template: "#svg-host-template",
props: {
src: String
},
data() {
return {
innerHTML: null
}
},
watch: {
src(newValue, oldValue) {
if (newValue !== oldValue) {
this.getSVGAsync(newValue).then(svg => this.innerHTML = svg);
}
}
},
methods: {
async getSVGAsync(src) {
if (src) {
try {
return await fetch(src)
.then(response => response.text());
}
catch (ex) {
console.error(ex);
}
}
return '';
}
},
mounted() {
this.getSVGAsync(this.src).then(svg => this.innerHTML = svg);
}
}).component("input-label", {
template: "#input-label-template",
props: {
label: String
}
}).component("settings-presenter", {
template: "#settings-presenter-template"
}).component("settings-card", {
template: "#settings-card-template",
data() {
return {
fillColor: neutralFillInputRest
}
}
}).component("settings-expander", {
template: "#settings-expander-template",
props: {
expanded: String
},
data() {
return {
fillColor: neutralFillLayerAltRest
}
}
}).mount("#vue-app");
</script>
For example:
Untitled-1
Untitled-2
In this website, when set the
Untitled-2text intodiv.innerHTML, only the 1st and 2nd script changed correctly. The 3rd script does not change, and the 4th script has been regarded as a normal script which should be a module. I have no idea why it works like this.result
Here is the example: test.wacz
Also, nothing happened when directly create a script: