mirror of
https://codeberg.org/mayx/pages
synced 2026-02-16 01:54:50 +08:00
383 lines
30 KiB
HTML
383 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
||
<title>在Google杀死XSLT之后的XML美化方案 | Mayx的博客</title>
|
||
<meta name="generator" content="Jekyll v3.9.5" />
|
||
<meta property="og:title" content="在Google杀死XSLT之后的XML美化方案" />
|
||
<meta name="author" content="mayx" />
|
||
<meta property="og:locale" content="zh_CN" />
|
||
<meta name="description" content="即使没有了XSLT，也不能让读者看到光秃秃的XML！" />
|
||
<meta property="og:description" content="即使没有了XSLT，也不能让读者看到光秃秃的XML！" />
|
||
<meta property="og:site_name" content="Mayx的博客" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2026-02-08T00:00:00+08:00" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta property="twitter:title" content="在Google杀死XSLT之后的XML美化方案" />
|
||
<meta name="google-site-verification" content="huTYdEesm8NaFymixMNqflyCp6Jfvd615j5Wq1i2PHc" />
|
||
<meta name="msvalidate.01" content="0ADFCE64B3557DC4DC5F2DC224C5FDDD" />
|
||
<meta name="yandex-verification" content="fc0e535abed800be" />
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"mayx"},"dateModified":"2026-02-08T00:00:00+08:00","datePublished":"2026-02-08T00:00:00+08:00","description":"即使没有了XSLT，也不能让读者看到光秃秃的XML！","headline":"在Google杀死XSLT之后的XML美化方案","mainEntityOfPage":{"@type":"WebPage","@id":"/2026/02/08/xslt.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2026/02/08/xslt.html"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
|
||
<link rel="canonical" href="https://mabbs.github.io/2026/02/08/xslt.html" />
|
||
<link type="application/atom+xml" rel="alternate" href="/atom.xml" title="Mayx的博客" />
|
||
<link rel="alternate" type="application/rss+xml" title="Mayx的博客(RSS)" href="/rss.xml" />
|
||
<link rel="alternate" type="application/json" title="Mayx的博客(JSON Feed)" href="/feed.json" />
|
||
<link rel="stylesheet" href="/assets/css/style.css?v=1770554153" />
|
||
<!--[if !IE]> -->
|
||
<link rel="stylesheet" href="/Live2dHistoire/live2d/css/live2d.css" />
|
||
<!-- <![endif]-->
|
||
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mayx的博客" />
|
||
<link rel="webmention" href="https://webmention.io/mabbs.github.io/webmention" />
|
||
<link rel="pingback" href="https://webmention.io/mabbs.github.io/xmlrpc" />
|
||
<link rel="preconnect" href="https://summary.mayx.eu.org" crossorigin="anonymous" />
|
||
<link rel="prefetch" href="https://www.blogsclub.org/badge/mabbs.github.io" as="image" />
|
||
<link rel="blogroll" type="text/xml" href="/blogroll.opml" />
|
||
<link rel="me" href="https://github.com/Mabbs" />
|
||
<script src="/assets/js/jquery.min.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
var lastUpdated = new Date("Sun, 08 Feb 2026 20:35:53 +0800");
|
||
var BlogAPI = "https://summary.mayx.eu.org";
|
||
</script>
|
||
<script src="/assets/js/main.js"></script>
|
||
<!--[if !IE]> -->
|
||
|
||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137710294-1"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'UA-137710294-1');
|
||
</script>
|
||
|
||
<script src="/assets/js/instant.page.js" type="module"></script>
|
||
<!-- <![endif]-->
|
||
</head>
|
||
|
||
<body>
|
||
<!--[if !IE]> --><noscript><marquee style="top: -15px; position: relative;"><small>发现当前浏览器没有启用JavaScript，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee></noscript><!-- <![endif]-->
|
||
<!--[if IE]><marquee style="top: -15px; position: relative;"><small>发现当前浏览器为Internet Explorer，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee><![endif]-->
|
||
<div class="wrapper">
|
||
<header class="h-card">
|
||
<h1><a class="u-url u-uid p-name" rel="me" href="/">Mayx的博客</a></h1>
|
||
|
||
|
||
<img src="https://avatars0.githubusercontent.com/u/17966333" fetchpriority="high" class="u-photo" alt="Logo" style="width: 90%; max-width: 300px; max-height: 300px;" />
|
||
|
||
|
||
<p class="p-note">Mayx's Home Page</p>
|
||
|
||
<form action="/search.html">
|
||
<input type="text" name="keyword" id="search-input-all" placeholder="Search blog posts.." /> <input type="submit" value="搜索" />
|
||
</form>
|
||
<br />
|
||
|
||
|
||
|
||
|
||
|
||
<p class="view"><a class="u-url" href="/Mabbs/">About me</a></p>
|
||
|
||
<ul class="downloads">
|
||
|
||
<li style="width: 270px; border-right: none;"><a href="/MayxBlog.tgz">Download <strong>TGZ File</strong></a></li>
|
||
|
||
</ul>
|
||
</header>
|
||
<section class="h-entry">
|
||
|
||
<small><time class="date dt-published" datetime="2026-02-08T00:00:00+08:00">8 February 2026</time> - 字数统计：2436 - 阅读大约需要8分钟 - Hits: <span id="/2026/02/08/xslt.html" class="visitors">Loading...</span></small>
|
||
<h1 class="p-name">在Google杀死XSLT之后的XML美化方案</h1>
|
||
|
||
<p class="view">by <a class="p-author h-card" href="//github.com/Mabbs">mayx</a></p>
|
||
<div id="outdate" style="display:none;">
|
||
<hr /><p>
|
||
这是一篇创建于 <span id="outime"></span> 天前的文章，其中的信息可能已经有所发展或是发生改变。
|
||
</p>
|
||
</div>
|
||
<script>
|
||
daysold = Math.floor((new Date().getTime() - new Date("Sun, 08 Feb 2026 00:00:00 +0800").getTime()) / (24 * 60 * 60 * 1000));
|
||
if (daysold > 90) {
|
||
document.getElementById("outdate").style.display = "block";
|
||
document.getElementById("outime").innerHTML = daysold;
|
||
}
|
||
</script>
|
||
|
||
<hr />
|
||
|
||
<b>AI摘要</b>
|
||
<p id="ai-output">正在生成中……</p>
|
||
|
||
<!--[if IE]>
|
||
<script>document.getElementById("ai-output").innerHTML="这个文章的AI摘要还没有缓存……IE看不了哦～";</script>
|
||
<![endif]-->
|
||
<!--[if !IE]> -->
|
||
<script>
|
||
async function sha(str) {
|
||
const encoder = new TextEncoder();
|
||
const data = encoder.encode(str);
|
||
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
|
||
const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
|
||
const hashHex = hashArray
|
||
.map((b) => b.toString(16).padStart(2, "0"))
|
||
.join(""); // convert bytes to hex string
|
||
return hashHex;
|
||
}
|
||
async function ai_gen(){
|
||
var postContent = "文章标题：" + "在Google杀死XSLT之后的XML美化方案" + "；文章内容：" + "即使没有了XSLT，也不能让读者看到光秃秃的XML！起因在半年前，我写了一篇用XSLT美化博客XML文件的文章，自从那以后，每次我在浏览其他人博客的时候，都会看一眼对方博客有没有给自己的订阅文件做美化。不过就在前段时间，我在浏览某个博客的时候，发现他博客的订阅文件，甚至连最基本的XML文档树都没有显示出来。这时候我打开开发者工具看了一眼源代码，发现他也并没有使用xml-stylesheet之类的指令……而且控制台貌似报了些错，好像是出现了什么CSP错误……于是我就想，浏览器显示XML文档树的本质，会不会其实也是一种XSLT？之所以报错也有可能是浏览器在自动引用内置的XSLT时违反了CSP。所以我就问了问谷歌AI，结果似乎真的是这样，比如火狐浏览器就内置了一份XSLT文件，IE浏览器也有。正当我为XSLT的功能感到强大时，谷歌AI随后提到，Chrome浏览器决定弃用XSLT，所以以后不要再用XSLT了😰…… 我给我的订阅文件加美化功能才半年，怎么就要不能用了？XSLT出现这么多年都还能用，结果等我加上就要废弃了？当时为了增加这个功能，还是费了不少劲的，怎么能让谷歌说没就没？于是我就开始对这件事进行了调查。Google杀死了XSLT从上面Chrome的弃用XSLT文档中，可以发现，这件事的始作俑者是Mason Freed，他在WHATWG中发起了一个Issue，因为XSLT用的人很少，以及实现XSLT的库很老而且容易出漏洞，所以建议把XSLT从Web标准中删除。在这个Issue中可以发现，有很多人表示不满，毕竟这个功能对想要给自己订阅做美化的博主来说还是很有用的。为了对抗谷歌，还有人做了个网站： https://xslt.rip 。 而且XSLT虽然用的人占比也许不高，但从总量上应该还是挺多的，除了用XSLT美化博客订阅的，甚至还有用XSLT作为博客框架的，另外还有一些人提出一部分政府网站也有使用XSLT。 不过Freed看起来对这件事早有准备，他做了一个Polyfill库，通过WASM的方式让XSLT可以正常工作，为了方便大家使用这个库，我顺手给CDNJS发了个PR，以后可以用CDN引用它了。不过使用这个库的前提是需要在订阅中加一段引用JS的代码，像我博客中的Atom订阅，用的是jekyll-feed插件，里面的格式都是写死的，就用不了了…… 只不过现在已经没办法阻止谷歌了……而且其他浏览器也表示会跟进，看来我们唯一能做的就是去适应了。没有XSLT之后的美化方案纯CSS虽然XSLT不能用，但不代表xml-stylesheet指令就不能用了，除了XSLT之外，xml-stylesheet同样可以引用CSS。只是似乎完全没见过用CSS美化订阅源的，也许是因为光用CSS能做到的事比较少吧，想用CSS给XML文档加链接之类的估计就做不到了。 但目前能选择的也不多了，既然大家都没写过用CSS美化订阅源，那就让我来写一个吧！然而我并不会写😅……那就只好让AI来写了，我把需求说清楚之后，AI就写出来了：feed.css。试了一下效果还挺不错的，我让AI写的这个版本无论是RSS还是Atom都可以使用，如果有人感兴趣可以拿去用。可惜我的Atom订阅因为用的是插件的原因用不了😭，只能加到用纯Liquid实现的RSS订阅上了。 但用纯CSS的缺点也很明显，没办法操作文档的内容，像修改日期格式的就做不了了，而且也不能添加超链接……XML的标签本身对浏览器来说并没有内建的语义，正常情况下也没法让浏览器把某个标签当作超链接。那难道就没办法了吗？混合XHTML如果完全不能修改XML内容，那确实就没有办法了，但如果能修改XML的内容那还是有办法的，简单来说就是混入XHTML，事实上Freed编写的Polyfill库原理上也是利用了XHTML，只要在能作为XHTML的标签中添加XHTML的命名空间，那么浏览器就可以理解它的语义并渲染，像刚刚用纯CSS美化的订阅没有链接，那就可以在根元素中添加命名空间：xmlns:xhtml=\"http://www.w3.org/1999/xhtml\"，然后在合适的位置写：<xhtml:a href=\"https://example.com\">Read more -&gt;</xhtml:a>就可以了。只是这样有个缺点，这样写的订阅文件不够“纯粹”，用验证器验证会显示“Misplaced XHTML content”警告。对有洁癖的人来说可能会有点难受😆。 不过如果能接受这种“不纯粹”，那么其实xml-stylesheet指令也没必要了，link标签一样可以用，包括script也是，所以有人写了一个不使用XSLT美化XML的库。 只不过这种方法和XSLT相比还是有一些缺陷，要知道XSLT的本质是转换，是把XML转换为HTML，也就是说转出来的文档本质是HTML，所有的DOM操作都和操作HTML是完全相同的，但是在XML里混入XHTML标签就不一样了，它的本质依然是XML文档，只是嵌入了XHTML命名空间下的元素，所以相应的DOM操作会有一些不同。如果是自己写的纯JS可能还好，如果是用了jQuery之类假定DOM为HTML的库就会出现问题了，因此这也就是那个Polyfill库的局限性，用正常的XSLT执行document.constructor会显示HTMLDocument，而用这个Polyfill库执行完则是显示XMLDocument。因此，直接套用为浏览器原生XSLT编写的旧样式文件，就有可能会出问题，但如果要考虑改XSLT的话那还不如重新写JS，然后用XHTML引入呢。感想虽然有一些技术会因为各种各样的原因消失，但这不代表我们就要妥协一些东西，总有一些不同的技术可以解决相同的问题，所以我们只需要用其他的技术去实现就好了。不过这也是没办法的事情，毕竟没人能改变浏览器厂商们的决策啊😂。";
|
||
var postContentSign = await sha(postContent);
|
||
var outputContainer = document.getElementById("ai-output");
|
||
$.get(BlogAPI + "/is_uploaded?id=/2026/02/08/xslt.html&sign=" + postContentSign, function (data) {
|
||
if (data == "yes") {
|
||
$.get(BlogAPI + "/get_summary?id=/2026/02/08/xslt.html&sign=" + postContentSign, function (data2) {
|
||
outputContainer.textContent = data2;
|
||
});
|
||
} else {
|
||
$.post(BlogAPI + "/upload_blog?id=/2026/02/08/xslt.html", postContent, function (data) {
|
||
$.get(BlogAPI + "/get_summary?id=/2026/02/08/xslt.html&sign=" + postContentSign);
|
||
const evSource = new EventSource(BlogAPI + "/summary?id=/2026/02/08/xslt.html");
|
||
outputContainer.textContent = "";
|
||
evSource.onmessage = (event) => {
|
||
if (event.data == "[DONE]") {
|
||
evSource.close();
|
||
return;
|
||
} else {
|
||
const data = JSON.parse(event.data);
|
||
if (data.response) {
|
||
outputContainer.textContent += data.response;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
ai_gen();
|
||
</script>
|
||
<!-- <![endif]-->
|
||
|
||
<hr />
|
||
|
||
|
||
|
||
<ul><li><a href="#起因">起因</a></li><li><a href="#google杀死了xslt">Google杀死了XSLT</a></li><li><a href="#没有xslt之后的美化方案">没有XSLT之后的美化方案</a><ul><li><a href="#纯css">纯CSS</a></li><li><a href="#混合xhtml">混合XHTML</a></li></ul></li><li><a href="#感想">感想</a></li></ul>
|
||
<hr />
|
||
|
||
|
||
<main class="post-content e-content" role="main"><p>即使没有了XSLT，也不能让读者看到光秃秃的XML！<!--more--></p>
|
||
<h1 id="起因">
|
||
|
||
|
||
<a href="#起因"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 起因
|
||
|
||
|
||
</h1>
|
||
|
||
<p>在半年前，我写了一篇<a href="/2025/07/01/xslt.html">用XSLT美化博客XML文件</a>的文章，自从那以后，每次我在浏览其他人博客的时候，都会看一眼对方博客有没有给自己的订阅文件做美化。不过就在前段时间，我在浏览某个博客的时候，发现他博客的订阅文件，甚至连最基本的XML文档树都没有显示出来。这时候我打开开发者工具看了一眼源代码，发现他也并没有使用<code class="language-plaintext highlighter-rouge">xml-stylesheet</code>之类的指令……而且控制台貌似报了些错，好像是出现了什么CSP错误……于是我就想，浏览器显示XML文档树的本质，会不会其实也是一种XSLT？之所以报错也有可能是浏览器在自动引用内置的XSLT时违反了CSP。所以我就问了问谷歌AI，结果似乎真的是这样，比如火狐浏览器就内置了一份<a href="https://github.com/mozilla-firefox/firefox/blob/main/dom/xml/resources/XMLPrettyPrint.xsl">XSLT文件</a>，IE浏览器也有。正当我为XSLT的功能感到强大时，谷歌AI随后提到，<a href="https://developer.chrome.com/docs/web-platform/deprecating-xslt">Chrome浏览器决定弃用XSLT</a>，所以以后不要再用XSLT了😰…… </p><p>
|
||
我给我的订阅文件加美化功能才半年，怎么就要不能用了？XSLT出现这么多年都还能用，结果等我加上就要废弃了？当时为了增加这个功能，还是费了不少劲的，怎么能让谷歌说没就没？于是我就开始对这件事进行了调查。</p>
|
||
<h1 id="google杀死了xslt">
|
||
|
||
|
||
<a href="#google杀死了xslt"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> Google杀死了XSLT
|
||
|
||
|
||
</h1>
|
||
|
||
<p>从上面Chrome的弃用XSLT文档中，可以发现，这件事的始作俑者是<a href="https://github.com/mfreed7">Mason Freed</a>，他在WHATWG中发起了一个<a href="https://github.com/whatwg/html/issues/11523">Issue</a>，因为XSLT用的人很少，以及实现XSLT的库很老而且容易出漏洞，所以建议把XSLT从Web标准中删除。在这个Issue中可以发现，有很多人表示不满，毕竟这个功能对想要给自己订阅做美化的博主来说还是很有用的。为了对抗谷歌，还有人做了个网站： <a href="https://xslt.rip">https://xslt.rip</a> 。 </p><p>
|
||
而且XSLT虽然用的人占比也许不高，但从总量上应该还是挺多的，除了用XSLT美化博客订阅的，甚至还有用<a href="https://github.com/vgr-land/vgr-xslt-blog-framework">XSLT作为博客框架的</a>，另外还有一些人提出<a href="https://github.com/whatwg/html/issues/11582">一部分政府网站也有使用XSLT</a>。 </p><p>
|
||
不过Freed看起来对这件事早有准备，他做了一个<a href="https://github.com/mfreed7/xslt_polyfill">Polyfill库</a>，通过WASM的方式让XSLT可以正常工作，为了方便大家使用这个库，我顺手给CDNJS发了个<a href="https://github.com/cdnjs/packages/pull/2118">PR</a>，以后可以用CDN引用它了。不过使用这个库的前提是需要在订阅中加一段引用JS的代码，像我博客中的Atom订阅，用的是<a href="https://github.com/jekyll/jekyll-feed">jekyll-feed</a>插件，里面的格式都是写死的，就用不了了…… </p><p>
|
||
只不过现在已经没办法阻止谷歌了……而且其他浏览器也表示会跟进，看来我们唯一能做的就是去适应了。</p>
|
||
<h1 id="没有xslt之后的美化方案">
|
||
|
||
|
||
<a href="#没有xslt之后的美化方案"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 没有XSLT之后的美化方案
|
||
|
||
|
||
</h1>
|
||
|
||
<h2 id="纯css">
|
||
|
||
|
||
<a href="#纯css"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 纯CSS
|
||
|
||
|
||
</h2>
|
||
|
||
<p>虽然XSLT不能用，但不代表<code class="language-plaintext highlighter-rouge">xml-stylesheet</code>指令就不能用了，除了XSLT之外，<code class="language-plaintext highlighter-rouge">xml-stylesheet</code>同样可以引用CSS。只是似乎完全没见过用CSS美化订阅源的，也许是因为光用CSS能做到的事比较少吧，想用CSS给XML文档加链接之类的估计就做不到了。 </p><p>
|
||
但目前能选择的也不多了，既然大家都没写过用CSS美化订阅源，那就让我来写一个吧！然而我并不会写😅……那就只好让AI来写了，我把需求说清楚之后，AI就写出来了：<a href="/assets/css/feed.css">feed.css</a>。试了一下效果还挺不错的，我让AI写的这个版本无论是RSS还是Atom都可以使用，如果有人感兴趣可以拿去用。可惜我的Atom订阅因为用的是插件的原因用不了😭，只能加到用纯Liquid实现的RSS订阅上了。 </p><p>
|
||
但用纯CSS的缺点也很明显，没办法操作文档的内容，像修改日期格式的就做不了了，而且也不能添加超链接……XML的标签本身对浏览器来说并没有内建的语义，正常情况下也没法让浏览器把某个标签当作超链接。那难道就没办法了吗？</p>
|
||
<h2 id="混合xhtml">
|
||
|
||
|
||
<a href="#混合xhtml"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 混合XHTML
|
||
|
||
|
||
</h2>
|
||
|
||
<p>如果完全不能修改XML内容，那确实就没有办法了，但如果能修改XML的内容那还是有办法的，简单来说就是混入XHTML，事实上Freed编写的Polyfill库原理上也是利用了XHTML，只要在能作为XHTML的标签中添加XHTML的命名空间，那么浏览器就可以理解它的语义并渲染，像刚刚用纯CSS美化的订阅没有链接，那就可以在根元素中添加命名空间：<code class="language-plaintext highlighter-rouge">xmlns:xhtml="http://www.w3.org/1999/xhtml"</code>，然后在合适的位置写：</p>
|
||
<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><xhtml:a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>Read more -<span class="ni">&gt;</span><span class="nt"></xhtml:a></span>
|
||
</code></pre></div></div>
|
||
<p>就可以了。只是这样有个缺点，这样写的订阅文件不够“纯粹”，用验证器验证会显示“<a href="https://validator.w3.org/feed/docs/warning/MisplacedXHTMLContent.html">Misplaced XHTML content</a>”警告。对有洁癖的人来说可能会有点难受😆。 </p><p>
|
||
不过如果能接受这种“不纯粹”，那么其实<code class="language-plaintext highlighter-rouge">xml-stylesheet</code>指令也没必要了，<code class="language-plaintext highlighter-rouge">link</code>标签一样可以用，包括<code class="language-plaintext highlighter-rouge">script</code>也是，所以有人写了一个<a href="https://github.com/dfabulich/style-xml-feeds-without-xslt">不使用XSLT美化XML</a>的库。 </p><p>
|
||
只不过这种方法和XSLT相比还是有一些缺陷，要知道XSLT的本质是转换，是把XML转换为HTML，也就是说转出来的文档本质是HTML，所有的DOM操作都和操作HTML是完全相同的，但是在XML里混入XHTML标签就不一样了，它的本质依然是XML文档，只是嵌入了XHTML命名空间下的元素，所以相应的DOM操作会有一些不同。如果是自己写的纯JS可能还好，如果是用了jQuery之类假定DOM为HTML的库就会出现问题了，因此这也就是那个Polyfill库的局限性，用正常的XSLT执行<code class="language-plaintext highlighter-rouge">document.constructor</code>会显示<code class="language-plaintext highlighter-rouge">HTMLDocument</code>，而用这个Polyfill库执行完则是显示<code class="language-plaintext highlighter-rouge">XMLDocument</code>。因此，直接套用为浏览器原生XSLT编写的旧样式文件，就有可能会出问题，但如果要考虑改XSLT的话那还不如重新写JS，然后用XHTML引入呢。</p>
|
||
<h1 id="感想">
|
||
|
||
|
||
<a href="#感想"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 感想
|
||
|
||
|
||
</h1>
|
||
|
||
<p>虽然有一些技术会因为各种各样的原因消失，但这不代表我们就要妥协一些东西，总有一些不同的技术可以解决相同的问题，所以我们只需要用其他的技术去实现就好了。不过这也是没办法的事情，毕竟没人能改变浏览器厂商们的决策啊😂。</p></main>
|
||
|
||
|
||
<small style="display: block">tags: <a rel="category tag" class="p-category" href="/search.html?keyword=XML"><em>XML</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=Feed"><em>Feed</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=XSLT"><em>XSLT</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=%E7%BE%8E%E5%8C%96"><em>美化</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2026-02-08-xslt.md">查看原始文件</a></span></small>
|
||
|
||
|
||
<h4 style="border-bottom: 1px solid #e5e5e5;margin: 2em 0 5px;">推荐文章</h4>
|
||
<p id="suggest-container">Loading...</p>
|
||
<script>
|
||
var suggest = $("#suggest-container");
|
||
$.get(BlogAPI + "/suggest?id=/2026/02/08/xslt.html&update=" + lastUpdated.valueOf(), function (data) {
|
||
if (data.length) {
|
||
getSearchJSON(function (search) {
|
||
suggest.empty();
|
||
var searchMap = {};
|
||
for (var i = 0; i < search.length; i++) {
|
||
searchMap[search[i].url] = search[i];
|
||
}
|
||
|
||
var tooltip = $('<div class="content-tooltip"></div>').appendTo('body').hide();
|
||
for (var j = 0; j < data.length; j++) {
|
||
var item = searchMap[data[j].id];
|
||
if (item) {
|
||
var link = $('<a href="' + item.url + '">' + item.title + '</a>');
|
||
var contentPreview = item.content.substring(0, 100);
|
||
if (item.content.length > 100) {
|
||
contentPreview += "……";
|
||
}
|
||
link.hover(
|
||
function(e) {
|
||
tooltip.text($(this).data('content'))
|
||
.css({
|
||
top: e.pageY + 10,
|
||
left: e.pageX + 10
|
||
})
|
||
.show();
|
||
},
|
||
function() {
|
||
tooltip.hide();
|
||
}
|
||
).mousemove(function(e) {
|
||
tooltip.css({
|
||
top: e.pageY + 10,
|
||
left: e.pageX + 10
|
||
});
|
||
}).data('content', contentPreview);
|
||
|
||
suggest.append(link);
|
||
suggest.append(' - ' + item.date + '<br />');
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
suggest.html("暂无推荐文章……");
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<br />
|
||
<div class="pagination">
|
||
|
||
<span class="prev">
|
||
<a href="/2026/01/01/summary.html">
|
||
上一篇：年终总结
|
||
</a>
|
||
</span>
|
||
|
||
<br />
|
||
|
||
</div>
|
||
|
||
<!--[if !IE]> -->
|
||
<link rel="stylesheet" href="/assets/css/gitalk.css">
|
||
<script src="/assets/js/gitalk.min.js"></script>
|
||
|
||
<div id="gitalk-container"></div>
|
||
|
||
<script>
|
||
var gitalk = new Gitalk({
|
||
clientID: '36557aec4c3cb04f7ac6',
|
||
clientSecret: 'ac32993299751cb5a9ba81cf2b171cca65879cdb',
|
||
repo: 'mabbs.github.io',
|
||
owner: 'Mabbs',
|
||
admin: ['Mabbs'],
|
||
id: '/2026/02/08/xslt', // Ensure uniqueness and length less than 50
|
||
distractionFreeMode: false, // Facebook-like distraction free mode
|
||
proxy: "https://cors-anywhere.mayx.eu.org/?https://github.com/login/oauth/access_token"
|
||
})
|
||
gitalk.render('gitalk-container')
|
||
</script>
|
||
<!-- <![endif]-->
|
||
|
||
</section>
|
||
<!--[if !IE]> -->
|
||
<div id="landlord" style="left:5px;bottom:0px;">
|
||
<div class="message" style="opacity:0"></div>
|
||
<canvas id="live2d" width="500" height="560" class="live2d"></canvas>
|
||
<div class="live_talk_input_body">
|
||
<form id="live_talk_input_form">
|
||
<div class="live_talk_input_name_body" >
|
||
<input type="checkbox" id="load_this" />
|
||
<input type="hidden" id="post_id" value="/2026/02/08/xslt.html" />
|
||
<label for="load_this">
|
||
<span style="font-size: 11px; color: #fff;"> 想问这篇文章</span>
|
||
</label>
|
||
</div>
|
||
<div class="live_talk_input_text_body">
|
||
<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀？" />
|
||
<button type="submit" class="live_talk_send_btn" id="talk_send">发送</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<input name="live_talk" id="live_talk" value="1" type="hidden" />
|
||
<div class="live_ico_box" style="display:none;">
|
||
<div class="live_ico_item type_info" id="showInfoBtn"></div>
|
||
<div class="live_ico_item type_talk" id="showTalkBtn"></div>
|
||
<div class="live_ico_item type_music" id="musicButton"></div>
|
||
<div class="live_ico_item type_youdu" id="youduButton"></div>
|
||
<div class="live_ico_item type_quit" id="hideButton"></div>
|
||
<input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
|
||
<audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
|
||
<input id="duType" value="douqilai" type="hidden" />
|
||
</div>
|
||
</div>
|
||
<div id="open_live2d">召唤伊斯特瓦尔</div>
|
||
<!-- <![endif]-->
|
||
<footer>
|
||
<p>
|
||
<small>Made with ❤ by Mayx<br />Last updated at 2026-02-08 20:35:53<br /> 总字数：617672 - 文章数：179 - <a href="/atom.xml" >Atom</a> - <a href="/README.html" >About</a></small>
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
<script src="/assets/js/scale.fix.js"></script>
|
||
<!--[if !IE]> -->
|
||
<script src="/assets/js/main_new.js"></script>
|
||
<script src="/Live2dHistoire/live2d/js/live2d.js"></script>
|
||
<script src="/Live2dHistoire/live2d/js/message.js"></script>
|
||
<!-- <![endif]-->
|
||
</body>
|
||
</html>
|