biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4b015839afa0d43ccc22798e958edca1f7b38caa
blog/posts/da17d00/index.html
T
biss 4b015839af Merge pull request 'Codex/design 启用新的页面风格' (#10) from codex/design into master 
Reviewed-on: #10
 -- [CST 2026-07-19 Sunday 16:12:13]
2026-07-19 16:12:13 +08:00

1177 lines
117 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含'https://'。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。"><meta name="author" content="biss"><meta name="keywords" content="建站手札, 网站"><link rel="canonical" href="https://blog.biss.click/posts/da17d00/"><link rel="alternate" type="application/rss+xml" title="Bi's Blog RSS" href="https://blog.biss.click/rss.xml"><meta property="og:site_name" content="Bi's Blog"><meta property="og:locale" content="zh_CN"><meta property="og:type" content="article"><meta property="og:title" content="在侧边栏中添加欢迎信息 | Bi's Blog"><meta property="og:description" content="这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含'https://'。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。"><meta property="og:url" content="https://blog.biss.click/posts/da17d00/"><meta property="og:image" content="https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp"><meta property="og:image:alt" content="在侧边栏中添加欢迎信息"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="在侧边栏中添加欢迎信息 | Bi's Blog"><meta name="twitter:description" content="这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含'https://'。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。"><meta name="twitter:image" content="https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp"><meta property="article:published_time" content="2025-08-10T19:30:40.000Z"><meta property="article:modified_time" content="2025-08-10T19:30:40.000Z"><meta property="article:author" content="biss"><meta property="article:tag" content="建站手札"><meta property="article:tag" content="网站"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"在侧边栏中添加欢迎信息","description":"这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含'https://'。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。","image":["https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp"],"datePublished":"2025-08-10T19:30:40.000Z","dateModified":"2025-08-10T19:30:40.000Z","wordCount":580,"inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.biss.click/posts/da17d00/"},"author":{"@type":"Person","name":"biss","url":"https://github.com/bishshi"},"publisher":{"@type":"Person","name":"biss","image":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"keywords":"建站手札, 网站","articleSection":"建站手札","isPartOf":{"@type":"CreativeWorkSeries","name":"webcustom"}}</script><link rel="icon" href="/images/Bi.ico"><link rel="manifest" href="/manifest.webmanifest"><link rel="apple-touch-icon" href="/images/apple-touch-icon.png"><meta name="theme-color" content="#f7f5ef" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#0b1014" media="(prefers-color-scheme: dark)"><script defer src="https://umami.biss.click/script.js" data-website-id="3d97b310-b241-4fc6-bc9c-68e317fc7d42"></script><script>window.SITE_CONFIG = {"site":{"url":"https://blog.biss.click","name":"Bi's Blog","description":"Personal blog by biss.","language":"zh-CN","domain":"blog.biss.click","slogan":"好奇心转化为代码的空间。","startTime":"2025-01-01T00:00:00+08:00","copyrightStartYear":2025,"license":"内容采用 CC BY-NC-SA 4.0 协议"},"author":{"name":"biss","email":"bishsh2006@gmail.com","github":"https://github.com/bishshi","avatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"comments":{"envId":"https://comment.biss.click","region":"","script":"https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"},"analytics":{"umami":{"script":"https://umami.biss.click/script.js","websiteId":"3d97b310-b241-4fc6-bc9c-68e317fc7d42","statsEndpoint":"https://blogumami.biss.click"}},"talks":{"apiUrl":"https://mm.biss.click/api/echo/page","pageSize":30,"homeLimit":6,"cacheKey":"talksCache","cacheTimeKey":"talksCacheTime","cacheDurationMs":1800000,"fallbackAvatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"search":{"apiKey":"2uxQzk7eD2GBCljdSmIiuU3ause7UK9n","server":{"host":"typesense.biss.click","port":"443","protocol":"https"},"indexName":"blogs","searchParams":{"query_by":"title,content","highlight_full_fields":"title,content","per_page":8,"num_typos":1,"typo_tokens_threshold":1,"prefix":true},"ui":{"maxRetries":10,"retryDelay":100,"animationDuration":300,"maxInitRetries":30,"placeholder":"输入关键词寻找故事..."}},"externalLinks":{"waitSeconds":10,"whitelist":["blog.biss.click","biss.click","github.com","localhost","127.0.0.1"]}};</script><script>
(() => {
const storageKey = 'site-theme';
const media = window.matchMedia('(prefers-color-scheme: dark)');
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
const getSavedTheme = () => {
try {
const theme = localStorage.getItem(storageKey);
return theme === 'dark' || theme === 'light' ? theme : null;
} catch {
return null;
}
};
document.documentElement.dataset.theme = getSavedTheme() || getSystemTheme();
})();
</script><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"><title>在侧边栏中添加欢迎信息 | Bi&#39;s Blog</title><link rel="stylesheet" href="/_astro/BaseLayout.DvPRLM9I.css"></head> <body> <header class="site-header"> <nav class="nav"> <a class="brand" href="/" aria-label="Bi's Blog 首页"><span>biss</span><i>.log</i></a> <button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle> <i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i> <i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i> </button> <div class="nav-drawer-backdrop" data-nav-backdrop></div> <div class="nav-menu" data-nav-menu> <div class="nav-links nav-center"> <a href="/archives/"><i class="fa-solid fa-box-archive nav-icon" aria-hidden="true"></i><span>归档</span></a><a href="/categories/"><i class="fa-solid fa-folder-open nav-icon" aria-hidden="true"></i><span>分类</span></a><a href="/tags/"><i class="fa-solid fa-tags nav-icon" aria-hidden="true"></i><span>标签</span></a><a href="/shuoshuo/"><i class="fa-regular fa-comments nav-icon" aria-hidden="true"></i><span>说说</span></a><a href="/about/"><i class="fa-solid fa-heart nav-icon" aria-hidden="true"></i><span>关于</span></a><a href="/link/"><i class="fa-solid fa-link nav-icon" aria-hidden="true"></i><span>友链</span></a> </div> <div class="nav-links nav-actions"> <button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章"> <i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i> <span>随机文章</span> </button> <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索"> <i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i> <span>搜索</span> </button> <button class="nav-console" type="button" aria-label="打开中控台" title="中控台" data-console-open> <i class="fa-solid fa-gauge-high nav-icon" aria-hidden="true"></i> <span>中控台</span> </button> <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle> <i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i> <i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i> </button> </div> </div> </nav> </header> <div class="control-console" data-console-modal aria-hidden="true"> <div class="control-console-backdrop" data-console-close></div> <section class="control-console-panel" role="dialog" aria-modal="true" aria-labelledby="control-console-title" tabindex="-1"> <header class="control-console-head"> <div> <p>CONTROL CENTER</p> <h2 id="control-console-title">中控台</h2> </div> <button class="control-console-close" type="button" aria-label="关闭中控台" title="关闭" data-console-close> <i class="fa-solid fa-xmark" aria-hidden="true"></i> </button> </header> <div class="control-console-grid"> <a class="control-site-card" href="https://biss.click" target="_blank" rel="noreferrer"> <i class="fa-solid fa-house-chimney" aria-hidden="true"></i> <span> <strong>主站入口</strong> <em>个人主页与常用入口集合</em> </span> <small>biss.click</small> </a><a class="control-site-card" href="https://mm.biss.click" target="_blank" rel="noreferrer"> <i class="fa-regular fa-comments" aria-hidden="true"></i> <span> <strong>说说动态</strong> <em>短句、碎片记录和近况更新</em> </span> <small>mm.biss.click</small> </a><a class="control-site-card" href="https://comment.biss.click" target="_blank" rel="noreferrer"> <i class="fa-solid fa-message" aria-hidden="true"></i> <span> <strong>评论系统</strong> <em>Twikoo 评论服务与访客互动</em> </span> <small>comment.biss.click</small> </a><a class="control-site-card" href="https://umami.biss.click" target="_blank" rel="noreferrer"> <i class="fa-solid fa-chart-line" aria-hidden="true"></i> <span> <strong>站点统计</strong> <em>Umami 访问统计与站点数据</em> </span> <small>umami.biss.click</small> </a> </div> <div class="control-console-info" aria-label="站点信息"> <section> <span>当前站点</span> <strong>blog.biss.click</strong> </section> <section> <span>站点作者</span> <strong>biss</strong> </section> <section> <span>运行起点</span> <strong>2025-01-01</strong> </section> </div> </section> </div> <main> <div class="reading-progress" aria-hidden="true"><span data-reading-progress></span></div> <aside class="reading-resume" data-reading-resume hidden aria-live="polite"> <div class="reading-resume-icon" aria-hidden="true"><i class="fa-solid fa-book-open"></i></div> <div> <strong>继续上次阅读？</strong> <p>你上次读到了 <span data-reading-resume-percent>--</span>。</p> </div> <div class="reading-resume-actions"> <button type="button" data-reading-continue>继续阅读</button> <button type="button" data-reading-restart>从头开始</button> </div> </aside> <section class="post-layout"> <article class="article post-article"> <header class="article-header article-header-cover"> <img class="article-header-cover-img" src="https://pic.biss.click/image/c0211558-17e4-46d2-9a35-e12f16f3f900.webp" alt="" loading="eager" decoding="async"> <div class="article-header-content"> <div class="article-date-line"> <time datetime="2025-08-10T19:30:40.000Z">发布于 2025/08/11</time> </div> <h1>在侧边栏中添加欢迎信息</h1> <div class="article-hero-meta" aria-label="文章信息"> <span>发布于 2025/08/11</span> <a href="/categories/site-notes/">建站手札</a> <span>总字数：580</span> <span>阅读时长：2 分钟</span> </div> </div> </header> <section class="article-summary-card" aria-label="文章导读"> <div class="article-summary-header"> <span class="article-summary-brand"> <span class="article-summary-icon" aria-hidden="true">↳</span>
文章导读
</span> <span class="article-summary-model">摘要由 Qwen 生成</span> </div> <p class="article-summary-content"> <span class="article-summary-text">这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含&#39;https://&#39;。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。</span> </p> </section> <section class="post-series" aria-labelledby="post-series-title"> <header class="post-series-head"> <div> <span>ARTICLE SERIES</span> <h2 id="post-series-title">博客定制手记</h2> </div> <strong>第 2 / 14 篇</strong> </header> <ol class="post-series-list"> <li> <a href="/posts/ad244066/"> <span>01</span> <strong>配置说说页面</strong> </a> </li><li class="is-current"> <a href="/posts/da17d00/" aria-current="page"> <span>02</span> <strong>在侧边栏中添加欢迎信息</strong> </a> </li><li> <a href="/posts/8bdb35fb/"> <span>03</span> <strong>自定义右键菜单</strong> </a> </li><li> <a href="/posts/a6ab0925/"> <span>04</span> <strong>利用插件自定义页脚菜单</strong> </a> </li><li> <a href="/posts/41b9aff7/"> <span>05</span> <strong>博客添加AI总结</strong> </a> </li><li> <a href="/posts/b5866b9e/"> <span>06</span> <strong>利用 SiteMap 随机访问站内页面</strong> </a> </li><li> <a href="/posts/3e61a389/"> <span>07</span> <strong>自定义导航栏</strong> </a> </li><li> <a href="/posts/33249733/"> <span>08</span> <strong>自定义分类条</strong> </a> </li><li> <a href="/posts/c6143ad3/"> <span>09</span> <strong>自定义页脚（新）</strong> </a> </li><li> <a href="/posts/ce1ec3fe/"> <span>10</span> <strong>使用GitHub推送Hexo到服务器</strong> </a> </li><li> <a href="/posts/5ed2f1e6/"> <span>11</span> <strong>在侧边栏添加日历和倒计时</strong> </a> </li><li> <a href="/posts/b5601a7e/"> <span>12</span> <strong>自定义字体</strong> </a> </li><li> <a href="/posts/f287c563/"> <span>13</span> <strong>添加typesense搜索</strong> </a> </li><li> <a href="/posts/7e921903/"> <span>14</span> <strong>添加网站左上角菜单</strong> </a> </li> </ol> <nav class="post-series-nav" aria-label="系列文章导航"> <a href="/posts/ad244066/" rel="prev"><span>上一篇</span><strong>配置说说页面</strong></a> <a href="/posts/8bdb35fb/" rel="next"><span>下一篇</span><strong>自定义右键菜单</strong></a> </nav> </section> <aside class="butterfly-note butterfly-note--warning article-outdated-note" aria-label="文章时效性提示" data-freshness-at="2025-08-10T19:30:40.000Z" data-has-new-version="false" hidden> <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> <div class="butterfly-note__content"> <p>
注意：本文最后维护于 2025/08/11，距今已超过一年，部分内容可能已经过时，请结合最新资料判断。
</p> </div> </aside> <div class="prose" data-toc="[{&quot;depth&quot;:1,&quot;text&quot;:&quot;效果展示&quot;,&quot;id&quot;:&quot;效果展示&quot;},{&quot;depth&quot;:1,&quot;text&quot;:&quot;开始折腾&quot;,&quot;id&quot;:&quot;开始折腾&quot;},{&quot;depth&quot;:2,&quot;text&quot;:&quot;申请腾讯地图的api key&quot;,&quot;id&quot;:&quot;申请腾讯地图的api-key&quot;},{&quot;depth&quot;:2,&quot;text&quot;:&quot;添加js&quot;,&quot;id&quot;:&quot;添加js&quot;},{&quot;depth&quot;:2,&quot;text&quot;:&quot;添加css文件&quot;,&quot;id&quot;:&quot;添加css文件&quot;},{&quot;depth&quot;:1,&quot;text&quot;:&quot;引用&quot;,&quot;id&quot;:&quot;引用&quot;},{&quot;depth&quot;:1,&quot;text&quot;:&quot;参考内容&quot;,&quot;id&quot;:&quot;参考内容&quot;}]"> <div class="butterfly-note butterfly-note--warning butterfly-note--simple"><i class="fa-solid fa-circle-info" aria-hidden="true"></i><div class="butterfly-note__content"><p>注意：本文为早期 Hexo / Butterfly 魔改记录，本站现已迁移到 Astro，相关代码、路径或插件可能已经失效，仅作历史参考。</p></div></div>
<h1 id="效果展示">效果展示</h1>
<center><img src="https://pic.biss.click/image/e37d7241-ed48-4595-ba18-c4de11289adf.webp" alt="效果展示"></center>
<h1 id="开始折腾">开始折腾</h1>
<h2 id="申请腾讯地图的api-key">申请腾讯地图的api key</h2>
<a class="hexo-link-card" href="https://lbs.qq.com/dev/console/application/mine" target="_blank" rel="external nofollow noopener noreferrer">
<span class="hexo-link-card__icon" aria-hidden="true">T</span>
<span class="hexo-link-card__body">
<strong>腾讯地图</strong>
<span>Tencent · lbs.qq.com</span>
</span>
</a>
自行查看文档,要注意在填写信任域名时不填 https://
<h2 id="添加js">添加js</h2>
<p>在主题 <code>/source/js/</code>目录下添加 <code>txmap.js</code></p>
<p>有一个更完善的js脚本</p>
<a class="hexo-link-card" href="https://github.com/bishshi/welcomemessage" target="_blank" rel="external nofollow noopener noreferrer">
<span class="hexo-link-card__icon" aria-hidden="true">G</span>
<span class="hexo-link-card__body">
<strong>txmap.js</strong>
<span>github · github.com</span>
</span>
</a>
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#6A737D">//get请求</span></span>
<span class="line"><span style="color:#E1E4E8">$.</span><span style="color:#B392F0">ajax</span><span style="color:#E1E4E8">({</span></span>
<span class="line"><span style="color:#E1E4E8"> type: </span><span style="color:#9ECBFF">'get'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> url: </span><span style="color:#9ECBFF">'https://apis.map.qq.com/ws/location/v1/ip'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> data: {</span></span>
<span class="line"><span style="color:#E1E4E8"> key: </span><span style="color:#9ECBFF">'你的key'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> output: </span><span style="color:#9ECBFF">'jsonp'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> callback: </span><span style="color:#9ECBFF">'?'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> },</span></span>
<span class="line"><span style="color:#E1E4E8"> dataType: </span><span style="color:#9ECBFF">'jsonp'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#B392F0"> success</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">res</span><span style="color:#E1E4E8">) {</span></span>
<span class="line"><span style="color:#E1E4E8"> window.ipLocation </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> res;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#E1E4E8">})</span></span>
<span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> getDistance</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">e1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">n1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">e2</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">n2</span><span style="color:#E1E4E8">) {</span></span>
<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> R</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 6371</span></span>
<span class="line"><span style="color:#F97583"> const</span><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">sin</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">cos</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">asin</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">PI</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">hypot</span><span style="color:#E1E4E8"> } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Math</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#B392F0"> getPoint</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">e</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">n</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#E1E4E8"> e </span><span style="color:#F97583">*=</span><span style="color:#79B8FF"> PI</span><span style="color:#F97583"> /</span><span style="color:#79B8FF"> 180</span></span>
<span class="line"><span style="color:#E1E4E8"> n </span><span style="color:#F97583">*=</span><span style="color:#79B8FF"> PI</span><span style="color:#F97583"> /</span><span style="color:#79B8FF"> 180</span></span>
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> { x: </span><span style="color:#B392F0">cos</span><span style="color:#E1E4E8">(n) </span><span style="color:#F97583">*</span><span style="color:#B392F0"> cos</span><span style="color:#E1E4E8">(e), y: </span><span style="color:#B392F0">cos</span><span style="color:#E1E4E8">(n) </span><span style="color:#F97583">*</span><span style="color:#B392F0"> sin</span><span style="color:#E1E4E8">(e), z: </span><span style="color:#B392F0">sin</span><span style="color:#E1E4E8">(n) }</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> a </span><span style="color:#F97583">=</span><span style="color:#B392F0"> getPoint</span><span style="color:#E1E4E8">(e1, n1)</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> b </span><span style="color:#F97583">=</span><span style="color:#B392F0"> getPoint</span><span style="color:#E1E4E8">(e2, n2)</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> c </span><span style="color:#F97583">=</span><span style="color:#B392F0"> hypot</span><span style="color:#E1E4E8">(a.x </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> b.x, a.y </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> b.y, a.z </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> b.z)</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> r </span><span style="color:#F97583">=</span><span style="color:#B392F0"> asin</span><span style="color:#E1E4E8">(c </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 2</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> R</span></span>
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">round</span><span style="color:#E1E4E8">(r);</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> showWelcome</span><span style="color:#E1E4E8">() {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> dist </span><span style="color:#F97583">=</span><span style="color:#B392F0"> getDistance</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">112.92358</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">35.79807</span><span style="color:#E1E4E8">, ipLocation.result.location.lng, ipLocation.result.location.lat); </span><span style="color:#6A737D">//这里记得换成自己的经纬度</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> pos </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> ipLocation.result.ad_info.nation;</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> ip;</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> posdesc;</span></span>
<span class="line"><span style="color:#6A737D"> //根据国家、省份、城市信息自定义欢迎语</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.nation) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "日本"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "よろしく，一起去看樱花吗"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "美国"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "Let us live in peace!"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "英国"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "想同你一起夜乘伦敦眼"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "俄罗斯"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "干了这瓶伏特加！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "法国"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "C'est La Vie"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "德国"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "Die Zeit verging im Fluge."</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "澳大利亚"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "一起去大堡礁吧！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "加拿大"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "拾起一片枫叶赠予你"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "中国"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> pos </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> ipLocation.result.ad_info.province </span><span style="color:#F97583">+</span><span style="color:#9ECBFF"> " "</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> ipLocation.result.ad_info.city </span><span style="color:#F97583">+</span><span style="color:#9ECBFF"> " "</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> ipLocation.result.ad_info.district;</span></span>
<span class="line"><span style="color:#E1E4E8"> ip </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> ipLocation.result.ip;</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.province) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "北京市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "北——京——欢迎你~~~"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "天津市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "讲段相声吧"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "河北省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "山西省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.city) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "太原市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "秋叶蓝不城"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "晋城市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "一方水土养一方人，晋城话说给晋城人..."</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "展开坐具长三尺，已占山河五百余"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "内蒙古自治区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "天苍苍，野茫茫，风吹草低见牛羊"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "辽宁省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "我想吃烤鸡架！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "吉林省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "状元阁就是东北烧烤之王"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "黑龙江省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "很喜欢哈尔滨大剧院"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "上海市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "众所周知，中国只有两个城市"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "江苏省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.city) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "南京市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "这是我挺想去的城市啦"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "苏州市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "上有天堂，下有苏杭"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "散装是必须要散装的"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "浙江省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "东风渐绿西湖柳，雁已还人未南归"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "河南省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.city) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "郑州市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "豫州之域，天地之中"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "南阳市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "臣本布衣，躬耕于南阳此南阳非彼南阳！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "驻马店市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "开封市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "刚正不阿包青天"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "洛阳市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "洛阳牡丹甲天下"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "可否带我品尝河南烩面啦？"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "安徽省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "蚌埠住了，芜湖起飞"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "福建省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "井邑白云间，岩城远带山"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "江西省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "落霞与孤鹜齐飞，秋水共长天一色"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "山东省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "遥望齐州九点烟，一泓海水杯中泻"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "湖北省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.city) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "黄冈市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "红安将军县！辈出将才！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "来碗热干面~"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "湖南省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "74751，长沙斯塔克"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "广东省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#F97583"> switch</span><span style="color:#E1E4E8"> (ipLocation.result.ad_info.city) {</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "广州市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "看小蛮腰，喝早茶了嘛~"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "深圳市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "今天你逛商场了嘛~"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "阳江市"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "阳春合水！博主家乡~ 欢迎来玩~"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "来两斤福建人~"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "广西壮族自治区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "桂林山水甲天下"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "海南省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "朝观日出逐白浪，夕看云起收霞光"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "四川省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "康康川妹子"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "贵州省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "茅台，学生，再塞200"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "云南省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "玉龙飞舞云缠绕，万仞冰川直耸天"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "西藏自治区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "躺在茫茫草原上，仰望蓝天"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "陕西省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "来份臊子面加馍"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "甘肃省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "羌笛何须怨杨柳，春风不度玉门关"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "青海省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "牛肉干和老酸奶都好好吃"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "宁夏回族自治区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "大漠孤烟直，长河落日圆"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "新疆维吾尔自治区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "驼铃古道丝绸路，胡马犹闻唐汉风"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "台湾省"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "我在这头，大陆在那头"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "香港特别行政区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "永定贼有残留地鬼嚎，迎击光非岁玉"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> case</span><span style="color:#9ECBFF"> "澳门特别行政区"</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "性感荷官，在线发牌"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "带我去你的城市逛逛吧！"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> default</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#E1E4E8"> posdesc </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "带我去你的国家逛逛吧"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> break</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D"> //根据本地时间切换欢迎语</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> timeChange;</span></span>
<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> date </span><span style="color:#F97583">=</span><span style="color:#F97583"> new</span><span style="color:#B392F0"> Date</span><span style="color:#E1E4E8">();</span></span>
<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">>=</span><span style="color:#79B8FF"> 5</span><span style="color:#F97583"> &#x26;&#x26;</span><span style="color:#E1E4E8"> date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">&#x3C;</span><span style="color:#79B8FF"> 11</span><span style="color:#E1E4E8">) timeChange </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "&#x3C;span>🌤️ 早上好，一日之计在于晨&#x3C;/span>"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">>=</span><span style="color:#79B8FF"> 11</span><span style="color:#F97583"> &#x26;&#x26;</span><span style="color:#E1E4E8"> date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">&#x3C;</span><span style="color:#79B8FF"> 13</span><span style="color:#E1E4E8">) timeChange </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "&#x3C;span>☀️ 中午好，记得午休喔~&#x3C;/span>"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">>=</span><span style="color:#79B8FF"> 13</span><span style="color:#F97583"> &#x26;&#x26;</span><span style="color:#E1E4E8"> date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">&#x3C;</span><span style="color:#79B8FF"> 17</span><span style="color:#E1E4E8">) timeChange </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "&#x3C;span>🕞 下午好，饮茶先啦！&#x3C;/span>"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">>=</span><span style="color:#79B8FF"> 17</span><span style="color:#F97583"> &#x26;&#x26;</span><span style="color:#E1E4E8"> date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">&#x3C;</span><span style="color:#79B8FF"> 19</span><span style="color:#E1E4E8">) timeChange </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "&#x3C;span>🚶‍♂️ 即将下班，记得按时吃饭~&#x3C;/span>"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">>=</span><span style="color:#79B8FF"> 19</span><span style="color:#F97583"> &#x26;&#x26;</span><span style="color:#E1E4E8"> date.</span><span style="color:#B392F0">getHours</span><span style="color:#E1E4E8">() </span><span style="color:#F97583">&#x3C;</span><span style="color:#79B8FF"> 24</span><span style="color:#E1E4E8">) timeChange </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "&#x3C;span>🌙 晚上好，夜生活嗨起来！&#x3C;/span>"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#F97583"> else</span><span style="color:#E1E4E8"> timeChange </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "夜深了，早点休息，少熬夜"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D">// 新增ipv6显示为指定内容</span></span>
<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (ip.</span><span style="color:#B392F0">includes</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">":"</span><span style="color:#E1E4E8">)) {</span></span>
<span class="line"><span style="color:#E1E4E8"> ip </span><span style="color:#F97583">=</span><span style="color:#9ECBFF"> "&#x3C;br>好复杂，咱看不懂~(ipv6)"</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#F97583"> try</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#6A737D"> //自定义文本和需要放的位置</span></span>
<span class="line"><span style="color:#E1E4E8"> document.</span><span style="color:#B392F0">getElementById</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"welcome-info"</span><span style="color:#E1E4E8">).innerHTML </span><span style="color:#F97583">=</span></span>
<span class="line"><span style="color:#9ECBFF"> `欢迎来自 &#x3C;b>&#x3C;span style="color: var(--kouseki-ip-color);font-size: var(--kouseki-gl-size)">${</span><span style="color:#E1E4E8">pos</span><span style="color:#9ECBFF">}&#x3C;/span>&#x3C;/b> 的小友💖&#x3C;br>${</span><span style="color:#E1E4E8">posdesc</span><span style="color:#9ECBFF">}🍂&#x3C;br>当前位置距博主约 &#x3C;b>&#x3C;span style="color: var(--kouseki-ip-color)">${</span><span style="color:#E1E4E8">dist</span><span style="color:#9ECBFF">}&#x3C;/span>&#x3C;/b> 公里！&#x3C;br>您的IP地址为：&#x3C;b>&#x3C;span class="ip-mask">${</span><span style="color:#E1E4E8">ip</span><span style="color:#9ECBFF">}&#x3C;/span>&#x3C;/b>&#x3C;br>${</span><span style="color:#E1E4E8">timeChange</span><span style="color:#9ECBFF">} &#x3C;br>`</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> } </span><span style="color:#F97583">catch</span><span style="color:#E1E4E8"> (err) {</span></span>
<span class="line"><span style="color:#E1E4E8"> console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"Pjax无法获取元素"</span><span style="color:#E1E4E8">)</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span>
<span class="line"><span style="color:#E1E4E8">window.onload </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> showWelcome;</span></span>
<span class="line"><span style="color:#6A737D">// 如果使用了pjax在加上下面这行代码</span></span>
<span class="line"><span style="color:#E1E4E8">document.</span><span style="color:#B392F0">addEventListener</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'pjax:complete'</span><span style="color:#E1E4E8">, showWelcome);</span></span></code></pre>
<h2 id="添加css文件">添加css文件</h2>
<p>在主题文件夹/source/css/在这里我添加了模糊IP地址。</p>
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="css"><code><span class="line"><span style="color:#B392F0">#welcome-info</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#79B8FF"> overflow</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">hidden</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#79B8FF"> border-radius</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">14</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#FFAB70"> --kouseki-welcome-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#49B1F5</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#FFAB70"> --kouseki-ip-color</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">#49B1F5</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#FFAB70"> --kouseki-gl-size</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">16</span><span style="color:#F97583">px!important</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#6A737D">/* 给 IP 地址的 span 再包一层，便于选择器定位 */</span></span>
<span class="line"><span style="color:#6A737D">/* JS 原文已经生成 &#x3C;b>&#x3C;span>IP&#x3C;/span>&#x3C;/b>，这里我们给这个 span 加类名 ip-mask */</span></span>
<span class="line"><span style="color:#6A737D">/* 如果你不方便改 HTML，可直接用属性选择器：#welcome-info b span:nth-child(1) */</span></span>
<span class="line"><span style="color:#B392F0">#welcome-info</span><span style="color:#85E89D"> b</span><span style="color:#85E89D"> span</span><span style="color:#B392F0">.ip-mask</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#79B8FF"> display</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">inline-block</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#79B8FF"> filter</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">blur</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">6</span><span style="color:#F97583">px</span><span style="color:#E1E4E8">);</span></span>
<span class="line"><span style="color:#79B8FF"> transition</span><span style="color:#E1E4E8">: filter </span><span style="color:#79B8FF">.3</span><span style="color:#F97583">s</span><span style="color:#79B8FF"> ease</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#79B8FF"> cursor</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">pointer</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#79B8FF"> user-select</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">none</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">/* 防止复制到模糊文本 */</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D">/* 鼠标悬停或点击时（:active）立即清晰 */</span></span>
<span class="line"><span style="color:#B392F0">#welcome-info</span><span style="color:#85E89D"> b</span><span style="color:#85E89D"> span</span><span style="color:#B392F0">.ip-mask:hover</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#B392F0">#welcome-info</span><span style="color:#85E89D"> b</span><span style="color:#85E89D"> span</span><span style="color:#B392F0">.ip-mask:active</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#79B8FF"> filter</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">blur</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">);</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D">/* 如果想做成「必须点一下才永久清晰」，把 :hover 去掉即可 */</span></span></code></pre>
<h1 id="引用">引用</h1>
<p>在主题配置文件中添加</p>
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="yml"><code><span class="line"><span style="color:#85E89D">inject</span><span style="color:#E1E4E8">: </span></span>
<span class="line"><span style="color:#85E89D"> bottom</span><span style="color:#E1E4E8">: </span></span>
<span class="line"><span style="color:#9ECBFF">+ - &#x3C;script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js">&#x3C;/script></span><span style="color:#6A737D"> # jQuery</span></span>
<span class="line"><span style="color:#9ECBFF">+ - &#x3C;script async data-pjax src="/js/txmap.js">&#x3C;/script></span><span style="color:#6A737D"> # 腾讯位置API</span></span></code></pre>
<p>在需要展示文本的容器上添加相应id（<code>welcome-info</code>）就可以了，例如我想添加在网站公告栏信息的下方，于是就在 <code>[BlogRoot]\themes\butterfly\layout\includes\widget\card_announcement.pug</code>的最后一行加上这个，缩进与上一行相同即可</p>
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0" data-language="pug"><code><span class="line"><span style="color:#B392F0"> .announcement_content</span><span style="color:#79B8FF">!=</span><span style="color:#E1E4E8"> theme.aside.card_announcement.content</span></span>
<span class="line"><span style="color:#6A737D"> //- 添加欢迎访客的信息</span></span>
<span class="line"><span style="color:#E1E4E8">+ #welcome-info</span></span></code></pre>
<h1 id="参考内容">参考内容</h1>
<a class="hexo-link-card" href="https://ganzhe2028.github.io/posts/14542" target="_blank" rel="external nofollow noopener noreferrer">
<span class="hexo-link-card__icon" aria-hidden="true">G</span>
<span class="hexo-link-card__body">
<strong>Ganzhe的博文</strong>
<span>Ganzhe · ganzhe2028.github.io</span>
</span>
</a> </div> <section class="post-copyright-card" aria-label="文章版权信息"> <div class="post-copyright-mark" aria-hidden="true"> <span>CC</span> </div> <div class="post-copyright-main"> <h2>在侧边栏中添加欢迎信息</h2> <a class="post-copyright-link" href="/posts/da17d00/">/posts/da17d00/</a> <dl class="post-copyright-meta"> <div> <dt>作者</dt> <dd>biss</dd> </div> <div> <dt>发布于</dt> <dd><time datetime="2025-08-10T19:30:40.000Z">2025/08/11</time></dd> </div> <div> <dt>许可协议</dt> <dd><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noreferrer">CC BY-NC-SA 4.0</a></dd> </div> </dl> </div> <div class="post-copyright-footer"> <div class="post-copyright-tags" aria-label="文章标签"> <a href="/tags/%E7%BD%91%E7%AB%99/">网站</a> </div> <div class="post-copyright-actions" aria-label="文章操作"> <button class="post-copyright-action is-primary post-share-button" type="button" data-share-title="在侧边栏中添加欢迎信息" data-share-url="https://blog.biss.click/posts/da17d00/" title="分享文章"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"></path> <path d="M12 16V4"></path> <path d="m7 9 5-5 5 5"></path> </svg> <span>分享</span> </button> <a class="post-copyright-action" href="/rss.xml" title="订阅 RSS"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M5 5a14 14 0 0 1 14 14"></path> <path d="M5 11a8 8 0 0 1 8 8"></path> <path d="M6 18h.01"></path> </svg> <span>订阅</span> </a> <a class="post-copyright-action" href="/about/" title="打赏作者"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M7 8h10"></path> <path d="M8 8V5h8v3"></path> <path d="M6 8h12l-1.5 11h-9L6 8Z"></path> <path d="M10 12h4"></path> </svg> <span>打赏</span> </a> <a class="post-copyright-icon" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fblog.biss.click%2Fposts%2Fda17d00%2F&amp;text=%E5%9C%A8%E4%BE%A7%E8%BE%B9%E6%A0%8F%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%AC%A2%E8%BF%8E%E4%BF%A1%E6%81%AF" target="_blank" rel="noreferrer" title="分享到 X"> <span aria-hidden="true">x</span> </a> <a class="post-copyright-icon" href="https://service.weibo.com/share/share.php?url=https%3A%2F%2Fblog.biss.click%2Fposts%2Fda17d00%2F&amp;title=%E5%9C%A8%E4%BE%A7%E8%BE%B9%E6%A0%8F%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%AC%A2%E8%BF%8E%E4%BF%A1%E6%81%AF" target="_blank" rel="noreferrer" title="分享到微博"> <span aria-hidden="true">微</span> </a> </div> </div> </section> <script>
(() => {
document.querySelectorAll('.post-share-button').forEach((button) => {
button.addEventListener('click', async () => {
const title = button.dataset.shareTitle || document.title;
const url = button.dataset.shareUrl || window.location.href;
const label = button.querySelector('span');
const originalText = label?.textContent || '分享';
try {
if (navigator.share) {
await navigator.share({ title, url });
return;
}
await navigator.clipboard.writeText(url);
if (label) label.textContent = '已复制';
} catch {
if (label) label.textContent = '复制失败';
} finally {
window.setTimeout(() => {
if (label) label.textContent = originalText;
}, 1800);
}
});
});
})();
</script> <section id="post-comment" class="twikoo-comments" aria-label="Comments" data-env-id="https://comment.biss.click" data-region data-path="/posts/da17d00/" data-script="https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"> <div class="twikoo-comments-head"> <span class="twikoo-comments-icon" aria-hidden="true"> <svg viewBox="0 0 24 24"> <path d="M21 12a8 8 0 0 1-8 8H7l-4 3v-5a8 8 0 1 1 18-6Z"></path> </svg> </span> <div> <h2>Comments</h2> <p>在侧边栏中添加欢迎信息</p> </div> </div> <div id="twikoo-wrap" class="twikoo-wrap"></div> </section> <script>
(() => {
const root = document.getElementById('post-comment');
const wrap = document.getElementById('twikoo-wrap');
if (!root || !wrap || root.dataset.twikooLoaded === 'true') return;
const envId = root.dataset.envId;
const path = root.dataset.path || window.location.pathname;
const region = root.dataset.region || undefined;
if (!envId) return;
root.dataset.twikooLoaded = 'true';
const initTwikoo = () => {
if (!window.twikoo || typeof window.twikoo.init !== 'function') return;
window.twikoo.init({
el: wrap,
envId,
region,
path,
});
};
if (window.twikoo) {
initTwikoo();
return;
}
const script = document.createElement('script');
script.src = root.dataset.script;
script.defer = true;
script.onload = initTwikoo;
script.onerror = () => {
root.dataset.twikooLoaded = 'false';
};
document.head.appendChild(script);
})();
</script> </article> <aside class="article-sidebar" aria-label="文章侧边栏"> <section class="sidebar-card article-author-card"> <img class="profile-avatar" src="https://free.picui.cn/free/2025/08/10/689845496a283.png" alt="biss" loading="lazy"> <div class="profile-name">biss</div> <div class="article-author-meta"> <span>2025/08/11</span> <a href="/categories/site-notes/">建站手札</a> </div> </section> <section class="sidebar-card article-tags-card"> <h2> <span aria-hidden="true">#</span>
文章标签
<em>1</em> </h2> <div class="article-tag-list" aria-label="文章标签"> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </section> <div class="article-sticky-sidebar"> <section class="sidebar-card toc-card"> <h2> <span aria-hidden="true">☰</span>
文章目录
<em>7</em> </h2> <nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree> <div class="toc-group is-open" data-toc-group data-heading-id="效果展示"> <a class="toc-link toc-link-main" href="#效果展示" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>效果展示</span> </a> </div><div class="toc-group" data-toc-group data-heading-id="开始折腾"> <a class="toc-link toc-link-main" href="#开始折腾" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>开始折腾</span> </a> <div class="toc-children" data-toc-children> <a class="toc-link toc-link-child toc-depth-2" href="#申请腾讯地图的api-key" data-toc-link> <span>申请腾讯地图的api key</span> </a><a class="toc-link toc-link-child toc-depth-2" href="#添加js" data-toc-link> <span>添加js</span> </a><a class="toc-link toc-link-child toc-depth-2" href="#添加css文件" data-toc-link> <span>添加css文件</span> </a> </div> </div><div class="toc-group" data-toc-group data-heading-id="引用"> <a class="toc-link toc-link-main" href="#引用" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>引用</span> </a> </div><div class="toc-group" data-toc-group data-heading-id="参考内容"> <a class="toc-link toc-link-main" href="#参考内容" data-toc-link data-toc-top> <span class="toc-marker" aria-hidden="true"></span> <span>参考内容</span> </a> </div> </nav> </section> <section class="sidebar-card same-category-card"> <h2> <span aria-hidden="true">▣</span>
同类文章
<em>8</em> </h2> <div class="same-category-list"> <a href="/posts/8f3b9d21/"> <strong>网站迁移日志</strong> <time datetime="2026-06-19T16:45:00.000Z">2026/06/20</time> </a><a href="/posts/4c91a8f2/"> <strong>用 Umami 分享链接给网站信息卡提供统计数据</strong> <time datetime="2026-06-19T08:58:00.000Z">2026/06/19</time> </a><a href="/posts/7e921903/"> <strong>添加网站左上角菜单</strong> <time datetime="2026-02-10T07:11:14.000Z">2026/02/10</time> </a><a href="/posts/f287c563/"> <strong>添加typesense搜索</strong> <time datetime="2026-02-05T13:14:16.000Z">2026/02/05</time> </a><a href="/posts/b5601a7e/"> <strong>自定义字体</strong> <time datetime="2026-01-16T07:47:15.000Z">2026/01/16</time> </a><a href="/posts/5ed2f1e6/"> <strong>在侧边栏添加日历和倒计时</strong> <time datetime="2026-01-16T07:47:07.000Z">2026/01/16</time> </a><a href="/posts/3a26a97a/"> <strong>为博客添加CMS系统</strong> <time datetime="2025-08-25T22:03:00.000Z">2025/08/26</time> </a><a href="/posts/ce1ec3fe/"> <strong>使用GitHub推送Hexo到服务器</strong> <time datetime="2025-08-18T17:10:18.000Z">2025/08/19</time> </a> </div> </section> <section class="sidebar-card site-info-card" data-site-info-card data-stats-endpoint="https://blogumami.biss.click"> <h2><i class="fa-solid fa-chart-line" aria-hidden="true"></i> 网站信息</h2> <dl class="site-info-list"> <div> <dt>文章数目</dt> <dd>44</dd> </div><div> <dt>本站总字数</dt> <dd>36,128</dd> </div><div> <dt>本站访客数</dt> <dd data-stat-key="visitors">--</dd> </div><div> <dt>本站访问量</dt> <dd data-stat-key="pageviews">--</dd> </div><div> <dt>最后更新时间</dt> <dd>2026/06/20</dd> </div> </dl> </section> <script>
(() => {
const cacheDuration = 10 * 60 * 1000;
const formatter = new Intl.NumberFormat('en-US');
const cards = [...document.querySelectorAll('[data-site-info-card]')];
const endpoint = cards.find((card) => card.dataset.statsEndpoint)?.dataset.statsEndpoint;
if (!endpoint) return;
const cacheKey = `site-info-stats:${endpoint}`;
const updateCards = (stats) => {
const visitors = Number(stats?.visitors);
const pageviews = Number(stats?.pageviews);
cards.forEach((card) => {
const visitorsEl = card.querySelector('[data-stat-key="visitors"]');
const pageviewsEl = card.querySelector('[data-stat-key="pageviews"]');
if (visitorsEl && Number.isFinite(visitors)) visitorsEl.textContent = formatter.format(visitors);
if (pageviewsEl && Number.isFinite(pageviews)) pageviewsEl.textContent = formatter.format(pageviews);
});
};
try {
const cached = JSON.parse(localStorage.getItem(cacheKey) || 'null');
if (cached?.time && Date.now() - cached.time < cacheDuration) {
updateCards(cached.data);
return;
}
} catch {
localStorage.removeItem(cacheKey);
}
fetch(endpoint, { headers: { Accept: 'application/json' } })
.then((response) => {
if (!response.ok) throw new Error(`Stats request failed: ${response.status}`);
return response.json();
})
.then((data) => {
localStorage.setItem(cacheKey, JSON.stringify({ time: Date.now(), data }));
updateCards(data);
})
.catch(() => {
});
})();
</script> </div> </aside> </section> </main> <footer class="site-footer" aria-label="站点页脚"> <div class="footer-inner"> <section class="footer-top" aria-label="站点信息"> <a class="footer-brand" href="/" aria-label="Bi's Blog 首页"> <img src="/images/Bi.ico" alt="" loading="lazy"> <span>Bi&#39;s Blog</span> </a> <p class="footer-slogan">好奇心转化为代码的空间。</p> </section> <section class="footer-contact" aria-label="联系方式"> <p>联系方式</p> <div class="footer-socials"> <a href="mailto:bishsh2006@gmail.com" aria-label="发送邮件" title="发送邮件"> <i class="fa-solid fa-envelope" aria-hidden="true"></i> </a><a href="/rss.xml" aria-label="订阅 RSS" title="订阅 RSS"> <i class="fa-solid fa-rss" aria-hidden="true"></i> </a><a href="https://github.com/bishshi" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub"> <i class="fa-brands fa-github" aria-hidden="true"></i> </a> </div> <nav class="footer-contact-links" aria-label="页脚链接"> <a href="/archives/">发展历程</a> <span aria-hidden="true">|</span><a href="/privacy/">隐私政策</a> </nav> </section> <section class="footer-bottom" aria-label="版权信息"> <div> <p>© 2025 - 2026 Bi&#39;s Blog</p> <p>blog.biss.click | 内容采用 CC BY-NC-SA 4.0 协议</p> </div> <div class="footer-meta"> <p>本站已运行：<span id="site-runtime">计算中...</span></p> <p> <a href="https://fastly.com/" target="_blank" rel="noreferrer">Fastly</a> <span aria-hidden="true">|</span><a href="https://astro.build/" target="_blank" rel="noreferrer">ASTRO</a> </p> </div> </section> </div> </footer> <aside class="hitokoto-card is-collapsed" aria-label="一言" data-hitokoto-card data-astro-cid-4cgfuthx> <div class="hitokoto-card__head" data-astro-cid-4cgfuthx> <button class="hitokoto-card__toggle" type="button" aria-label="展开一言" aria-expanded="false" title="一言" data-hitokoto-toggle data-astro-cid-4cgfuthx> <i class="fa-solid fa-quote-left" aria-hidden="true" data-astro-cid-4cgfuthx></i> <span data-astro-cid-4cgfuthx>一言</span> </button> <div class="hitokoto-card__actions" data-astro-cid-4cgfuthx> <button class="hitokoto-card__refresh" type="button" aria-label="换一句" title="换一句" data-hitokoto-refresh data-astro-cid-4cgfuthx> <i class="fa-solid fa-rotate" aria-hidden="true" data-astro-cid-4cgfuthx></i> </button> <button class="hitokoto-card__collapse" type="button" aria-label="收起一言" title="收起" data-hitokoto-collapse data-astro-cid-4cgfuthx> <i class="fa-solid fa-chevron-down" aria-hidden="true" data-astro-cid-4cgfuthx></i> </button> </div> </div> <a class="hitokoto-card__text" href="https://hitokoto.cn/" target="_blank" rel="noreferrer" data-hitokoto-text data-astro-cid-4cgfuthx>
获取中...
</a> <p class="hitokoto-card__from" data-hitokoto-from data-astro-cid-4cgfuthx>来自 Hitokoto</p> </aside> <script type="module">(()=>{const o=document.querySelector("[data-hitokoto-card]"),c=o?.querySelector("[data-hitokoto-toggle]"),s=o?.querySelector("[data-hitokoto-text]"),l=o?.querySelector("[data-hitokoto-from]"),g=o?.querySelector("[data-hitokoto-refresh]"),k=o?.querySelector("[data-hitokoto-collapse]");if(!(o instanceof HTMLElement)||!(c instanceof HTMLButtonElement)||!(s instanceof HTMLAnchorElement)||!(l instanceof HTMLElement))return;const y="https://yiyan.biss.click/api?encode=json",u="hitokoto-card-cache",d="hitokoto-card-expanded",x=360*60*1e3,f={sentence:"生活明朗，万物可爱。",source:"本地缓存",url:"https://hitokoto.cn/"},S=["/","/index.html"].includes(window.location.pathname),w=window.matchMedia("(max-width: 720px)");function E(){try{const t=localStorage.getItem(d);if(t==="true")return!0;if(t==="false")return!1}catch{}return null}function L(t){try{localStorage.setItem(d,String(t))}catch{}}function r(t,{persist:e=!1}={}){o.classList.toggle("is-collapsed",!t),c.setAttribute("aria-expanded",String(t)),c.setAttribute("aria-label",t?"收起一言":"展开一言"),e&&L(t)}function h(){try{const t=localStorage.getItem(u);if(!t)return null;const e=JSON.parse(t);return!e||typeof e.expiresAt!="number"||e.expiresAt<=Date.now()?null:e.data}catch{return null}}function H(t){try{localStorage.setItem(u,JSON.stringify({data:t,expiresAt:Date.now()+x}))}catch{}}function i(t){s.textContent=t.sentence,s.href=t.url||"https://hitokoto.cn/",l.textContent=t.source?`出自 ${t.source}`:"来自 Hitokoto"}async function p({force:t=!1}={}){if(!t){const e=h();if(e){i(e);return}}o.classList.add("is-loading"),s.textContent="获取中...";try{const e=await fetch(y);if(!e.ok)throw new Error(`Hitokoto request failed: ${e.status}`);const n=await e.json(),a=n.hitokoto||n.content||n.sentence||n.text,q=typeof a=="string"&&a.trim()?a.trim():f.sentence,A=typeof n.from=="string"&&n.from.trim()?n.from.trim():"Hitokoto",M=n.uuid?`https://hitokoto.cn/?uuid=${encodeURIComponent(n.uuid)}`:"https://hitokoto.cn/",m={sentence:q,source:A,url:M};H(m),i(m)}catch(e){console.error(e),i(h()||f)}finally{o.classList.remove("is-loading")}}const b=E();r(b??(S&&!w.matches)),c.addEventListener("click",()=>{r(o.classList.contains("is-collapsed"),{persist:!0})}),g?.addEventListener("click",t=>{t.stopPropagation(),r(!0,{persist:!0}),p({force:!0})}),k?.addEventListener("click",t=>{t.stopPropagation(),r(!1,{persist:!0})}),o.addEventListener("click",t=>{o.classList.contains("is-collapsed")&&(t.target instanceof Element&&t.target.closest("a, button")||r(!0,{persist:!0}))}),p()})();</script> <div class="custom-context-menu" data-context-menu role="menu" aria-hidden="true"> <div class="context-menu-nav" aria-label="页面导航"> <button type="button" data-context-action="back" aria-label="后退上一页" title="后退上一页"> <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> </button> <button type="button" data-context-action="forward" aria-label="前进下一页" title="前进下一页"> <i class="fa-solid fa-arrow-right" aria-hidden="true"></i> </button> <button type="button" data-context-action="reload" aria-label="刷新页面" title="刷新页面"> <i class="fa-solid fa-rotate-right" aria-hidden="true"></i> </button> <a href="/" aria-label="返回首页" title="返回首页"> <i class="fa-solid fa-house" aria-hidden="true"></i> </a> </div> <div class="context-menu-group" data-selection-group hidden> <button type="button" data-context-action="copy-selection" data-selection-item> <i class="fa-regular fa-copy" aria-hidden="true"></i> <span>复制选中文字</span> </button> <button type="button" data-context-action="search-selection" data-selection-item> <i class="fa-brands fa-microsoft" aria-hidden="true"></i> <span>用 Bing 搜索</span> </button> <button type="button" data-context-action="quote-selection" data-selection-item data-comments-item> <i class="fa-regular fa-comment-dots" aria-hidden="true"></i> <span>引用到评论区</span> </button> </div> <div class="context-menu-group" data-image-group hidden> <button type="button" data-context-action="copy-image"> <i class="fa-regular fa-image" aria-hidden="true"></i> <span>复制图片</span> </button> <button type="button" data-context-action="open-image"> <i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i> <span>新页面打开图片</span> </button> <button type="button" data-context-action="copy-image-url"> <i class="fa-solid fa-link" aria-hidden="true"></i> <span>复制图片地址</span> </button> </div> <div class="context-menu-group"> <a href="/archives/"> <i class="fa-solid fa-box-archive" aria-hidden="true"></i> <span>时间线</span> </a> <a href="/categories/"> <i class="fa-solid fa-folder" aria-hidden="true"></i> <span>分类</span> </a> <a href="/tags/"> <i class="fa-solid fa-hashtag" aria-hidden="true"></i> <span>标签</span> </a> <button type="button" data-context-action="random-post"> <i class="fa-solid fa-shuffle" aria-hidden="true"></i> <span>&#x968F;&#x673A;&#x6587;&#x7AE0;</span> </button> <button type="button" data-context-action="comments" data-comments-item> <i class="fa-regular fa-comment-dots" aria-hidden="true"></i> <span>跳转评论区</span> </button> <button type="button" data-context-action="print"> <i class="fa-solid fa-print" aria-hidden="true"></i> <span>打印页面</span> </button> <a href="/cc/"> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> <span>网站版权</span> </a> </div> </div> <div class="context-menu-native-hint" data-context-native-hint role="note" aria-label="Ctrl 右键提示"> <kbd>Ctrl</kbd> + &#x53F3;&#x952E;&#xFF1A;&#x6D4F;&#x89C8;&#x5668;&#x539F;&#x751F;&#x83DC;&#x5355;
</div> <script>
(() => {
const menu = document.querySelector('[data-context-menu]');
if (!menu) return;
const nativeHint = document.querySelector('[data-context-native-hint]');
const selectionItems = [...menu.querySelectorAll('[data-selection-item]')];
const selectionGroup = menu.querySelector('[data-selection-group]');
const commentsItems = [...menu.querySelectorAll('[data-comments-item]')];
const imageGroup = menu.querySelector('[data-image-group]');
const focusableSelector = 'a[href], button:not([disabled])';
let lastSelectionText = '';
let lastImage = null;
let nativeHintTimer = 0;
const isNativeContextTarget = (target) =>
target instanceof Element &&
Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
const getCommentsTarget = () =>
document.querySelector('.twikoo-comments, #twikoo-wrap, #twikoo, .tk-comments-container');
const getSelectionText = () => String(window.getSelection?.() || '').trim();
const getImageTarget = (target) => {
if (!(target instanceof Element)) return null;
const image = target.closest('img');
return image instanceof HTMLImageElement ? image : null;
};
const getImageUrl = () => {
if (!lastImage) return '';
return lastImage.currentSrc || lastImage.src || lastImage.getAttribute('src') || '';
};
const copyText = async (text) => {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text);
return;
}
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.inset = '0 auto auto -9999px';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
};
const setMenuState = () => {
const hasSelection = lastSelectionText.length > 0;
const hasComments = Boolean(getCommentsTarget());
const hasImage = Boolean(getImageUrl());
selectionItems.forEach((item) => {
item.hidden = !hasSelection;
});
if (selectionGroup) selectionGroup.hidden = !hasSelection;
commentsItems.forEach((item) => {
item.hidden = !hasComments || (item.hasAttribute('data-selection-item') && !hasSelection);
});
if (imageGroup) imageGroup.hidden = !hasImage;
};
const closeMenu = () => {
menu.classList.remove('is-open');
menu.setAttribute('aria-hidden', 'true');
};
const openMenu = (x, y) => {
setMenuState();
menu.classList.add('is-open');
menu.setAttribute('aria-hidden', 'false');
const rect = menu.getBoundingClientRect();
const gap = 10;
const left = Math.min(Math.max(gap, x), window.innerWidth - rect.width - gap);
const top = Math.min(Math.max(gap, y), window.innerHeight - rect.height - gap);
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
};
const showNativeHint = () => {
if (!nativeHint) return;
window.clearTimeout(nativeHintTimer);
nativeHint.classList.add('is-visible');
nativeHintTimer = window.setTimeout(() => {
nativeHint.classList.remove('is-visible');
}, 2600);
};
const jumpToComments = () => {
const target = getCommentsTarget();
target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
const quoteToComments = () => {
jumpToComments();
window.setTimeout(() => {
const textarea = document.querySelector('#twikoo textarea, .twikoo-comments textarea, .tk-input textarea');
if (!(textarea instanceof HTMLTextAreaElement) || !lastSelectionText) return;
const quote = lastSelectionText
.split(/\r?\n/)
.map((line) => `> ${line}`)
.join('\n');
const current = textarea.value.trim();
textarea.value = current ? `${current}\n\n${quote}\n` : `${quote}\n`;
textarea.dispatchEvent(new Event('input', { bubbles: true }));
textarea.focus();
}, 500);
};
const searchSelection = () => {
if (!lastSelectionText) return;
const url = `https://www.bing.com/search?q=${encodeURIComponent(lastSelectionText)}`;
window.open(url, '_blank', 'noopener,noreferrer');
};
const copyImage = async () => {
const imageUrl = getImageUrl();
if (!imageUrl) return;
try {
if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
throw new Error('Image clipboard is not available.');
}
const response = await fetch(imageUrl, { mode: 'cors' });
const blob = await response.blob();
await navigator.clipboard.write([
new ClipboardItem({ [blob.type || 'image/png']: blob }),
]);
} catch {
await copyText(new URL(imageUrl, window.location.href).toString());
}
};
const openImage = () => {
const imageUrl = getImageUrl();
if (!imageUrl) return;
window.open(new URL(imageUrl, window.location.href).toString(), '_blank', 'noopener,noreferrer');
};
document.addEventListener('contextmenu', (event) => {
if (event.ctrlKey) {
closeMenu();
nativeHint?.classList.remove('is-visible');
return;
}
if (isNativeContextTarget(event.target)) return;
lastSelectionText = getSelectionText();
lastImage = getImageTarget(event.target);
event.preventDefault();
openMenu(event.clientX, event.clientY);
showNativeHint();
});
document.addEventListener('click', (event) => {
const actionTarget = event.target instanceof Element ? event.target.closest('[data-context-action]') : null;
if (!actionTarget || !menu.contains(actionTarget)) {
closeMenu();
return;
}
const action = actionTarget.dataset.contextAction;
closeMenu();
if (action === 'back') history.back();
if (action === 'forward') history.forward();
if (action === 'reload') location.reload();
if (action === 'copy-selection' && lastSelectionText) copyText(lastSelectionText);
if (action === 'search-selection') searchSelection();
if (action === 'quote-selection') quoteToComments();
if (action === 'copy-image') copyImage();
if (action === 'open-image') openImage();
if (action === 'copy-image-url') copyText(new URL(getImageUrl(), window.location.href).toString());
if (action === 'random-post' && typeof window.randomPost === 'function') window.randomPost(actionTarget);
if (action === 'comments') jumpToComments();
if (action === 'print') window.print();
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') closeMenu();
if (event.key === 'Tab' && menu.classList.contains('is-open')) {
const items = [...menu.querySelectorAll(focusableSelector)].filter((item) => !item.closest('[hidden]'));
if (items.length === 0) return;
const first = items[0];
const last = items[items.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
}
});
window.addEventListener('scroll', closeMenu, { passive: true });
window.addEventListener('resize', closeMenu);
})();
</script> <aside class="pwa-toast" data-pwa-toast hidden role="status" aria-live="polite"> <div class="pwa-toast-icon" aria-hidden="true"><i class="fa-solid fa-download"></i></div> <div class="pwa-toast-copy"> <strong data-pwa-title>PWA 提示</strong> <p data-pwa-message></p> </div> <div class="pwa-toast-actions"> <button class="pwa-toast-primary" type="button" data-pwa-primary>确定</button> <button class="pwa-toast-close" type="button" data-pwa-close aria-label="关闭提示">稍后</button> </div> </aside> <script src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script> <script src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script> <script src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <script src="/js/random.js"></script> <script src="/js/search/typesense-search.js"></script> <script src="/js/external-links.js"></script> <script src="/js/pwa.js"></script> <script>
(() => {
const nav = document.querySelector('.nav');
const toggle = document.querySelector('[data-nav-toggle]');
const menu = document.querySelector('[data-nav-menu]');
const backdrop = document.querySelector('[data-nav-backdrop]');
if (!nav || !toggle || !menu) return;
function setMenu(open) {
nav.classList.toggle('is-open', open);
toggle.setAttribute('aria-expanded', String(open));
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
menu.setAttribute('aria-hidden', String(!open && window.innerWidth <= 720));
document.body.classList.toggle('has-nav-drawer', open);
}
toggle.addEventListener('click', () => {
setMenu(!nav.classList.contains('is-open'));
});
backdrop?.addEventListener('click', () => setMenu(false));
menu.addEventListener('click', (event) => {
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
});
document.addEventListener('click', (event) => {
if (!nav.classList.contains('is-open')) return;
if (event.target instanceof Node && nav.contains(event.target)) return;
setMenu(false);
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && nav.classList.contains('is-open')) setMenu(false);
});
window.addEventListener('resize', () => {
if (window.innerWidth > 720) setMenu(false);
else menu.setAttribute('aria-hidden', String(!nav.classList.contains('is-open')));
});
menu.setAttribute('aria-hidden', String(window.innerWidth <= 720));
})();
(() => {
const modal = document.querySelector('[data-console-modal]');
const panel = modal?.querySelector('.control-console-panel');
const openButtons = document.querySelectorAll('[data-console-open]');
const closeButtons = modal?.querySelectorAll('[data-console-close]') || [];
if (!modal || !panel || openButtons.length === 0) return;
function setConsole(open) {
modal.classList.toggle('is-open', open);
modal.setAttribute('aria-hidden', String(!open));
document.body.classList.toggle('has-control-console', open);
if (open) panel.focus();
}
openButtons.forEach((button) => {
button.addEventListener('click', () => setConsole(true));
});
closeButtons.forEach((button) => {
button.addEventListener('click', () => setConsole(false));
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && modal.classList.contains('is-open')) setConsole(false);
});
})();
(() => {
const storageKey = 'site-theme';
const root = document.documentElement;
const button = document.querySelector('[data-theme-toggle]');
const media = window.matchMedia('(prefers-color-scheme: dark)');
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
const getSavedTheme = () => {
try {
const theme = localStorage.getItem(storageKey);
return theme === 'dark' || theme === 'light' ? theme : null;
} catch {
return null;
}
};
const setSavedTheme = (theme) => {
try {
if (theme === getSystemTheme()) localStorage.removeItem(storageKey);
else localStorage.setItem(storageKey, theme);
} catch {
// localStorage can be unavailable in strict privacy modes.
}
};
const getTheme = () => getSavedTheme() || getSystemTheme();
function applyTheme(theme) {
root.dataset.theme = theme;
root.dataset.themeMode = getSavedTheme() ? 'manual' : 'auto';
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
button?.setAttribute(
'title',
getSavedTheme()
? (theme === 'dark' ? '切换到日间模式' : '切换到夜间模式')
: `跟随系统：${theme === 'dark' ? '夜间' : '日间'}模式`
);
}
applyTheme(getTheme());
button?.addEventListener('click', () => {
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
setSavedTheme(nextTheme);
applyTheme(nextTheme);
});
const handleSystemThemeChange = () => {
if (!getSavedTheme()) applyTheme(getSystemTheme());
};
if (typeof media.addEventListener === 'function') {
media.addEventListener('change', handleSystemThemeChange);
} else if (typeof media.addListener === 'function') {
media.addListener(handleSystemThemeChange);
}
})();
(() => {
const runtime = document.getElementById('site-runtime');
if (!runtime) return;
const start = new Date(window.SITE_CONFIG.site.startTime).getTime();
const pad = (value) => String(value).padStart(2, '0');
function updateRuntime() {
const diff = Math.max(0, Date.now() - start);
const days = Math.floor(diff / 86400000);
const hours = Math.floor((diff / 3600000) % 24);
const minutes = Math.floor((diff / 60000) % 60);
const seconds = Math.floor((diff / 1000) % 60);
runtime.textContent = `${days} 天 ${pad(hours)} 时 ${pad(minutes)} 分 ${pad(seconds)} 秒`;
}
updateRuntime();
window.setInterval(updateRuntime, 1000);
})();
</script> </body> </html> <script>(function(){const postSlug = "da17d00";
(() => {
const article = document.querySelector('.post-article');
const progressBar = document.querySelector('[data-reading-progress]');
const resume = document.querySelector('[data-reading-resume]');
const resumePercent = document.querySelector('[data-reading-resume-percent]');
const continueButton = document.querySelector('[data-reading-continue]');
const restartButton = document.querySelector('[data-reading-restart]');
if (!article || !progressBar || !resume) return;
const storageKey = `reading-progress:${postSlug}`;
let saved = null;
let canPersist = true;
let frame = 0;
try {
saved = JSON.parse(localStorage.getItem(storageKey) || 'null');
} catch {
saved = null;
}
const articleMetrics = () => {
const top = article.getBoundingClientRect().top + window.scrollY;
const distance = Math.max(1, article.offsetHeight - window.innerHeight);
return { top, distance };
};
const getProgress = () => {
const { top, distance } = articleMetrics();
return Math.min(1, Math.max(0, (window.scrollY - top) / distance));
};
const persist = (progress) => {
if (!canPersist) return;
try {
if (progress >= 0.97) localStorage.removeItem(storageKey);
else if (progress >= 0.02) localStorage.setItem(storageKey, JSON.stringify({ progress, savedAt: Date.now() }));
} catch {
// Storage can be unavailable in strict privacy modes.
}
};
const update = () => {
frame = 0;
const progress = getProgress();
progressBar.style.transform = `scaleX(${progress})`;
persist(progress);
};
const requestUpdate = () => {
if (!frame) frame = window.requestAnimationFrame(update);
};
const closeResume = () => {
resume.hidden = true;
canPersist = true;
};
const savedIsFresh = saved && Date.now() - Number(saved.savedAt) < 90 * 86400000;
const savedProgress = Number(saved?.progress);
if (savedIsFresh && savedProgress >= 0.05 && savedProgress < 0.97) {
canPersist = false;
if (resumePercent) resumePercent.textContent = `${Math.round(savedProgress * 100)}%`;
window.setTimeout(() => { resume.hidden = false; }, 350);
}
continueButton?.addEventListener('click', () => {
closeResume();
const { top, distance } = articleMetrics();
window.scrollTo({ top: top + distance * savedProgress, behavior: 'smooth' });
});
restartButton?.addEventListener('click', () => {
try { localStorage.removeItem(storageKey); } catch {}
closeResume();
window.scrollTo({ top: Math.max(0, articleMetrics().top - 90), behavior: 'smooth' });
});
update();
window.addEventListener('scroll', requestUpdate, { passive: true });
window.addEventListener('resize', requestUpdate);
window.addEventListener('pagehide', () => persist(getProgress()));
})();
})();</script> <script>
(() => {
document.querySelectorAll('.article-outdated-note[data-freshness-at]').forEach((note) => {
const freshnessAt = new Date(note.dataset.freshnessAt || '');
const hasNewVersion = note.dataset.hasNewVersion === 'true';
if (Number.isNaN(freshnessAt.valueOf())) return;
const threshold = new Date();
threshold.setFullYear(threshold.getFullYear() - 1);
note.hidden = !hasNewVersion && freshnessAt >= threshold;
});
})();
</script> <script>
(() => {
const prose = document.querySelector('.prose[data-toc]');
if (!prose) return;
let toc = [];
try {
toc = JSON.parse(prose.dataset.toc || '[]');
} catch {
toc = [];
}
prose.querySelectorAll('h1, h2, h3').forEach((heading, index) => {
const item = toc[index];
if (item?.id && !heading.id) heading.id = item.id;
});
const tocTree = document.querySelector('[data-toc-tree]');
if (tocTree && toc.length > 0) {
const links = [...tocTree.querySelectorAll('[data-toc-link]')];
const groups = [...tocTree.querySelectorAll('[data-toc-group]')];
const headings = toc
.map((item) => document.getElementById(item.id))
.filter(Boolean);
const setActiveToc = (id) => {
links.forEach((link) => {
const isActive = link.getAttribute('href') === `#${id}`;
link.classList.toggle('is-active', isActive);
if (isActive) link.setAttribute('aria-current', 'location');
else link.removeAttribute('aria-current');
});
const activeLink = tocTree.querySelector(`[data-toc-link][href="#${CSS.escape(id)}"]`);
const activeGroup = activeLink?.closest('[data-toc-group]');
groups.forEach((group) => group.classList.toggle('is-open', group === activeGroup));
};
const updateToc = () => {
const anchorOffset = 132;
let activeId = headings[0]?.id;
headings.forEach((heading) => {
if (heading.getBoundingClientRect().top <= anchorOffset) activeId = heading.id;
});
if (activeId) setActiveToc(activeId);
};
tocTree.addEventListener('click', (event) => {
const link = event.target.closest?.('[data-toc-link]');
if (!link) return;
const group = link.closest('[data-toc-group]');
groups.forEach((item) => item.classList.toggle('is-open', item === group));
});
updateToc();
window.addEventListener('scroll', updateToc, { passive: true });
window.addEventListener('resize', updateToc);
}
})();
</script> <script>
(() => {
const prose = document.querySelector('.post-article .prose');
if (!prose) return;
const collapsedLineCount = 8;
const copyLabels = {
idle: '复制',
done: '已复制',
error: '复制失败',
};
const languageNames = {
bash: 'Bash',
c: 'C',
cpp: 'C++',
cs: 'C#',
css: 'CSS',
html: 'HTML',
js: 'JavaScript',
json: 'JSON',
jsx: 'JSX',
md: 'Markdown',
powershell: 'PowerShell',
py: 'Python',
shell: 'Shell',
sh: 'Shell',
ts: 'TypeScript',
tsx: 'TSX',
txt: 'Text',
yaml: 'YAML',
yml: 'YAML',
};
function getCodeLanguage(pre, code) {
const rawLanguage =
pre.dataset.language ||
code.dataset.language ||
[...pre.classList, ...code.classList]
.find((className) => className.startsWith('language-'))
?.replace(/^language-/, '') ||
'';
const normalized = rawLanguage.trim().toLowerCase();
return languageNames[normalized] || normalized.toUpperCase() || 'Code';
}
function getCodeText(code, lines) {
if (lines.length > 0) return lines.map((line) => line.textContent || '').join('\n');
return code.textContent || '';
}
prose.querySelectorAll('img').forEach((image) => {
if (image.closest('a, .article-header-cover')) return;
const src = image.currentSrc || image.getAttribute('src');
if (!src) return;
const link = document.createElement('a');
link.className = 'fancybox';
link.href = src;
link.dataset.fancybox = 'article-gallery';
link.dataset.caption = image.getAttribute('alt') || '';
image.parentNode?.insertBefore(link, image);
link.appendChild(image);
});
prose.querySelectorAll('table').forEach((table) => {
if (table.closest('.table-scroll')) return;
const wrapper = document.createElement('div');
wrapper.className = 'table-scroll';
table.parentNode?.insertBefore(wrapper, table);
wrapper.appendChild(table);
});
prose.querySelectorAll('.butterfly-hide-inline').forEach((item) => {
const button = item.querySelector('.butterfly-hide-toggle');
if (!button) return;
button.addEventListener('click', () => {
item.classList.toggle('is-open');
});
});
if (window.Fancybox) {
window.Fancybox.bind('[data-fancybox="article-gallery"]', {
compact: false,
dragToClose: true,
Images: {
zoom: true,
},
});
}
async function copyText(text) {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text);
return;
}
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.top = '-9999px';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
}
prose.querySelectorAll('pre').forEach((pre) => {
if (pre.closest('.code-block')) return;
const code = pre.querySelector('code');
if (!code) return;
const wrapper = document.createElement('div');
wrapper.className = 'code-block';
pre.parentNode?.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
const header = document.createElement('div');
header.className = 'code-block-header';
const language = document.createElement('span');
language.className = 'code-block-language';
language.textContent = getCodeLanguage(pre, code);
const toolbar = document.createElement('div');
toolbar.className = 'code-block-toolbar';
const copyButton = document.createElement('button');
copyButton.className = 'code-block-copy';
copyButton.type = 'button';
copyButton.textContent = copyLabels.idle;
copyButton.setAttribute('aria-label', '复制代码');
const toggleButton = document.createElement('button');
toggleButton.className = 'code-block-toggle';
toggleButton.type = 'button';
toggleButton.textContent = '展开';
toggleButton.setAttribute('aria-expanded', 'false');
const expandCue = document.createElement('button');
expandCue.className = 'code-block-expand-cue';
expandCue.type = 'button';
expandCue.setAttribute('aria-label', 'Expand code block');
expandCue.setAttribute('aria-expanded', 'false');
expandCue.innerHTML = '<span aria-hidden="true"></span>';
toolbar.append(copyButton, toggleButton);
header.append(language, toolbar);
wrapper.appendChild(header);
wrapper.appendChild(expandCue);
const codeLines = [...code.querySelectorAll(':scope > .line')];
if (codeLines.length > 0) {
wrapper.classList.add('has-line-numbers');
wrapper.style.setProperty('--line-number-width', `${String(codeLines.length).length + 1}ch`);
codeLines.forEach((line, index) => {
line.dataset.line = String(index + 1);
});
}
const lineCount = codeLines.length || (code.textContent || '').split(/\r?\n/).length;
if (lineCount > collapsedLineCount) wrapper.classList.add('is-collapsible');
copyButton.addEventListener('click', async () => {
try {
await copyText(getCodeText(code, codeLines));
copyButton.textContent = copyLabels.done;
window.setTimeout(() => {
copyButton.textContent = copyLabels.idle;
}, 1400);
} catch {
copyButton.textContent = copyLabels.error;
window.setTimeout(() => {
copyButton.textContent = copyLabels.idle;
}, 1600);
}
});
function toggleExpanded() {
const isExpanded = wrapper.classList.toggle('is-expanded');
toggleButton.textContent = isExpanded ? '收起' : '展开';
toggleButton.setAttribute('aria-expanded', String(isExpanded));
expandCue.setAttribute('aria-expanded', String(isExpanded));
}
toggleButton.addEventListener('click', toggleExpanded);
expandCue.addEventListener('click', toggleExpanded);
});
})();
</script>
Reference in New Issue View Git Blame Copy Permalink