mirror of
https://codeberg.org/mayx/pages
synced 2026-02-16 01:54:50 +08:00
405 lines
34 KiB
HTML
405 lines
34 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>最近对博客搜索功能的优化记录 | 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-04-04T00: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-04-04T00:00:00+08:00","datePublished":"2025-04-04T00:00:00+08:00","description":"看看其他的博客也会有新的灵感啊～","headline":"最近对博客搜索功能的优化记录","mainEntityOfPage":{"@type":"WebPage","@id":"/2025/04/04/search.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2025/04/04/search.html"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
|
||
<link rel="canonical" href="https://mabbs.github.io/2025/04/04/search.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="2025-04-04T00:00:00+08:00">4 April 2025</time> - 字数统计：3692 - 阅读大约需要12分钟 - Hits: <span id="/2025/04/04/search.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("Fri, 04 Apr 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">这篇文章记录了作者对博客搜索功能进行优化的过程。起因是作者在搜索使用同样模板的博客时，发现许多结果是简历或作品集，而非博客。作者通过搜索关键词和标签，受到其他博主的启发，决定改进搜索功能，使其能够筛选出带有特定标签的文章，并添加了高亮关键词的标记。此外，作者还实现了随机跳转文章、文章标题锚链接以及链接到原始Markdown文件等功能，强调了博客代码和网站功能对于展示个人技术的重要性。整个过程中，作者在借鉴他人经验的同时，也表达了对自我创新和个性化网站设计的重视。</p>
|
||
|
||
<hr />
|
||
|
||
|
||
|
||
<ul><li><a href="#起因">起因</a></li><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="#添加能跳转到原始markdown的链接">添加能跳转到原始Markdown的链接</a></li></ul></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>前段时间，我闲来无事在GitHub上搜和我使用相同模板<a href="https://github.com/pages-themes/minimal">minimal</a>的博客。但搜索结果中有许多人用这个模板制作的是简历或作品集，这让我有些失望。不过这倒也能理解，因为这个模版并不算博客模板，没有文章列表之类的代码，这些都只能自己写。当然多找找还是能找到一些的，毕竟这个模板在GitHub Pages中算是最受欢迎，至少符合大众的审美。像我就搜到了一个叫<a href="https://github.com/josehu07/josehu07.github.io">Guanzhou Hu的博客</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>之后我又看了看其他博客，看到了<a href="https://github.com/mhwalker/mhwalker.github.io">Matt Walker Blog</a>。他没有对模板做很多改动，只是把section元素变得更宽了，但是他没有改手机版自适应的样式，导致界面基本上没法在手机上查看。不过在他的首页中，我对他把文章标签放在文章列表这个操作非常感兴趣，因为每次我都有给文章打标签，但是几乎没什么用。他的标签点进去之后会跳转到该标签下的所有文章，我其实很早就想做这个功能了，但是在不用插件的情况下Jekyll基本上做不出来这种功能，因为没有插件的情况下是不能使用Liquid标签创建文件的，我看了下他的实现，原来是提前创建好的标签页面然后进行筛选的，这个实现我也不喜欢，这样的话我每次打标签都要新建一个标签对应的页面，这种事情不让程序做我会很不爽……（其实现在的GitHub Pages构建网站都是用的Actions了，完全可以自己写一个可以使用插件的Actions来进行构建，不过我也懒得折腾了🤣） </p><p>
|
||
要么还有一个选择，可以单独搞一个页面，里面有所有标签对应的文章，点击文章的标签之后使用锚链接定位到对应标签所在的位置。但这样会导致一个页面有可能有一堆相同的文章链接，结果这个页面比归档页面的链接还多，那就感觉有点糟糕了……</p><p>
|
||
不过我想起来以前做的<a href="/2021/07/23/search.html">博客全文搜索功能</a>，如果把标签作为关键词进行查询，那也能起到筛选出标签对应文章的作用吧？而且这样即使我没给那个文章打标签也能搜出来，其实也算不错的选择，另外自从我做出来那个全文搜索的功能之后也没用过几次，没有关键词的话也一时半会想不出来搜什么比较好。于是说做就做，直接把Matt Walker Blog那段在文章列表生成标签的代码复制过来，感觉好像还不错😆？ </p><p>
|
||
顺便我也把文章里面的标签也加了链接到搜索的功能，不过原来的代码用的是<code class="language-plaintext highlighter-rouge">.join</code>实现的，现在加上这个功能的话就只能老老实实用循环写了😥……</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>上面的标签搜索效果还不错，只是有些关键词搜完之后有点难发现。我搜索出来之后怎么证明搜到的内容里面一定有对应的关键词呢？虽然从程序的角度来说这是理所应当的事情，一定是有的数据才可能被搜到，但有时候不用Ctrl+F看一眼都不知道是哪里搜到了……所以我觉得应该像其他网站一样对搜到的内容用高亮进行标记。标记应该用什么呢？用样式也许不错，不过现在的H5标签里有一个叫mark的标签可以直接用，用这个标签包裹的内容背景颜色就会变成黄色，就像用荧光笔标记了一样，这样就不需要写样式了。 </p><p>
|
||
至于关键词用查询字符串传过去就好了，那我该怎么做呢？我用的搜索脚本叫<a href="https://github.com/christian-fei/Simple-Jekyll-Search">Simple-Jekyll-Search</a>，它的文档其实根本没有写怎么把搜索的请求传到模版里，还好它有个<a href="https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/tests/Templater.test.js">关于模版的测试脚本</a>里面有写，有个query关键词可以把搜索内容给模版渲染出来，既然做了这个功能怎么不写在文档里😅，不过这个项目已经停止，也没法提出什么建议了…… </p><p>
|
||
这个功能听起来相当简单，我都懒得写了，这种简单的功能直接让AI写才对！于是我把需求告诉它，让它给我实现一份，于是这就是让AI给我写的高亮关键词的JS代码（经过了一点修改）：</p>
|
||
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||
<span class="kd">const</span> <span class="nx">urlParams</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">URLSearchParams</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">);</span>
|
||
<span class="kd">const</span> <span class="nx">keyword</span> <span class="o">=</span> <span class="nx">urlParams</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">kw</span><span class="dl">'</span><span class="p">)?.</span><span class="nx">trim</span><span class="p">();</span>
|
||
|
||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">keyword</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
||
|
||
<span class="c1">// 转义正则表达式特殊字符，避免安全问题</span>
|
||
<span class="kd">const</span> <span class="nx">escapedKeyword</span> <span class="o">=</span> <span class="nx">keyword</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/</span><span class="se">[</span><span class="sr">.*+?^${}()|[</span><span class="se">\]\\]</span><span class="sr">/g</span><span class="p">,</span> <span class="dl">'</span><span class="se">\\</span><span class="s1">$&</span><span class="dl">'</span><span class="p">);</span>
|
||
<span class="c1">// 创建不区分大小写的正则表达式（全局匹配）</span>
|
||
<span class="kd">const</span> <span class="nx">regex</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">`(</span><span class="p">${</span><span class="nx">escapedKeyword</span><span class="p">}</span><span class="s2">)`</span><span class="p">,</span> <span class="dl">'</span><span class="s1">gi</span><span class="dl">'</span><span class="p">);</span>
|
||
|
||
<span class="c1">// 递归遍历并高亮文本节点</span>
|
||
<span class="kd">const</span> <span class="nx">escapeHTML</span> <span class="o">=</span> <span class="nx">str</span> <span class="o">=></span> <span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/</span><span class="se">[</span><span class="sr">&<>"'</span><span class="se">]</span><span class="sr">/g</span><span class="p">,</span>
|
||
<span class="nx">tag</span> <span class="o">=></span> <span class="p">({</span>
|
||
<span class="dl">'</span><span class="s1">&</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">&amp;</span><span class="dl">'</span><span class="p">,</span>
|
||
<span class="dl">'</span><span class="s1"><</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">&lt;</span><span class="dl">'</span><span class="p">,</span>
|
||
<span class="dl">'</span><span class="s1">></span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">&gt;</span><span class="dl">'</span><span class="p">,</span>
|
||
<span class="dl">'</span><span class="s1">"</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">&quot;</span><span class="dl">'</span><span class="p">,</span>
|
||
<span class="dl">"</span><span class="s2">'</span><span class="dl">"</span><span class="p">:</span> <span class="dl">'</span><span class="s1">&#39;</span><span class="dl">'</span>
|
||
<span class="p">}[</span><span class="nx">tag</span><span class="p">]</span> <span class="o">||</span> <span class="nx">tag</span><span class="p">));</span>
|
||
<span class="kd">function</span> <span class="nx">highlightTextNodes</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">contents</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">TEXT_NODE</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="kd">const</span> <span class="nx">$this</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||
<span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">escapeHTML</span><span class="p">(</span><span class="nx">$this</span><span class="p">.</span><span class="nx">text</span><span class="p">());</span>
|
||
|
||
<span class="c1">// 使用正则替换并保留原始大小写</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">regex</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">text</span><span class="p">))</span> <span class="p">{</span>
|
||
<span class="kd">const</span> <span class="nx">replaced</span> <span class="o">=</span> <span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">regex</span><span class="p">,</span> <span class="dl">'</span><span class="s1"><mark>$1</mark></span><span class="dl">'</span><span class="p">);</span>
|
||
<span class="nx">$this</span><span class="p">.</span><span class="nx">replaceWith</span><span class="p">(</span><span class="nx">replaced</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">ELEMENT_NODE</span> <span class="o">&&</span>
|
||
<span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="dl">'</span><span class="s1">script, style, noscript, textarea</span><span class="dl">'</span><span class="p">)</span>
|
||
<span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">highlightTextNodes</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">section</span><span class="dl">'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||
<span class="nx">highlightTextNodes</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||
<span class="p">});</span>
|
||
<span class="p">});</span>
|
||
</code></pre></div></div>
|
||
<p>（2025.04.28更新：解决了一个潜在的解析问题） </p><p>
|
||
我测试了一下，非常符合我的需求，各种情况都能按照我的预期工作，虽然说功能非常简单，但是能正常运行，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>除了对搜索功能的优化，我还做了些别的功能：</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="/2024/10/01/suggest.html">相似文章推荐功能时</a>已经对搜索功能的数据进行了缓存，那么直接用缓存的内容直接随机就好了吧……所以就随便写了写，代码也极其简单：</p>
|
||
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:getSearchJSON(function(data){window.location = data[Math.floor(Math.random()*data.length)].url})"</span><span class="nt">></span>Random<span class="nt"></a></span>
|
||
</code></pre></div></div>
|
||
<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/allejo/jekyll-toc">给文章生成目录的组件</a>，在这时候我想看看它还有什么有意思的组件可以用，然后就发现了<a href="https://github.com/allejo/jekyll-anchor-headings">jekyll-anchor-headings</a>，它可以像GitHub展示Markdown文件一样在标题上添加点击后就可以直接跳转到对应标题的锚链接，而且示例里也给出了怎么做<a href="https://github.com/allejo/jekyll-anchor-headings/wiki/Examples#github-style-octicon-links">可以像GitHub的风格</a>。看起来挺有意思，所以就给自己加上了😆。</p>
|
||
<h2 id="添加能跳转到原始markdown的链接">
|
||
|
||
|
||
<a href="#添加能跳转到原始markdown的链接"><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> 添加能跳转到原始Markdown的链接
|
||
|
||
|
||
</h2>
|
||
|
||
<p>在修改博客的时候我参考了一下Jekyll的官方文档，在这个时候发现了page.path这个变量。我想了一下这个变量可以用来链接到我的文章内容，然后就在文章标签位置的右侧加上了这个链接，为了能让它显示在右侧，我用的是<code class="language-plaintext highlighter-rouge">float: right</code>，但是这样会导致和文章标签不在同一行，查了一下才知道用了浮动就会强制将元素转换成块级元素，而文章标签用的是行内元素，所以对不齐，没办法就只能把这一整行都转换成块级元素了……于是代码如下：</p>
|
||
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"{{ site.github.repository_url }}/tree/master/{{ page.path }}"</span><span class="nt">></span>查看原始文件<span class="nt"></a></span></span>
|
||
</code></pre></div></div>
|
||
<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=%E5%8D%9A%E5%AE%A2"><em>博客</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=%E6%90%9C%E7%B4%A2"><em>搜索</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=%E4%BC%98%E5%8C%96"><em>优化</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2025-04-04-search.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/04/04/search.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/03/25/utm.html">
|
||
上一篇：在UTM中使用苹果虚拟化的各种尝试
|
||
</a>
|
||
</span>
|
||
|
||
<br />
|
||
|
||
<span class="next">
|
||
<a href="/2025/04/08/feed.html">
|
||
下一篇：如何使用JS通过订阅源查看文章？
|
||
</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/04/04/search', // 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/04/04/search.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>
|