nxxy335/halo-theme-WarmIsland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: 完善主题功能并适配插件 (v1.1.5)

Browse Source 
功能新增
- 新增页面布局契约 templates/layout.html，插件前台页面可复用主题外观，避免回退到 Halo fallback 布局
- 新增微信读书页面模板 (weread.html)，集成 halo-weread-plugin 书架
- 新增订阅页面模板 (page_subscriptions.html)
- 新增欢迎弹窗组件（IP 地理定位，多 API 容错）
- 新增点击特效组件（9 种效果）
- 页脚新增全站统计，支持开关与统计项配置，默认开启

插件适配
- 适配 extra-api：文章字数改服务端统计、正文可选中英混排与服务端代码高亮
- 修正各页面插件应用市场链接与插件名

修复
- 修复文章正文图片/视频无法居中（正文样式移至全局，scoped 样式对 Thymeleaf 注入内容无效）
- 修复正文 H1-H6 字号过大，重排层级与移动端断点
- 修复 th: 属性中文字符串缺少引号导致的 Thymeleaf 解析异常（/links、/moments 500）
- 修复 JS 内联表达式与 Thymeleaf 内联语法冲突，全部内联脚本加 th:inline="none"
- 修复移除 i18n 后 steam 页 Elvis 表达式回归问题
- 修正订阅页 th:attr 引号嵌套错误

优化
- Hero 移除灰色遮罩，下滑箭头改为可点击平滑滚动
- 优化目录样式：移除圆点与下拉箭头，支持两行显示，修复长目录截断
- 移除 i18n 多语言支持

清理
- 移除未使用的 Vue/图标依赖与废弃脚本、重复资源
This commit is contained in:
nxxy335
2026-09-26 11:18:52 +08:00
parent 9d0bfcfb4f
commit 430d107d44
78 changed files with 2959 additions and 36075 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/fonts/LXGWWenKai/index.html
-455
View File
@@ -1,455 +0,0 @@
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>字体分包构建报告</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link
rel="stylesheet"
href="https://fastly.jsdelivr.net/npm/vant@4.9.15/lib/index.css"
/>
<link
href="https://unpkg.com/vue3-easy-data-table@1.5.47/dist/style.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./result.css" />
<style>
body {
overflow-wrap: break-word;
font-size: 18px;
background-color: #edf0f3;
--easy-table-border: 0;
}
main {
padding: 20px;
margin-top: var(--van-nav-bar-height);
margin-bottom: var(--van-tabbar-height);
}
.light-blue {
--easy-table-body-row-font-color: #427cb7;
}
.light-red {
--easy-table-body-row-font-color: #b74273;
}
.hint {
display: block;
text-align: center;
color: gray;
margin: 1rem;
}
.scroller {
height: 100%;
}
.user {
height: 32%;
padding: 0 12px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<van-nav-bar
:title="reporter.state?.css?.family +' 分包报告'"
right-text="Github"
@click-right="toGithub"
style="position: fixed; width: 100%; top: 0"
></van-nav-bar>
<div v-if="reporter.isLoading">加载中</div>
<div v-if="reporter.isError">加载错误</div>
<main :style="style">
<van-cell-group inset title="样式控制">
<van-field
v-model="fontSize"
label="字体大小"
placeholder="请输入字体大小"
></van-field>
<van-field
v-model="fontWeight"
label="字体重量"
placeholder="请输入字重"
></van-field>
</van-cell-group>
<!-- 汇总信息 -->
<display-chart
v-if="reporter.isOk() && activePage === 0"
:reporter="reporter.state"
></display-chart>
<!-- 字体信息表格 -->
<name-table
v-if="reporter.isOk() && activePage === 1"
:reporter="reporter.state"
></name-table>
<!-- 单包查询 -->
<pkg-list
v-if="reporter.isOk() && activePage === 2"
:reporter="reporter.state"
></pkg-list>
<div class="hint">
<a href="https://chinese-font.netlify.app">中文网字计划</a>
<span> cn-font-split 生成 </span>
</div>
</main>
<!-- 底部导航栏 -->
<van-tabbar v-model="activePage">
<van-tabbar-item icon="home-o">汇总</van-tabbar-item>
<van-tabbar-item icon="home-o">字体信息</van-tabbar-item>
<van-tabbar-item icon="search">分包</van-tabbar-item>
</van-tabbar>
</div>
</body>
<script src="https://unpkg.com/vue@3.4.33"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table@1.5.47/dist/vue3-easy-data-table.umd.js"></script>
<script src="https://unpkg.com/echarts@5.5.1"></script>
<script src="https://unpkg.com/vue-echarts@7.0.3"></script>
<script src="https://unpkg.com/protobufjs@7.4.0/dist/protobuf.min.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
reporter: PromiseToState(loadReport),
activePage: 0,
fontWeight: '',
fontSize: 16,
};
},
methods: {
toGithub() {
window.open('https://github.com/KonghaYao/cn-font-split');
},
},
async mounted() {
const state = await this.reporter.refetch();
this.fontWeight = state.css.weight;
},
computed: {
style() {
const size = this.fontSize < 12 ? 12 : this.fontSize;
return (
`font-family: '${this.reporter.state?.css?.family}';` +
`font-weight: ${this.fontWeight};` +
`--van-cell-font-size: ${size}px;`
);
},
},
});
/** 封装Promise为状态对象 **/
function PromiseToState(fn) {
return {
state: {},
isOk() {
return !this.isLoading && !this.isError && this.state;
},
isLoading: false,
isError: false,
async refetch() {
this.isLoading = true;
this.isError = false;
try {
this.state = await fn();
} catch (e) {
console.error(e);
this.isError = true;
}
this.isLoading = false;
return this.state;
},
};
}
/** 载入构建出来的二进制报告文件 **/
async function loadReport() {
return new Promise((resolve, reject) => {
protobuf.load('./index.proto', (err, root) => {
if (err) return reject(err);
fetch('./reporter.bin')
.then((res) => res.arrayBuffer())
.then((buf) => {
const OutputReport = root.lookup('OutputReport');
const data = OutputReport.decode(
new Uint8Array(buf),
);
console.log(data);
resolve(data);
})
.catch(reject);
});
});
}
globalThis.app = app;
app.use(vant);
app.component('v-chart', VueECharts);
app.component('easy-data-table', window['vue3-easy-data-table']);
</script>
<!-- 汇总数据 -->
<template id="display-chart">
<van-cell-group inset title="构建信息">
<van-cell title="构建工具" value="cn-font-split"></van-cell>
<van-cell title="构建版本" :value="reporter.version"></van-cell>
<van-cell title="构建平台" :value="reporter.platform"></van-cell>
</van-cell-group>
<van-cell-group inset title="构建详情">
<div style="height: 300px; width: 400px">
<v-chart :option="pieOptions"></v-chart>
</div>
<div style="height: 400px; width: 100%">
<v-chart :option="option"></v-chart>
</div>
</van-cell-group>
</template>
<script>
const tooltip = {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
};
app.component('display-chart', {
template: '#display-chart',
props: {
reporter: Object,
},
computed: {
option() {
const data = this.reporter.subsetDetail ?? [];
return {
title: {
text: '构建耗时',
x: 'center',
},
xAxis: { type: 'category' },
tooltip,
yAxis: [
{
type: 'value',
name: 'time / ms',
},
{
type: 'value',
name: 'bytes / KB',
},
],
series: [
{
name: 'time',
type: 'bar',
data: data.map((i) => i.duration),
},
{
name: 'bytes',
type: 'line',
data: data.map((i) =>
(i.bytes / 1024).toFixed(2),
),
},
],
};
},
pieOptions() {
const message = this.reporter.bundleMessage;
if (!message) return {};
return {
title: {
text: '构建大小对比',
x: 'center',
},
series: [
{
type: 'pie',
radius: ['45%', '60%'],
label: {
formatter(b, c) {
return `${b.name}\n${(
b.value /
(1024 * 1024)
).toFixed(2)}MB`;
},
},
data: [
{
value: message.bundledBytes,
name: 'bundled',
},
{
value: message.originBytes,
name: 'origin',
},
],
},
{
type: 'pie',
radius: [0, '30%'],
label: {
formatter(b, c) {
return `${b.name}\n${b.value}`;
},
},
data: [
{
value: message.bundledSize,
name: 'bundled',
},
{
value: message.originSize,
name: 'origin',
},
],
},
],
};
},
},
});
</script>
<!-- 字体信息表格 -->
<template id="name-table">
<van-cell-group inset title="CSS 信息">
<van-cell
title="font-family"
:value="reporter.css?.family"
></van-cell>
<van-cell
title="font-weight"
:value="reporter.css?.weight"
></van-cell>
<van-cell
title="font-style"
:value="reporter.css?.style"
></van-cell>
<van-cell
title="font-display"
:value="reporter.css?.display"
></van-cell>
</van-cell-group>
<van-cell-group inset title="字体信息">
<easy-data-table
:headers="columns"
:items="reporter.nameTable??[]"
:rows-per-page="1000"
:body-row-class-name="useColor"
></easy-data-table>
</van-cell-group>
</template>
<script>
app.component('name-table', {
template: '#name-table',
props: {
reporter: Object,
},
data() {
return {
color: {
Windows: 'light-blue',
Macintosh: 'light-red',
},
columns: [
{
text: '语言',
value: 'language',
sortable: true,
minWidth: '36px',
},
{
text: '平台',
value: 'platform',
sortable: true,
minWidth: '20px',
},
{
text: '名称',
value: 'name',
sortable: true,
minWidth: '50px',
},
{
text: '值',
value: 'value',
sortable: true,
width: '200px',
},
],
};
},
methods: {
useColor(item) {
return this.color[item.platform];
},
},
});
</script>
<!-- 每个包的数据 -->
<template id="pkg-list">
<van-cell-group inset>
<van-field
v-model="search"
label="搜索"
placeholder="请输入关键字"
></van-field>
</van-cell-group>
<van-cell-group inset title="字体分包详情">
<v-list
ref="list"
:items="items"
:first-render="10"
style="height: 80vh"
>
<template #default="{ item, index }">
<div style="padding: 0 1rem">
<h2 :style="{ width: item.width }">
ITEM: {{ index }} - {{ item.hash }}
</h2>
<span> {{String.fromCodePoint(...item.chars)}} </span>
</div>
</template>
</v-list>
</van-cell-group>
</template>
<script src="https://unpkg.com/@virtual-list/vue/dist/v3/index.iife.js"></script>
<script>
app.component('v-list', virtualListVue);
app.component('pkg-list', {
template: '#pkg-list',
props: {
reporter: Object,
},
data() {
return {
activeNames: [],
search: '',
};
},
mounted() {},
computed: {
items() {
const list = this.reporter.subsetDetail ?? [];
if (this.search) {
return list.filter((i) => i.hash.includes(this.search));
}
return list;
},
},
});
</script>
<script>
app.mount('#app');
</script>
</html>
public/assets/fonts/LXGWWenKai/index.proto
-117
View File
@@ -1,117 +0,0 @@
syntax = "proto3";
package api_interface;
message InputTemplate {
bytes input = 1; // ttf/woff2 文件的 buffer
optional string out_dir = 2; // 切割后放置文件的文件夹
// ====== 构建产物配置 ======
optional CssProperties css = 5; // CSS 配置
optional string target_type = 6; // 目标类型
repeated bytes subsets = 7; // 子集
optional int32 chunk_size = 9; // 包大小
optional float chunk_size_tolerance = 10; // 包大小容差
optional int32 max_allow_subsets_count = 11; // 最大允许子集数量
optional bool test_html = 13; // 是否生成测试 HTML
optional bool reporter = 14; // 是否生成 reporter.bin
optional PreviewImage preview_image = 15; // 预览图像
optional string rename_output_font = 18; // 重命名输出字体
optional string build_mode = 20; // TODO 构建模式
// ====== 预分包优化项配置 =======
optional bool language_areas = 8; // 是否进行语言区域优化
optional bool multi_threads = 21; // TODO 是否使用多线程
optional bool font_feature = 22; // 是否启用字体特性
optional bool reduce_mins = 23; // 是否减少最小分包，
optional bool auto_subset = 24; // 是否自动子集化
optional bool subset_remain_chars = 25; // 是否自动添加没有声明的字符
// CSS 属性配置
message CssProperties {
optional string font_family = 1; // 字体家族名称
optional string font_weight = 2; // 字体粗细
optional string font_style = 3; // 字体样式
optional string font_display = 4; // 字体显示方式
repeated string local_family = 5; // 本地字体家族名称
repeated PolyfillType polyfill = 6; // Polyfill 类型
// 注释属性
optional bool comment_base = 11; // 基础注释
optional bool comment_name_table = 12; // 名称表注释
optional bool comment_unicodes = 13; // Unicode 注释
optional bool compress = 8; // 是否压缩
optional string file_name = 9; // 文件名
}
// Polyfill 类型
message PolyfillType {
string name = 1; // 名称
string format = 2; // 格式
}
// 预览图像
message PreviewImage {
string text = 1; // 会显示在 svg 中的文本
string name = 2; // svg 文件的名称
}
}
enum EventName {
UNSPECIFIED = 0;
OUTPUT_DATA = 1; // "output_data"
END = 2; // "end"
}
message EventMessage {
EventName event = 1;
string message = 2;
optional bytes data = 3;
}
message MultiMessages {
repeated EventMessage messages = 1;
}
message OutputReport {
string version = 1; // 版本号
Css css = 2; // CSS相关信息，可以直接用
string platform = 3; // 平台信息，rust 的构建平台
BundleMessage bundle_message = 24; // 构建消息
repeated NameTable name_table = 25; // name 表信息
repeated SubsetDetail subset_detail = 26; // 子集详情
message NameTable {
string platform = 1; // 平台
string language = 2; // 语言
string name = 3; // 名称
string value = 4; // 值
}
message SubsetDetail {
uint32 id = 1; // ID
string hash = 2; // 哈希值
string file_name = 6; // 文件名称
uint32 bytes = 3; // 字节数
repeated uint32 chars = 4; // 字符数组
uint32 duration = 5; // 构建时间
}
message BundleMessage {
uint32 origin_size = 1; // 原始大小
uint32 bundled_size = 2; // 产物大小
uint32 origin_bytes = 3; // 原始字节数
uint32 bundled_bytes = 4; // 产物字节数
}
message Css {
string family = 1; // 字体家族
string style = 2; // 样式
string weight = 3; // 字重
string display = 4; // 显示方式
}
}
public/assets/fonts/LXGWWenKai/reporter.bin
BIN
View File
Binary file not shown.
public/error/404.html
+1 -2
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="zh">
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -126,6 +126,5 @@
<a class="wi-error__back" href="javascript:history.back()">返回上页</a>
</div>
</div>
<script>(function(){var lang=navigator.language||'';var locale=lang.startsWith('zh-TW')||lang.startsWith('zh-HK')?'zh_TW':lang.startsWith('zh')?'zh_CN':'en';var i18n={zh_CN:{title:'页面走丢了',desc:'你寻找的页面似乎不在这个小岛上',home:'回到首页',back:'返回上页',pageTitle:'页面走丢了'},zh_TW:{title:'頁面走丟了',desc:'你尋找的頁面似乎不在這個小島上',home:'回到首頁',back:'返回上頁',pageTitle:'頁面走丟了'},en:{title:'Page Not Found',desc:'The page you are looking for seems to have wandered off this island',home:'Back to Home',back:'Go Back',pageTitle:'Page Not Found'}};var t=i18n[locale];var el=document.querySelector('.wi-error__title');if(el)el.textContent=t.title;var desc=document.querySelector('.wi-error__desc');if(desc)desc.textContent=t.desc;var home=document.querySelector('.wi-error__home');if(home)home.textContent=t.home;var back=document.querySelector('.wi-error__back');if(back)back.textContent=t.back;document.title=t.pageTitle+' - WarmIsland';})();</script>
</body>
</html>
public/error/500.html
+1 -2
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="zh">
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -126,6 +126,5 @@
<a class="wi-error__back" href="javascript:history.back()">返回上页</a>
</div>
</div>
<script>(function(){var lang=navigator.language||'';var locale=lang.startsWith('zh-TW')||lang.startsWith('zh-HK')?'zh_TW':lang.startsWith('zh')?'zh_CN':'en';var i18n={zh_CN:{title:'服务器开小差了',desc:'小岛遇到了一些问题，稍后再来看看吧',home:'回到首页',back:'返回上页',pageTitle:'服务器开小差了'},zh_TW:{title:'伺服器開小差了',desc:'小島遇到了一些問題，稍後再來看看吧',home:'回到首頁',back:'返回上頁',pageTitle:'伺服器開小差了'},en:{title:'Server Error',desc:'The island encountered some issues, please try again later',home:'Back to Home',back:'Go Back',pageTitle:'Server Error'}};var t=i18n[locale];var el=document.querySelector('.wi-error__title');if(el)el.textContent=t.title;var desc=document.querySelector('.wi-error__desc');if(desc)desc.textContent=t.desc;var home=document.querySelector('.wi-error__home');if(home)home.textContent=t.home;var back=document.querySelector('.wi-error__back');if(back)back.textContent=t.back;document.title=t.pageTitle+' - WarmIsland';})();</script>
</body>
</html>
public/fragments/post-list.html
-21
View File
@@ -1,21 +0,0 @@
<ul class="wi-post-feed" role="list">
<li th:each="post : ${posts.items}" class="wi-post-feed__item">
<a class="wi-post-feed__link" th:href="@{${post.status.permalink}}">
<div class="wi-post-feed__image-wrap" th:unless="${#strings.isEmpty(post.spec.cover)}">
<img
class="wi-post-feed__image"
th:src="${post.spec.cover}"
th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w,
${thumbnail.gen(post.spec.cover, 'm')} 800w,
${thumbnail.gen(post.spec.cover, 'l')} 1200w|"
sizes="(max-width: 768px) 100vw, 400px"
/>
</div>
<div class="wi-post-feed__body">
<p class="wi-post-feed__date" th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"></p>
<h2 class="wi-post-feed__title" th:text="${post.spec.title}"></h2>
<p class="wi-post-feed__excerpt" th:text="${post.status.excerpt}"></p>
</div>
</a>
</li>
</ul>