mirror of
https://codeberg.org/mayx/pages
synced 2026-01-01 23:43:41 +08:00
update
This commit is contained in:
459
2025/06/02/optimize.html
Normal file
459
2025/06/02/optimize.html
Normal file
@@ -0,0 +1,459 @@
|
||||
<!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>近期对博客的修改与优化记录 | Mayx的博客</title>
|
||||
<meta name="generator" content="Jekyll v3.9.5" />
|
||||
<meta property="og:title" content="近期对博客的修改与优化记录" />
|
||||
<meta name="author" content="mayx" />
|
||||
<meta property="og:locale" content="zh_CN" />
|
||||
<meta name="description" content="在修改博客的时候也能学到不少新知识啊～" />
|
||||
<meta property="og:description" content="在修改博客的时候也能学到不少新知识啊～" />
|
||||
<meta property="og:site_name" content="Mayx的博客" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="article:published_time" content="2025-06-02T00:00:00+08:00" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta property="twitter:title" content="近期对博客的修改与优化记录" />
|
||||
<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":"2025-06-02T00:00:00+08:00","datePublished":"2025-06-02T00:00:00+08:00","description":"在修改博客的时候也能学到不少新知识啊～","headline":"近期对博客的修改与优化记录","mainEntityOfPage":{"@type":"WebPage","@id":"/2025/06/02/optimize.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2025/06/02/optimize.html"}</script>
|
||||
<!-- End Jekyll SEO tag -->
|
||||
|
||||
<link rel="canonical" href="https://mabbs.github.io/2025/06/02/optimize.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=1767196818" />
|
||||
<!--[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("Thu, 01 Jan 2026 00:00:18 +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="2025-06-02T00:00:00+08:00">2 June 2025</time> - 字数统计：5136 - 阅读大约需要15分钟 - Hits: <span id="/2025/06/02/optimize.html" class="visitors">Loading...</span></small>
|
||||
<h1 class="p-name">近期对博客的修改与优化记录</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("Mon, 02 Jun 2025 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">这篇文章记录了作者对博客进行的一系列修改和优化过程。主要改进包括：1）接受AI建议优化博客搜索功能和链接样式，解决鼠标悬停问题；2）调整字号、行高和布局，改为百分比布局以提高大屏幕体验；3）增加分段和首行缩进，改善阅读性；4）处理Gitalk评论授权问题，提供跳转到GitHub评论的选项；5）考虑了IE8的兼容性，如使用 Respond.js、XDR请求和调整搜索功能；6）增加了对Atom、RSS和JSONFeed的支持，以及网页快讯功能；7）对IndieWeb的支持，如添加个人身份识别和发布内容的微格式标记。作者在优化过程中注重了传统和现代技术的结合，以及对不同平台和浏览器兼容性的考虑。</p>
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
|
||||
<ul><li><a href="#起因">起因</a></li><li><a href="#对博客样式的优化">对博客样式的优化</a></li><li><a href="#对博客兼容性的优化">对博客兼容性的优化</a><ul><li><a href="#对文章点击计数器的兼容性优化">对文章点击计数器的兼容性优化</a></li><li><a href="#关于响应式布局的兼容性优化">关于响应式布局的兼容性优化</a></li><li><a href="#关于全文搜索的兼容性优化">关于全文搜索的兼容性优化</a></li><li><a href="#对于订阅软件的兼容性支持">对于订阅软件的兼容性支持</a></li><li><a href="#给博客添加网页快讯">给博客添加网页快讯</a></li></ul></li><li><a href="#让网站增加对indieweb的支持">让网站增加对IndieWeb的支持</a><ul><li><a href="#第零级域名">第零级：域名</a></li><li><a href="#第一级识别身份">第一级：识别身份</a></li><li><a href="#第二级发布内容">第二级：发布内容</a></li><li><a href="#第三级进行交流">第三级：进行交流</a></li><li><a href="#额外的内容">额外的内容</a></li></ul></li><li><a href="#对博客可靠性的优化">对博客可靠性的优化</a></li><li><a href="#感想">感想</a></li></ul>
|
||||
<hr />
|
||||
|
||||
|
||||
<main class="post-content e-content" role="main"><p>在修改博客的时候也能学到不少新知识啊～<!--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/04/04/search.html">针对博客搜索功能优化的记录</a>。在写完之后没几天，有位名叫<a href="https://github.com/xymoryn">@xymoryn</a>的大佬看到了我的博客并且进行了<a href="https://github.com/Mabbs/mabbs.github.io/issues/167">吐槽</a>，内容很值得参考。不过我自从用<a href="https://github.com/pages-themes/minimal">minimal</a>主题以来从来没有改过样式的原因主要还是写不来CSS😂，并不是真的不想改，但其中提到可以让AI优化，我觉得也很有道理，现在AI这么发达实在不会用AI改就好啦～</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>虽然大佬给出了参考的CSS，但我不太喜欢那种风格，尤其还把之前的左右布局改成了上下布局。我当年之所以选择minimal主题就是因为它是左右布局的，如果选择上下布局的话我还不如用<a href="https://pages-themes.github.io/hacker/">hacker</a>这个主题，另外那个参考的CSS可能是因为AI写的，有很多没有考虑到的地方，比如主题自带的CSS鼠标放到链接上字体会变粗，然后可能会变宽，导致影响整体的布局，而参考的CSS选择直接让所有的链接放到上面都变细，即使原来是粗字体也变细，比如标题之类的，这就更难受了。像这种情况要怎么改呢？我还是希望能用minimal主题的CSS，但让链接变粗的体验确实不太好，所以我选择问问AI。 </p><p>
|
||||
最后AI给出的答复是使用<code class="language-plaintext highlighter-rouge">font-weight: inherit;</code>，看起来确实解决了问题，不过如果鼠标移到链接上没有任何反应也不太好，所以就学GitHub在鼠标移到链接时加上了下划线。 </p><p>
|
||||
除此之外就是字号、行高和布局，字号和行高我也不希望改的太激进，所以就稍微加了一点点，看起来没那么密就好。至于布局，之前minimal主题的宽度是写死的，左边是270px，右边是500px，对于我的MacBook看起来也还好，因为MacBook的屏幕比较小，屏幕的利用率还是比较高的。不过对于更大的屏幕总共860px大小的区域确实不太够，尤其是4K屏幕可能只有中间一点点的区域有内容，会看着很难受，所以我想了一下还是改成百分比布局比较好，这样无论屏幕有多宽也能利用得到。 </p><p>
|
||||
还有一点就是分段，虽然我也知道在Markdown中两个换行是分段，但是感觉在文本中两个换行隔得太远了，所以一开始写文章的时候就选择只换行。不过在中文里确实不分段也不太好看，但是又不想去动之前写的文章，那该怎么办呢？思来想去干脆把换行全部替换成分段好啦，在Jekyll中可以用replace过滤器把所有的“<br>”替换成“</p><p>”，因为Markdown解析本来就会有一个段落，所以直接闭合加开始就能分割成多个段落了。那么加了分段是为了什么？其实主要是为了首行缩进，有首行缩进对阅读还是有挺大帮助的，至于怎么做也非常简单，直接给p标签设置<code class="language-plaintext highlighter-rouge">text-indent: 2em;</code>就可以了。 </p><p>
|
||||
最后就是评论授权的问题，我用的Gitalk也有人问了<a href="https://github.com/gitalk/gitalk/issues/95">这个问题</a>，我仔细看了一下GitHub官方文档中<a href="https://docs.github.com/zh/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps">OAuth可以授权的作用域</a>发现确实是没办法限制只写Issues😥，至于其他的评论系统对后端的依赖又太多了，尤其是Giscus，居然是直接用iframe引用Giscus网站中的页面😅，如果Giscus哪天挂了，那评论系统不也挂了（虽然GitHub也不可靠……），至于自托管就更不可能了，我能让服务器持续运营可比不上大厂😆。所以最后我选择给Gitalk加个提示，不想登录也可以跳转到GitHub上进行评论，至于怎么加？还是让AI来吧，最后AI给我写了这么一串CSS：</p>
|
||||
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.gt-btn-login</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nl">content</span><span class="p">:</span> <span class="s1">"如果不想登录，请点击上方评论数跳转至对应ISSUE进行评论"</span><span class="p">;</span>
|
||||
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
|
||||
<span class="nl">top</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
|
||||
<span class="nl">left</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
|
||||
<span class="nl">transform</span><span class="p">:</span> <span class="n">translateX</span><span class="p">(</span><span class="m">-50%</span><span class="p">);</span>
|
||||
<span class="nl">background</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
|
||||
<span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">12px</span><span class="p">;</span>
|
||||
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
|
||||
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>
|
||||
<span class="nl">white-space</span><span class="p">:</span> <span class="nb">nowrap</span><span class="p">;</span>
|
||||
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
|
||||
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
|
||||
<span class="nl">transition</span><span class="p">:</span> <span class="n">opacity</span> <span class="m">0.2s</span><span class="p">,</span> <span class="n">visibility</span> <span class="m">0.2s</span><span class="p">;</span>
|
||||
<span class="nl">z-index</span><span class="p">:</span> <span class="m">10</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.gt-btn-login</span><span class="nd">:hover::after</span> <span class="p">{</span>
|
||||
<span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
|
||||
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.gt-btn-login</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.gt-btn-login</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">8px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.15</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div></div>
|
||||
<p>至此，关于博客样式的部分我觉得已经提高不少读者的用户体验了，也感谢大佬提出的建议。</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>最近由于某些原因我又用起Windows 7了。其实我觉得Windows 7是一个很不错的操作系统，有很多人性化的东西，比如桌面小工具，自带Feed订阅，还有<a href="https://archive.org/details/wlsetup-all_201802">Windows Live Essentials</a>等等，可惜后来全部被微软砍掉了🤣。考虑到Windows 7如此优秀，那要不然兼容一下它旗下的Internet Explorer 8浏览器吧？ </p><p>
|
||||
其实GitHub给的那些Jekyll主题本身都是兼容IE8的，包括我在用的minimal主题也一样。但随着我这么多年加了许许多多的功能，绝大多数功能都没有考虑兼容性，只想着能用就行。不过我写的功能基本上都非常简单，如果想改得让它兼容IE8也并非难事，只要理论上可行就可以。当然也有些理论上不可能的东西，比如WebGL。因此，我的<a href="/Live2dHistoire/">Live2D看板娘</a>就没有任何可能性被支持了，至于其他的……也许有一些理论上可以支持，但是改起来比较麻烦的就也算了吧（比如Gitalk之类的）。</p>
|
||||
<h2 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> 对文章点击计数器的兼容性优化
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>其实我的文章点击计数器从<a href="/2019/06/22/counter.html">之前</a>改成用jQuery调用自己的接口以后就没有什么兼容性的问题了，因为jQuery本来就是处理浏览器之间差异的库，而且也是兼容IE8的。只不过有个问题是IE8不支持用XHR跨域请求，只能用“XDR（XDomainRequest）”进行跨域请求……还好有个<a href="https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest">现成的库</a>能让jQuery在遇到这种情况时使用XDR请求，于是我就用条件注释让IE9以下的浏览器引入这个库，这样在IE下也能正常显示文章点击数了😆。</p>
|
||||
<h2 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> 关于响应式布局的兼容性优化
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>在IE8中的CSS是不支持媒体查询的，所以在修改窗口大小时也不能根据情况使用合适的样式。本来我没打算解决这个问题，结果恰好看到了一个库：<a href="https://github.com/scottjehl/Respond">Respond.js</a>，所以就直接拿来用了😝。</p>
|
||||
<h2 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> 关于全文搜索的兼容性优化
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>其实从功能的角度来说这种东西肯定是在IE8下可以实现的，但是我用的<a href="https://github.com/christian-fei/Simple-Jekyll-Search">那个库</a>有点迷，到处都用的是const关键字结果还莫名其妙<a href="https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/src/JSONLoader.js#L29">判断XHR</a>搞的好像是在兼容旧浏览器？改起来有点麻烦懒得搞了……不过除此之外还有个取巧的方式，既然我搜不了，干脆让谷歌来搜吧，至于谷歌支不支持IE8就不是我的事了🤣，所以直接给搜索框外面套了一个form表单，这样甚至可以在不启用JS的情况下搜索（假设谷歌支持没有JS的情况）。</p>
|
||||
<h2 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> 对于订阅软件的兼容性支持
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>之前我的博客对订阅的支持是使用的官方的<a href="https://github.com/jekyll/jekyll-feed">jekyll-feed</a>插件，它只支持Atom格式的订阅，一般的阅读器也是支持这种格式的（即使是IE8也是完美支持）。但是我发现有非常少数的某些网站没办法解析Atom，只支持RSS……所以我只好特地加了<a href="https://github.com/Mabbs/mabbs.github.io/blob/master/rss.xml">对RSS格式的支持</a>，还顺带搞了支持Atom和RSS格式的<a href="https://github.com/Mabbs/mabbs.github.io/blob/master/feed.xslt.xml">XSLT模板</a>来预览。既然RSS也支持了，那干脆连<a href="https://github.com/Mabbs/mabbs.github.io/blob/master/feed.json">JSONFeed</a>也一起做了吧😆，虽然意义不是很大……</p>
|
||||
<h2 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> 给博客添加网页快讯
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>既然要兼容IE8，那当然是能用的都用啦，在IE8订阅网站源的地方，有一个‘添加网页快讯’的功能。因为没有可以参考的网站，我甚至都没理解这个功能展现的效果是什么样的。我看这个网页快讯好像是抄了一部分<a href="http://microformats.org/wiki/hatom">hAtom Microformat</a>的规范，我还以为是每个条目都单独需要一个entry-title和entry-content，结果发现并不是😅，一个hslice只能有一个entry-title…… </p><p>
|
||||
这个功能其实非常简单，主要作用就是把网页的一部分切出来单独展示，当这一部分发生更新的时候IE浏览器就会提示用户。然后在这之中hslice要包裹所有需要处理的元素，写到最外面元素的class中就可以，entry-title是希望用户订阅时展示的名字，而entry-content是被切下来展示的网页。具体的内容可以在<a href="https://learn.microsoft.com/en-us/previous-versions/windows/desktop/cc304073(v=vs.85)">微软官方文档</a>中看到。</p>
|
||||
<h1 id="让网站增加对indieweb的支持">
|
||||
|
||||
|
||||
<a href="#让网站增加对indieweb的支持"><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> 让网站增加对IndieWeb的支持
|
||||
|
||||
|
||||
</h1>
|
||||
|
||||
<p>既然说到Microformat，那就要提到<a href="https://indieweb.org/IndieWeb">IndieWeb</a>了。虽然这个东西网络上也没几个人搞，但看起来有点意思就整下玩玩呗。</p>
|
||||
<h2 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> 第零级：域名
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>根据他们的<a href="https://indieweb.org/Getting_Started">入门教程</a>来看，成为IndieWeb最重要的一点就是有自己的域名。看到这一点我都怀疑这是不是卖域名的用来忽悠人的玩意？我一分钱也不想给域名注册商，虽然DNS这套系统确实维护需要成本，但是能有多大成本呢？绝大多数不都让ISP摊了？另外他们所说的大公司的服务可能会消失，那么域名就不会吗？注册商和注册局完全有能力让你的域名用不了，这也是我们不可控的东西，因此尽管这对于IndieWeb很重要，但是我不打算搞，于是我的博客就不是IndieWeb了🤣。</p>
|
||||
<h2 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> 第一级：识别身份
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>没有域名也不影响接下来的步骤，大公司的域名也是域名（虽然不属于我）。根据教程来看，支持IndieAuth非常简单，只需要在head中加一个<code class="language-plaintext highlighter-rouge">rel=me</code>的link标签，指向IndieAuth支持的个人主页，并且那个个人主页有一个反链指向自己的网站就可以，比如指向自己的GitHub主页，那么就可以使用GitHub登录来验证这个网站属于我。这一步可以使用<a href="https://indiewebify.me/validate-rel-me/">IndieWebify.Me</a>来验证。</p>
|
||||
<h2 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> 第二级：发布内容
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>在发布前，为了更好的让其他软件读取网站内容，需要用microformats2来标注网站内容，这个倒也不复杂，可以根据<a href="https://microformats.org/wiki/h-entry">这个教程</a>按照上面所说的东西用class名去标注对应的元素，标注完之后就可以用<a href="https://indiewebify.me/validate-h-entry/?url=https%3A%2F%2Fmabbs.github.io%2F2025%2F06%2F02%2Foptimize.html">IndieWebify.Me</a>验证了。 </p><p>
|
||||
除此之外还需要用<a href="https://microformats.org/wiki/h-card">h-card</a>标注网站的身份，解析完之后可以当网站名片用，具体可以看<a href="https://indiewebify.me/validate-h-card/?url=https%3A%2F%2Fmabbs.github.io">这里</a>。 </p><p>
|
||||
另外还有一点就是Webmentions，在网站上声明Webmentions可以让别人引用你的文章时通知一下你。不过对于静态博客不是很友好。一是要收，收完还要展示，二是要发，引用了别人的文章如果对面支持Webmentions要把自己引用的文章链接发给对方。虽然Jekyll有<a href="https://github.com/aarongustafson/jekyll-webmention_io">插件</a>可以支持，但是我用GitHub额外装插件还得自己写Actions，而且我发布一次要在一堆Pages上更新，也不太适合，所以我打算光收不发（只需要在link标签中添加Webmentions的端点就可以），也不展示了，而且国内根本没几个人用Webmention🤣。如果有人对谁给我发了Webmention感兴趣，可以在<a href="https://webmention.io/api/mentions.html?token=Dan9NrE8CLsFJ1qdRq2hjg">这里</a>查看（不过绝大多数都是我自己手动发的🤣） </p><p>
|
||||
如果谁有兴趣给自己的网站添加完整的Webmention，可以用<a href="https://webmention.rocks/">Webmention Rocks!</a>进行测试（如果使用了WordPress是自带的，只需要打开相关的功能就可以）。</p>
|
||||
<h2 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> 第三级：进行交流
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>在IndieWeb中有一个很重要的事情就是相互交流，搞这个比较重要的目的是为了避免大公司的服务炸了，所以要替代比如推特，Facebook之类的服务，但是在这些服务还没炸的时候仍然可以在上面发自己的网站，也算是引流吧。他们把这个行为叫做<a href="https://indieweb.org/POSSE">POSSE</a>。对我来说，我在微信、QQ之类的上面发自己新写的文章就算是POSSE了，毕竟我又不玩国外的社交平台😆。 </p><p>
|
||||
除此之外似乎还要把别人的评论同步到自己网站？我能做到的顶多就是Gitalk了，更多的就算了吧～</p>
|
||||
<h2 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> 额外的内容
|
||||
|
||||
|
||||
</h2>
|
||||
|
||||
<p>既然已经支持了IndieWeb，那么不妨加入IndieWeb Webring吧。在<a href="https://xn--sr8hvo.ws">IndieWeb Webring 🕸💍</a>中的大多数网站都是适配了IndieWeb的，加入他们也算是证明自己适配IndieWeb的努力了吧😊。</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="/2022/01/04/banned.html">GitHub</a>的不可靠，我仅仅是在各个Pages上部署了我的网站，但是后来我想了想Git本身就是分布式的，分发是一件很简单的事情啊，我要是想提高博客的可靠性，不如直接用Git分发到各个Git托管商就好了啊～因此我就利用GitLab镜像仓库的功能，一键把我的网站同步到数十个知名的Git托管商，提高了网站的可靠性，具体的列表可以在<a href="/proxylist.html#git列表">这里</a>查看。</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>在这次的博客优化中，了解了不少新的东西啊，不仅学习了CSS，还有了解如何提高网站兼容性，以及提高了博客的可靠性和曝光度。果然折腾博客本身也能提高自己啊，还能写文章分享一下折腾的经验😆。虽然折腾的内容不一定能在未来的生活中用得上，但是有意思就足够了😁。</p></main>
|
||||
|
||||
|
||||
<small style="display: block">tags: <a rel="category tag" class="p-category" href="/search.html?keyword=%E5%8D%9A%E5%AE%A2"><em>博客</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=%E4%BC%98%E5%8C%96"><em>优化</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=IndieWeb"><em>IndieWeb</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2025-06-02-optimize.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=/2025/06/02/optimize.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="/2025/05/07/mac-studio.html">
|
||||
上一篇：Mac Studio M3 Ultra使用体验
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
|
||||
<span class="next">
|
||||
<a href="/2025/07/01/xslt.html">
|
||||
下一篇：使用XSLT为博客XML文件编写主题一致的样式
|
||||
</a>
|
||||
</span>
|
||||
|
||||
</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: '/2025/06/02/optimize', // 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="/2025/06/02/optimize.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-01-01 00:00:18<br /> 总字数：614622 - 文章数：178 - <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>
|
||||
Reference in New Issue
Block a user