首先当然是加了个大众广泛使用的软件源（LC_ALL=C.UTF-8 sudo add-apt-repository ppa:ondrej/php -y 然后 sudo apt update），很可惜的是加完以后 apt 仍然报找不到更新版本的 PHP。
​
​又查了一下，哦豁，原来是 PHP 嫌弃操作系统 Ubuntu 18.04 太老，已经不再提供对应的安装包，不仅如此，而且看上去连 20.04 也已经被抛弃了。好吧，一步一步来。先升到 20.04 看看？出奇顺利，升级结束后立刻尝试访问博客，正常得不像话，就跟没有升级过一样。​胆子于是大了点。继续根据服务商的说明把 Ubuntu 从 20.04 往 22.04 上升。完成后先是感觉又很成功，系统启动正常。但随即尝试访问博客，呵呵，它就 502 了。事已至此，​先吃饭吧。

饭后继续。升级系统似乎把 PHP 7.4 有关的某些部分搞掉了，所以才 502。咱原本就是要升级 PHP 的，所以倒也不算什么大问题。于是当即再次执行前述的软件源添加命令，然后 sudo apt install php8.4 php8.4-fpm php8.4-mcrypt php8.4-mysql php8.4-xml php8.4-zip，好像就这些吧。然后去到 /etc/php/8.4/fpm 下，把 pool.d/www.conf 文件里的 user、group 以及 listen.owner 和 listen.group 修正成实际情况，pm.max_requests 稍微调了调；又打开 php.ini 把 max_execution_time 也调了下，最主要的还是 post_max_size 和 upload_max_filesize 这俩值，太小了不够用；最后看了一眼 php-fpm.conf 文件，发现什么都不需要动。执行 sudo systemctl restart nginx php-fpm 后尝试访问站点，嗯，502 消失了，代之以“此站点遇到了致命错误。”

页面相当干净，别的有用信息统统没有。只好去把 wp-config.php 里的 WP_DEBUG 开关打开，刷新页面。当即发现 crayon-syntax-highlighter 扩展可能是最重要的那个问题源（问题一），屏蔽了它再刷新，原来的正常页面内容就开始出现了，但夹杂着各种错误信息。就像泄洪一般，一大片的 Notice、Deprecated、Warning。

计有，页面顶部出现以下问题。问题二：

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the jalw_i18n domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /…/wp-includes/functions.php on line 6121

查资料，此问题多由插件/主题带来。经测试，禁用 JS Archive List 插件后，此提示即告消失。在 AI 辅助下尝试修复未果。

接着是连续五条这个（问题三），

Deprecated: Creation of dynamic property Hybrid_Layout::$name is deprecated in /…/wp-content/themes/stargazer/library/inc/class-layout.php on line 162

这是一个本博客当前使用的主题，已久不更新。打开该文件，将以下成员声明放到类的开头，

/**
* The layout name/slug.
*
* @since 4.0.0
* @access public
* @var string
*/
public $name = '';

即可解决（这是被第二个解决的问题，根由是 PHP 不再建议使用动态属性）。

还有一条是这样（问题四），

Warning: foreach() argument must be of type array|object, string given in /…/wp-includes/class-wp-theme-json.php on line 2101

不知道问题出在哪儿。

接下来是页面内出现最多的一组，总有十几次（问题五），

Warning: compact(): Undefined variable $post_id in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $order in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $meta_key in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $featured in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $attachment in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $scan in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $scan_raw in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $callback in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $default in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $split_content in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $size in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $srcset_sizes in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $link in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $link_class in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $image_class in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $image_attr in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $width in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $height in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $before in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $after in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $min_width in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $min_height in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $caption in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $meta_key_save in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $thumbnail_id_save in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $cache in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $format in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $echo in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $custom_key in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $default_size in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $the_post_thumbnail in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $image_scan in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $default_image in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $order_of_image in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

Warning: compact(): Undefined variable $link_to_post in /…/wp-content/themes/stargazer/library/ext/get-the-image.php on line 298

当我把第 298 行代码从 $key = md5( serialize( compact( array_keys( $this->args ) ) ) ); 改为 $key = md5( serialize( $this->args ) ); 后，这些警告消失。由于它太碍眼，所以是第一个被解决掉的。

上述共计五个问题，三和五已经解决掉，二和四未解决，不过它们仅是告警类信息，把 WP_DEBUG 关闭后是看不到的。第一个问题最严重，是那个代码高亮的插件引发，抽空了再看吧。

昨天晚上，先是搞定一件许久之前就感觉应该改善的活儿，就是把小组件的大小从固定的尺寸改成能尽可能大地占据启动器给分配的空间。当中间那个主图变大后，又勾起了另一件之前想干的事，就是把这个主图搞成矢量图，避免缩放时候失真严重。

栅格图像转矢量图，有个效果不错的软件，叫 Vector Magic，多年前用过。到网上一搜，发现也出了在线版，网址给的是 https://zh.vectormagic.com/。打开页面一看，里面就有操作区，告诉只要把文件上传，就立等可取。依言而行，页面跳转到了一个编辑界面，左右两大内容栏并列，左侧是上传的栅格图像，右侧是转变后的矢量图像，果然边缘平滑，缩放自如。可这是你要是点击那个大大的“下载”按钮的话，它就会让你订阅，订阅的费用颇为不菲。嗐，你说这事闹得。

心里开始盘算，既然你已经显示到内容取了，有没有什么办法把内容区 dump 出来？初步检查了一下，内容区是个 Canvas 元素，于是就搜索 Canvas to SVG 的转换器，确实有，不过是供给网页制作者嵌入到页面里的。既然如此，就只好强行注入了。这种急就章是 AI 的强项，于是问 DeepSeek，几番来回，它给出了以下代码：

(function() {
    function loadScript(url) {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${url}"]`)) return resolve();
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    async function exportCanvas(id) {
        const canvas = document.getElementById(id);
        if (!canvas) throw new Error('Canvas not found');
        
        await loadScript('https://unpkg.com/canvas2svg@1.0.16/canvas2svg.js');
        
        const ctx = new C2S(canvas.width, canvas.height);
        ctx.drawImage(canvas, 0, 0);
        
        const svgString = new XMLSerializer().serializeToString(ctx.getSvg());
        const blob = new Blob([svgString], {type: 'image/svg+xml'});
        
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `canvas-${id}-export.svg`;
        a.click();
        
        return '导出成功！';
    }

    // 使用示例：exportCanvas('yourCanvasId').then(console.log)
    window.exportCanvas = exportCanvas;
    console.log('使用方法：exportCanvas("你的Canvas元素ID")');
})();

里面最重要的 JavaScript 库的 URL 它没给对，最后是自己找的。照着代码最后的提示说明操作，果然一个 SVG 文件顺利降落，用 Edge 打开一看，效果也对得上。时间太晚，满意地睡觉去了。

今早接茬往后走。定睛一看，SVG 没错，显示效果也没错，但是，这个 SVG 的体内是内嵌了一个栅格图像，SVG 这层外衣就是聋子的耳朵。衰。又下载 Vector Magic 的 Windows 试用版，心想免费让我转一半张图片总应该可以吧，没想到也是痴心妄想。跟网站一个德性，只能看，不能保存。又看了一眼正版价格，天啦噜，400 新加坡元，2000+ 人民币啊。溜了溜了。

这就怪不得老夫了，还是寻求破解版吧，于是找到了这儿，里面提供了百度网盘和蓝奏云的链接。一般来说蓝奏云比较省力气，就点了蓝奏云。发现需要登录，正要拿自己的账号登录时，看到一行小字，说这是蓝奏云优享版，账号跟之前的老蓝奏云不想通。好，那就新注册一个，反正现在一般用手机号接个验证码就算是注册用户了。验证通过后往下走，提示购买会员，要不然不能存到云盘，显然也不能下载。果断放弃。转战百度云盘，这边风景反而好起来了，挺顺利，转存后下载到本地。

解压，幺蛾子就来了。Defender 哐哐报毒。吓得老夫硬是没敢执行，心想得把沙盒开起来。到开始菜单里寻找，咦？之前经常看着都略显眼烦的沙盒没了！再到应用商店里找，也没有。奇了怪了，难道微软的刀法已经如此之快了？赶忙放狗，才在微软官网找到开启的办法：Enable-WindowsOptionalFeature -FeatureName "Containers-DisposableClientVM" -All -Online。原样运行完毕，嚓，提示要重启。忙不迭保存、关闭一大堆开着的窗口应用。重启电脑，打开沙盒，把破解版的程序跟图片都复制进去，一番炮制后，把成品又捞了出来，美滋滋。不过沙盒跟宿主机之间不能进行文件拖放操作，略有不便，好在复制粘贴还是可以工作的。

就这么一件小事，折腾不已。支线繁杂，令人头晕。幸好最后也算“牢记使命”，把活儿弄成了。

Q：在一个页面中需要展示一个图片，图片需要根据当前浏览器采用的语言而对应后端准备的不同资源，如何写最简单？

A：有几种简单的方法可以实现这个需求：

1. 使用 HTML 的 lang 属性和 CSS 选择器：

<!-- 在 html 标签上设置语言 -->
<html lang="zh">
  <body>
    <img class="language-image" src="default.png" alt="图片">
  </body>
</html>

<style>
/* CSS 中根据语言选择不同图片 */
:lang(zh) .language-image {
  content: url('/images/zh.png');
}
:lang(en) .language-image {
  content: url('/images/en.png');
}
</style>

2. 使用 JavaScript 检测浏览器语言：

<img id="languageImage" src="" alt="图片">

<script>
const lang = navigator.language.slice(0, 2); // 获取语言代码前两位
const img = document.getElementById('languageImage');
img.src = `/images/${lang}.png`;
</script>

3. 使用 HTML 的 picture 元素：

<picture>
  <source srcset="zh.png" media="(lang: zh)">
  <source srcset="en.png" media="(lang: en)">
  <img src="default.png" alt="图片">
</picture>

推荐使用第 2 种方法，因为它最简单直接，且兼容性最好。

顺便说一句，虽说咱是个菜鸟，但问它的时候，就是想让它帮着写出来第 2 种方法的代码的，:)

Q：在一个 iOS app 中，要实现生成一个本地 HTML 页面，使用 WebView 显示出来。据我所知，手机目前都有明亮、暗黑两种模式，为了保证用户体验，HTML 页面应该能自动检测当前处于那种模式，并将适当的适应性 CSS 应用到页面元素上（如页面背景以及文字的颜色），可以帮助写一个简单的示例页面吗？

A：当然可以。以下是一个简单的示例 HTML 页面，它能够自动适应系统的明亮/暗黑模式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应主题示例</title>
    <style>
        /* 默认样式（明亮模式） */
        :root {
            color-scheme: light dark;
        }

        body {
            margin: 0;
            padding: 16px;
            background-color: #ffffff;
            color: #000000;
        }

        .card {
            padding: 16px;
            margin: 16px 0;
            border-radius: 8px;
            background-color: #f0f0f0;
            border: 1px solid #e0e0e0;
        }

        /* 暗黑模式样式 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #000000;
                color: #ffffff;
            }

            .card {
                background-color: #1c1c1e;
                border-color: #2c2c2e;
            }

            a {
                color: #0a84ff;
            }
        }
    </style>
</head>
<body>
    <h1>自适应主题示例</h1>
    
    <div class="card">
        <h2>示例卡片</h2>
        <p>这是一个示例卡片，用于展示明暗模式的自动切换效果。</p>
        <p>这里是一个 <a href="#">链接</a> 示例。</p>
    </div>

    <div class="card">
        <h2>另一个卡片</h2>
        <p>当系统切换到暗黑模式时，页面会自动调整颜色方案。</p>
    </div>
</body>
</html>

if let htmlPath = Bundle.main.path(forResource: "example", ofType: "html") {
    let url = URL(fileURLWithPath: htmlPath)
    let request = URLRequest(url: url)
    webView.load(request)
}

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // 当前是暗黑模式
}

// 监听主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    if (event.matches) {
        // 切换到暗黑模式
    } else {
        // 切换到明亮模式
    }
});

那么如何为你的网站添加这个可爱的 favicon 呢？

注：本文涉及内容：

• 图标大小尺寸
• 在网页上添加图标标识
• 不讨论如何设计精美图标

favicon 的用途

在介绍如何为网页设置 favicon 之前，先来看看这些图标被用到了哪些地方。

• 浏览器标签图标
• 浏览器书签图标
• 浏览器历史记录图标
• 浏览器中的快捷启动图标
• 手机上的快捷启动图标
• 任务栏图标

favicon 图标的格式

favicon 是由微软在 1980 年代设计出来的，最原始只支持 16×16 像素的图片，后来被用到 IE5 上标识书签和网站，并且扩展到一个 ico 图标文件中可以包含 32×32、 24×24、48×48、64×64、128×128、256×256 等多种尺寸的图片。

在现代浏览器上，可以直接使用 gif、png 等格式作为 favicon，而无须再转为 ico 格式。

一个 favicon.ico 就可以包含多尺寸图片，那还有什么好讨论的呢？的确是个好问题。后面问答。

如何引用这个 favicon 图标

在你的图站根目录放上一个名为 favicon.ico 的符合规范的 ico 图片文件，即可。浏览器会使用 http(s)://你的网站地址/favicon.ico 来获取这个图标。

到后来，在 html 标准里，为 favicon 设计了规范。在 html 文档的 head 部，通过 <link>来声明图标位置。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/gif" href="/favicon.gif">
<link rel="icon" type="image/png" href="/favicon.png">

在现在常用的浏览器，以上的图标地址声明均可以产生作用，如果没有通过 <link> 声明图标地址，浏览器会使用默认的 http(s)://你的网站地址/favicon.ico 来获取。

如果你不知道什么叫 Progressive Web App，请忽略本段，继续下一节。

若你的网站是 Progressive Web App 应用，此时页面的 head 部很可能会 link 名为 manifest.json 的文件，这个文件有 W3C 标准 ，其中 icons、 splash_screens 两项配置与图标相关，内容大致为：

{
  "lang": "zh—CN",
  "name": "今日 | 有悟 | 有物",
  "short_name": "今日有物",
  "icons": [],
  "splash_screens": [],
  "scope": "/",
  "start_url": "",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}

<link rel="manifest" href="/manifest.json"></link>

那么多地方引用 favicon，如何选择合适的尺寸

考虑安卓、苹果的手机与平板等移动设备以及桌面设备，以及现代屏幕的物理像素，问题终于来了，这么多的地方引用到网站图标，哪一个尺寸大小的图标才是你需要的？

你可能有过这种经历：某种工具或者网站在桌面上的快捷方式图标被拉伸成一堆小方格了。这是由于图标分辨率太低，无法在分辨率更高的屏幕上正常显示。

网站快捷启动图标或 app 的图标需要清晰度更高、符合浏览设备屏幕分辨率的高质量图片。在浏览器中作为书签使用，与在手机桌面作为快捷启动图标，与在电脑桌面快捷启动，在不同的物理屏幕分辨率屏幕、不同的操作系统都有不同的最佳图标尺寸要求。把这么多的需求一起打包成一个 ico 格式文件明显不合适（这也回答了上面文中所留的一个问题）。通过使用 <link> 和 manifest.json，开发人员可以控制在不同操作系统不同分辨率要求下的桌面快捷启动图标、浏览器 favicon。

特别说明： 因为设备与浏览器的升级，导致这些图标尺寸也在不断变化，以下所引文章是当前（2021 年 6 月）最新情况。太老的设备或者即将退役（如 ie）版本不在本文考虑范围。可能与你之前阅读过的与图标尺寸选择相关的文章会有出入。

Chrome 浏览器图标大小

google 推荐，为充分支持所有浏览器， 使用最高的 192×192 分辨率 icon。chrome 和 opera 均使用 icon.png，图标会被自动缩放到设备所需大小。

<link rel="icon" sizes="192x192" href="icon.png">

图标大小应基于 48px，例如 48px、96px、144px 和 192px。另外，google web 开发还针对在移动设备上的 Splash 画面 （启动时显示的图片而不是白屏）给出以下尺寸建议，192px 与 512px 已经满足大部分场景，但你可以为了像素调整提供更多的选项，比如 256px、384px。

<link rel="icon" sizes="48x48" href="icon-48.png">
<link rel="icon" sizes="96x96" href="icon-96.png">
<link rel="icon" sizes="144x144" href="icon-144.png">
<link rel="icon" sizes="192x192" href="icon-192.png">
<link rel="icon" sizes="256x256" href="icon-256.png">
<link rel="icon" sizes="384x384" href="icon-384.png">
<link rel="icon" sizes="512x512" href="icon-512.png">

Safari 浏览器的图标尺寸

而 apple 对浏览器与应用的图标尺寸 推荐建议：

• iPhone： 60×60 pt (180×180 px @3x) 60×60 pt (120×120 px @2x)
• iPad Pro： 83.5×83.5 pt (167×167 px @2x)
• iPad, iPad mini： 76×76 pt (152×152 px @2x)

@2x 与 @3x 是 apple 特有，主要是 retina 屏幕，使用两倍大小或者三倍大小，图标会更清晰。

<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180.png">

合并以上所有提到的图标尺寸

• favicon.ico
• favicon-16.png
• favicon-32.png
• icon-48.png
• icon-96.png
• icon-144.png
• icon-192.png
• icon-256.png
• icon-384.png
• icon-512.png
• apple-touch-icon-120.png
• apple-touch-icon-152.png
• apple-touch-icon-167.png
• apple-touch-icon-180.png

html 头的 link 声明：

<link rel="icon" type="iamge/png" sizes="16x16" href="favicon-16.png">
<link rel="icon" type="iamge/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" sizes="48x48" href="icon-48.png">
<link rel="icon" sizes="96x96" href="icon-96.png">
<link rel="icon" sizes="144x144" href="icon-144.png">
<link rel="icon" sizes="192x192" href="icon-192.png">
<link rel="icon" sizes="256x256" href="icon-256.png">
<link rel="icon" sizes="384x384" href="icon-384.png">
<link rel="icon" sizes="512x512" href="icon-512.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180.png">
<link rel="manifest" href="manifest.json">

这个图标文件无须声明，要直接放在网站根目录下。

上面所列图标的尺寸都需要吗？

在回答这个问题之前，先来看有悟所做的测试。有悟制作了一套图标，并标上尺寸数字，找了几款设备做不完全的测试，看看到底这些尺寸都被用到哪些？

因为浏览器会自动为我们缩小图标，那么可以利用这个功能，将上面的尺寸做精简后合并成一个比较大的 ico 文件，基本上大部分情况都可以覆盖。但是你如果要针对不同尺寸作出更精确的控制，比较大图标多内容、小图标仅图案，还是建议你分开图标文件分别定制，用 html head link 的方式来引用。

一个最少图标文件尺寸的集合：

• favicon.ico ( 16×16, 32×32 )
• favicon-16.png
• favicon-32.png: Safari
• apple-touch-icon.png: Apple touch icon，180×180
• icon-192.png: Chrome 浏览器，安卓平台

html head：

<link rel="icon" type="iamge/png" sizes="16x16" href="favicon-16.png">
<link rel="icon" type="iamge/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" sizes="192x192" href="icon-192.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

如果你的网站是 Progressive Web App，有配置文件 manifest.json，

<link rel="manifest" href="manifest.json">

内容类似如下:

{
  "lang": "zh—CN",
  "name": "今日 | 有悟 | 有物",
  "short_name": "今日有物",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
     }
  ],
  "splash_screens": [],
  "scope": "/",
  "start_url": "",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}

上面已经把全尺寸覆盖，最小化两种方案都介绍完毕。不过，如果你知道了图片可以快速生成，那即使采用全覆盖方案，对你来说根本不会产生什么负担。 因为，若图标都是用工具自动生成的话，根本不用在乎多少个尺寸型号，对于工具来说，只是大小参数不同而已。

为了控制本文的篇幅，避免篇幅过长造成阅读困难，关于如果快速制作 favicon 文件的方法，请看：如何快速制作多尺寸 favicon。

参考文章：Adding favicons in a multi-browser multi-platform world

原文链接：https://youwu.today/skill/web/how-to-favicon-your-web-site/

老夫虽然编程多年（当然现在还可以说不编程也多年），但对于前端的知识一直处于一知半解的状态，偶尔突击一下，不几天就会全额返还，说不定还带了利息。之前的门户站就是为了备案而写就的一个页面，好听点说是简洁，不好听的说就是简陋，这一晃就两年多了，老夫决定上手改一版。

这一改，总怕是改了两个礼拜，说不定还更长。找目标模板、扒下来，整理。改内容，改样式，找图片，然后测试调整。尤其是找图标、图片，甚至还要处理它们，什么裁剪放缩，甚至还要搞 SVG。终于今天算是把修改后的主页上线了，效果肯定不敢说多好，不过对老夫来说，肯定是可以接受的了。

这期间，扩展了一下 HTML 的知识，学习了一些 CSS 知识，JavaScript 还没动。主页上有个下拉的导航菜单，由于模板找的是十年前的，技术栈显然会比较老，下拉菜单是用 JavaScript 脚本驱动的，老夫计划挑战一下前段时间的学习成果，用纯 CSS 把它替换掉。学习的目标已经找到了一些，列在这儿。

• https://preview.colorlib.com/theme/bootstrap/dropdown-20/；这个菜单样式还行，不过需要点击后才拉下；这个站的 www 主站好像是个 WordPress 主题站，抽空可以多看看；
• https://purecss.io/menus/；这个页面演示了若干种用 CSS 实现的菜单，不止下拉式，不过相对简单；
• https://codeconvey.com/Tutorials/pure-css-responsive-drop-down-menu/；这个页面的菜单，样式是我认可的，不过它的实现有个在网上常常遇到的 bug，就是鼠标指针从顶级菜单向下拉菜单滑动时，一旦离开顶级菜单项的范围，有概率会导致下拉菜单突然消失，这对于用户是非常不友好的；留在此处就是为了有时间看看究竟是什么地方考虑失当导致的；
• https://1stwebdesigner.com/pure-css-navigation-menus/；这个页面里也罗列了不止一种实现，其中的 Mega Menu 是我的目标，预览页地址是 https://codepen.io/mohnaji94/pen/evbWGW；看上去实现很简洁，效果也符合预期。

昨天还和 BOSS 直聘上打招呼的一位仁兄见了个面，他的岁数跟刚刚分别的老歪一样，八月份在原公司因业务被砍而失去工作，这数个月来，甚至连面试机会都接近于无。据他说只有一次，我都没好意思追问是不是就是我这一次。在技能上，大概率界面方面还是需要精进的，不过感觉基本功还应该可以，给他聊了个小测试的活儿，看看这一两天的反馈。

有时间了看如何移植到 Android 上。

有一个网站，好像叫 BrandCrowd，打着免费的名义注册，在里面划拉过来划拉过去，好不容弄出个勉强还能交代得了自己眼睛的东西，说保存下来吧，嚓，狗日的要你订阅套餐。否则的话，页面上显示着那个打着水印的你的半吊子心血在那儿引诱你。

有个站还不错，支持免费下载，是这个：https://www.shopify.com/tools/logo-maker。虽然是 Shopify 的 URL，可是这个工具又管自己叫 Hatchful，不知道什么由来。再次，弄了个凑合着能看的，点击下载按钮。站点非常友好地提示，说真正的下载 URL 已经发到注册邮箱，请自取。事实上从这儿开始才是坑。老夫从邮箱邮件里的 URL 点击下载，总不下二十次，每回都是确实给你返回一个压缩包文件，但是打开的话，里面是空的。还生怕压缩包兼容性不好，到资源浏览器里看了一眼，立马心就凉了，这个压缩包才 22 个字节，顶多也就是个压缩文件头，哪里会有什么内容。于是情况变得跟第一种就没什么区别了。

接着开始动脑筋。检查了一下第一个的页面，发现图案绘制在 Canvas 元素中，于是就寻找能直接把运行着的浏览器的页面里的 Canvas 元素转储成图片（最好是矢量的）的方法，几天未果；后来无意看了一下第二个的页面，嗐，好像有点进步，这个页面是最后的综述页，里面的图案已经不在编辑器里了，所以呈现使用的是 svg 元素。老夫把浏览器自带的开发工具打开，定位到 svg 元素上，把 outerHTML 转头复制存储成了一个 .svg 文件，就成了。

感受 Vue3 跟 Vue2 不一样的第一个重量冲击来自于事件总线机制发生了变化。

在 Vue2 里面，各种操作的简略表达如下：

1. Vue.prototype.$bus=new Vue()
2. 监听： this.$bus.$on(‘方法名', (参数)=>{})，它可以累加
3. 触发： this.$bus.$emit(‘方法名', 实参值)
4. 销毁：this.$bus.$off(‘方法名')，谁监听谁销毁
5. 注意： 由于监听可以累加，所以必须要有第 4 步的销毁

到了 Vue3 里面，通常要借助于额外 npm 的组件 tiny-emitter 或者 mitt 来通讯，网上看尤以后者居多。如果是前者，则用法基本上如，

import emitter from ‘tiny-emitter/instance'
import {onMounted} from ‘vue'

setup(){
       onMounted(()=>{
            emitter.on('监听的方法名', (参数)=>{回调函数}) // 监听
            emitter.emit('监听的方法名', 参数)             // 触发
            emitter.off('监听的方法名', 参数)              // 销毁
       }) 
}

如果是后者，则如，

import mitt from ‘mitt'

bus.on('监听的方法名', (参数)=>{回调函数}) // 监听
bus.emit('监听的方法名', 参数)             // 触发
bus.off('监听的方法名', 参数)              // 销毁

举例如，首先在 main.js 注册，

import mitt from 'mitt'

const $bus = {}
const emitter = mitt()

$bus.on = emitter.on
$bus.emit = emitter.emit
$bus.off = emitter.off

app.config.globalProperties.$bus = $bus
app.mount('#app')

在事件接收的页面里写，

import {getCurrentInstance, onUnmounted} from 'vue'

setup() {
    const $bus = getCurrentInstance().appContext.config.globalProperties.$bus

    $bus.on('eventName', options => {
        // 自定义业务
    })

    // 清除监听
    onUnmounted(() => {
        $bus.off('eventName')
    })
}

在事件发送的页面里写，

import {getCurrentInstance} from 'vue

setup() {
    const $bus = getCurrentInstance().appContext.config.globalProperties.$bus

    let params = {a: 123} // 自定义数据
    $bus.emit('eventName', params)
}

以上为简略版的示意。参考链接如下：

– https://www.jb51.net/article/223798.htm
– https://blog.csdn.net/qq_41577134/article/details/119956038

还有更详细的一篇是《vue2 升级至 vue3  项目技术栈升级攻略》，讲述从 Vue2 到 Vue3 的基本迁移步骤。

首先是依赖层面 package.json 更新版本依赖，

{
  "name": "myApp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --no-fix"
  },
  "dependencies": {
    "element-plus": "^1.1.0-beta.9",
    "vue": "^3.2.9",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

然后在代码层面，依次，

1）new Vue() 改写为 createApp()。因为 vue2 使用 new Vue() 创建 vue 实例，vue3 通过 createApp() 创造实例。

// vue2
import Vue from 'vue';
new Vue({
  render: h => h(App)
}).$mount("#app");

// 修改为：

// vue3
import { createApp } from 'vue';
import App from "./App.vue";
const app =  createApp(App);
app.mount('#app');

2) Vue.prototype 改写为 app.config.globalProperties

3）Vue.extend 废弃，如果要拓展组件要使用 extends 属性

4）Vue 全局方法改写为实例的方法

5）filter 弃用，可以通过 compute 定义函数代替；如果是全局定义的 filter 方法，可以通过定义 filter 全局常量来代替

6）event bus 废弃，可自行实现一个 event bus 封装

class Bus {
    constructor() {
    // 收集订阅，调度中心
        this.list = {};
    }
    // 订阅
    $on(name, fn) {
        this.list[name] = this.list[name] || [];
        this.list[name].push(fn);
    }
    // 发布
    $emit(name, data) {
        if (this.list[name]) {
            this.list[name].forEach((fn) => {
                fn(data);
            });
        }
    }

    // 取消订阅
    $off(name) {
        if (this.list[name]) {
            delete this.list[name];
        }
    }
}
let bus = new Bus();
export default bus;

7) Vue.set this.$set 废弃

8.) vuex 修改

import { createStore } from 'vuex';
export default createStore({...})

9) vue-router 修改

// vue2
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router =  new Router({
  routes: [...]
})

// 修改为：

// vue3
import { createRouter,createWebHashHistory } from 'vue-router';
const router =  new createRouter({
  history: createWebHashHistory(),       // 可有其它选项
  routes: [...]
})

据说完成以上几个方面的修改，大多数 vue2 项目即可完成技术栈到 vue3 的迁移。

参考链接：

– https://www.cnblogs.com/thinkingthigh/p/15529082.html

最后附上一个语法书写上的解释，对老夫这样的小白有用：

// 直接绑定法
Vue.prototype.$EventBus = new Vue()

// 等于这种写法
const eve = new Vue()
Object.defineProperty(Vue.prototype,'$bus',{
  get() {
    return eve
  }
})

// 等于这种写法
const eve = new Vue()
Object.defineProperties(Vue.prototype, {
    $bus: {
        get() {
            return eve
        }
    }
})

看提示，似乎 Flutter 也并不要求必须是 Chrome，因为可以定义一个名为 CHROME_EXECUTABLE 的环境变量来指定浏览器，想必可能是为 Chromium 的用户的留的口子，但既然 Edge 现在也是相同的内核，恐怕也不是不能用。Edge 的可执行文件全路径是 C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe，在指定时生怕空格作祟，特意在首尾添加了引号，结果是 Flutter 不认，去掉引号，也无暇测试是否允许路径中存在空格了，直接指定为 8.3 短路径格式的 C:\Progra~2\Microsoft\Edge\Application\msedge.exe 后就认可了。不过这只是通过了 flutter doctor 的检测，真实工作起来是不是有别的坑还有待以后验证查看。