mayx/pages
1
0
Fork 0
mirror of https://codeberg.org/mayx/pages synced 2026-01-02 05:33:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Mayx
2025-12-31 16:00:29 +00:00
commit 3688f93d5d
310 changed files with 93400 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
2022/03/12/alpine.html Normal file
View File

@@ -0,0 +1,368 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Alpine的使用体验 | Mayx的博客</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="Alpine的使用体验" />
<meta name="author" content="mayx" />
<meta property="og:locale" content="zh_CN" />
<meta name="description" content="没别的，小就是好！" />
<meta property="og:description" content="没别的，小就是好！" />
<meta property="og:site_name" content="Mayx的博客" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2022-03-12T00:00:00+08:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Alpine的使用体验" />
<meta name="google-site-verification" content="huTYdEesm8NaFymixMNqflyCp6Jfvd615j5Wq1i2PHc" />
<meta name="msvalidate.01" content="0ADFCE64B3557DC4DC5F2DC224C5FDDD" />
<meta name="yandex-verification" content="fc0e535abed800be" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"mayx"},"dateModified":"2022-03-12T00:00:00+08:00","datePublished":"2022-03-12T00:00:00+08:00","description":"没别的，小就是好！","headline":"Alpine的使用体验","mainEntityOfPage":{"@type":"WebPage","@id":"/2022/03/12/alpine.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2022/03/12/alpine.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="canonical" href="https://mabbs.github.io/2022/03/12/alpine.html" />
<link type="application/atom+xml" rel="alternate" href="/atom.xml" title="Mayx的博客" />
<link rel="alternate" type="application/rss+xml" title="Mayx的博客(RSS)" href="/rss.xml" />
<link rel="alternate" type="application/json" title="Mayx的博客(JSON Feed)" href="/feed.json" />
<link rel="stylesheet" href="/assets/css/style.css?v=1767196818" />
<!--[if !IE]> -->
<link rel="stylesheet" href="/Live2dHistoire/live2d/css/live2d.css" />
<!-- <![endif]-->
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mayx的博客" />
<link rel="webmention" href="https://webmention.io/mabbs.github.io/webmention" />
<link rel="pingback" href="https://webmention.io/mabbs.github.io/xmlrpc" />
<link rel="preconnect" href="https://summary.mayx.eu.org" crossorigin="anonymous" />
<link rel="prefetch" href="https://www.blogsclub.org/badge/mabbs.github.io" as="image" />
<link rel="blogroll" type="text/xml" href="/blogroll.opml" />
<link rel="me" href="https://github.com/Mabbs" />
<script src="/assets/js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
var lastUpdated = new Date("Thu, 01 Jan 2026 00:00:18 +0800");
var BlogAPI = "https://summary.mayx.eu.org";
</script>
<script src="/assets/js/main.js"></script>
<!--[if !IE]> -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137710294-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137710294-1');
</script>
<script src="/assets/js/instant.page.js" type="module"></script>
<!-- <![endif]-->
</head>
<body>
<!--[if !IE]> --><noscript><marquee style="top: -15px; position: relative;"><small>发现当前浏览器没有启用JavaScript，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee></noscript><!-- <![endif]-->
<!--[if IE]><marquee style="top: -15px; position: relative;"><small>发现当前浏览器为Internet Explorer，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee><![endif]-->
<div class="wrapper">
<header class="h-card">
<h1><a class="u-url u-uid p-name" rel="me" href="/">Mayx的博客</a></h1>
<img src="https://avatars0.githubusercontent.com/u/17966333" fetchpriority="high" class="u-photo" alt="Logo" style="width: 90%; max-width: 300px; max-height: 300px;" />
<p class="p-note">Mayx's Home Page</p>
<form action="/search.html">
<input type="text" name="keyword" id="search-input-all" placeholder="Search blog posts.." />&#160;<input type="submit" value="搜索" />
</form>
<br />
<p class="view"><a class="u-url" href="/Mabbs/">About me</a></p>
<ul class="downloads">
<li style="width: 270px; border-right: none;"><a href="/MayxBlog.tgz">Download <strong>TGZ File</strong></a></li>
</ul>
</header>
<section class="h-entry">
<small><time class="date dt-published" datetime="2022-03-12T00:00:00+08:00">12 March 2022</time> - 字数统计：3472 - 阅读大约需要11分钟 - Hits: <span id="/2022/03/12/alpine.html" class="visitors">Loading...</span></small>
<h1 class="p-name">Alpine的使用体验</h1>
<p class="view">by <a class="p-author h-card" href="//github.com/Mabbs">mayx</a></p>
<div id="outdate" style="display:none;">
<hr /><p>
这是一篇创建于 <span id="outime"></span> 天前的文章，其中的信息可能已经有所发展或是发生改变。
</p>
</div>
<script>
daysold = Math.floor((new Date().getTime() - new Date("Sat, 12 Mar 2022 00:00:00 +0800").getTime()) / (24 * 60 * 60 * 1000));
if (daysold > 90) {
document.getElementById("outdate").style.display = "block";
document.getElementById("outime").innerHTML = daysold;
}
</script>
<hr />
<b>AI摘要</b>
<p id="ai-output">这篇文章主要介绍了作者在学习Docker的过程中，体验了Alpine Linux作为其容器化环境的优势。Alpine Linux因其小巧轻量、稳定性高、安装简单和内存占用低等特点，适合在生产环境中使用，尤其是对于资源有限的服务器，可以节省空间和提升性能。作者在虚拟机里安装了LEMP环境（Linux、Nginx、MySQL和PHP），并经历了从理论上学习到实际操作的过程，对安装和配置进行了详细分享。最后，作者表示在测试阶段，使用Alpine搭建的Discuz环境表现良好，验证了其作为未来项目基础环境的可行性，强调了“小就是好”的优势。</p>
<hr />
<ul><li><a href="#起因">起因</a></li><li><a href="#alpine的特点">Alpine的特点</a></li><li><a href="#预期的问题解决方案">预期的问题解决方案</a></li><li><a href="#alpine的安装与环境测试">Alpine的安装与环境测试</a><ul><li><a href="#安装lemp">安装LEMP</a></li><li><a href="#配置bbr">配置BBR</a></li></ul></li><li><a href="#体验和总结">体验和总结</a></li></ul>
<hr />
<main class="post-content e-content" role="main"><p>没别的，小就是好！<!--more--></p>
<h1 id="起因">
<a href="#起因"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 起因
</h1>
<p>最近一段时间，我开始学习Docker了。在学习期间，我知道了Docker官方推荐的Alpine Linux系统。以前我也听说过这个系统，但是名字没什么特色就没关心过。不过既然学了Docker，我也体验了一下，发现还真是相当不错，而且正好能解决我手头的问题。</p>
<h1 id="alpine的特点">
<a href="#alpine的特点"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> Alpine的特点
</h1>
<p>Alpine Linux和我之前用过的<a href="/2020/12/07/picore.html">piCore</a>在PC上用的版本TinyCore Linux有相似之处，他们都是基于Busybox来驱动整个系统的，不过TinyCore的软件要少很多，而且软件都是用类似镜像的方式打包，系统也是在内存中运行的，所以并不适合在生产环境中使用。Alpine就不一样了，它库中的软件很明显要多得多，而且现在很多人都在使用基于Docker构建的程序上，稳定性肯定是没有任何问题的，大小虽然比TinyCore Linux大了些，但是相比于CentOS之类的发行版要小太多了，而且在没有装程序的时候内存基础占用才不到100MiB。 </p><p>
另外它安装软件也特别简单，使用的命令是<code class="language-plaintext highlighter-rouge">apk add</code>，比如我想在Alpine上安装Docker，就直接输入<code class="language-plaintext highlighter-rouge">apk add docker</code>就行了，基本上不需要其他什么操作，Docker就安装好了，然后再执行个<code class="language-plaintext highlighter-rouge">rc-update add docker boot</code>加到启动项里，不像其他发行版还要加什么源啊，还要安装什么containerd啊，就很麻烦。 </p><p>
不过据说Alpine不适合开发，好像是因为系统用的是musl libc，用的人少，有些程序会不兼容……不过在我这次测试当中，没有碰见类似的问题。所以对于我来说，在生产服务器上使用CentOS实在是太浪费了，浪费硬盘空间又浪费内存空间，像我能用的服务器性能都不怎么高，要是用Alpine那就可以在一定程度上再提高性能了。</p>
<h1 id="预期的问题解决方案">
<a href="#预期的问题解决方案"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 预期的问题解决方案
</h1>
<p>在两年前，我为了优化我所维护的花火学园曾经把系统<a href="/2020/01/05/devops.html">Ubuntu换成CentOS</a>，而最近，我接手了另一个ACGN资源论坛——资源统筹局。这个论坛的体积也不小，因为之前论坛里对附件的上传限制不高，导致很大部分都是附件占的体积。像现在花火学园从以前的只有2GiB到现在有20GiB了，再加上统筹局又有十几GiB，还有CentOS本身又要10GiB左右，我原来租的64GiB大小的硬盘基本上不够用了，所以现在只好先升到了80GiB的硬盘。不过考虑到可持续发展，增加硬盘容量就要增加成本，这对可持续发展不是一件好事。想想CentOS要占掉这么大的空间实在是不合适，如果我能把这部分空间节省下来的话，那我还能继续用64GiB硬盘的服务器。 </p><p>
不过因为现在的数据量比较大，而且服务的用户也比较多，如果计划出问题恢复起来也比较麻烦，所以我想先在自己在电脑上创建一个类似的服务器，安装上Alpine进行预演测试，然后再找空闲时间在服务器上进行迁移操作，这样就能尽可能保证服务不会因为操作失误而中断了。</p>
<h1 id="alpine的安装与环境测试">
<a href="#alpine的安装与环境测试"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> Alpine的安装与环境测试
</h1>
<p>我在选取Alpine镜像的时候是使用的virt镜像，因为介绍上说这个版本对虚拟机有优化，而云服务器本质上就是一个KVM的虚拟机，我在电脑上装的话则是Hyper-V的虚拟机，所以我用的是这个版本。在启动之后，首先需要执行<code class="language-plaintext highlighter-rouge">setup-alpine</code>进行配置和安装，这么看来用光盘启动的Alpine有点像LiveCD，另外在服务器上安装的话在选择那个硬盘模式的时候可以选LVM，选了LVM之后方便以后调硬盘大小，然后再选sys。不过LVM有可能会影响性能，所以追求极致性能的话可以直接选sys。其他部分安装都很人性化，包括选择源还能自动找到最合适的源，这个比Ubuntu好多了，apt想换源还得手动换。</p>
<h2 id="安装lemp">
<a href="#安装lemp"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 安装LEMP
</h2>
<p>安装完成之后弹出光盘然后重启就OK了，接下来是安装LEMP环境。我以前用LEMP基本上要么是配好的，要么就是一键包，我既没有体验过编译安装，也没有试过用软件包管理器安装。所以这次在Alpine上安装也算是一个挑战了。像Docker安装既然直接安就可以，那这三个组件应该也差不多，我一开始是找的网上的文章，装倒是能正常装，但是我找了一个探针试着运行了一下总是报500的错误……结果发现网上那些在Alpine上安装的PHP连像php-json这种核心库都没装😓，后面我只好自己摸索，把Discuz需要的PHP扩展装全了，在安装软件之前，要启用community源，不然好多包会找不到，具体位置是在<code class="language-plaintext highlighter-rouge">/etc/apk/repositories</code>，把里面那个community源前面的#去掉，然后执行一下<code class="language-plaintext highlighter-rouge">apk update</code>就行了。</p>
<ol>
<li>安装PHP的命令主要是：<code class="language-plaintext highlighter-rouge">apk add php7 php7-fpm php7-opcache php7-gd php7-mysqli php7-zlib php7-curl php7-pdo php7-mysqlnd php7-json php7-exif php7-zip php7-redis php7-imagick php7-fileinfo php7-xml</code>，安装完之后别忘记把php-fpm加到启动项里：<code class="language-plaintext highlighter-rouge">rc-update add php-fpm7 default</code>，这些库安装完基本上大多数网站引擎就能正常用了。</li>
<li>还有就是MySQL，我装的是MariaDB，反正也是相互兼容的，应该也不影响。具体命令是<code class="language-plaintext highlighter-rouge">apk add mariadb mariadb-client</code>，然后执行<code class="language-plaintext highlighter-rouge">/etc/init.d/mariadb setup</code>初始化，执行<code class="language-plaintext highlighter-rouge">rc-update add mariadb default</code>和<code class="language-plaintext highlighter-rouge">rc-service mariadb start</code>加入启动项和启动数据库，再执行<code class="language-plaintext highlighter-rouge">mysql_secure_installation</code>配置一些安全上的东西就OK了。</li>
<li>Nginx安装起来就简单多了，直接执行<code class="language-plaintext highlighter-rouge">apk add nginx</code>，然后加入启动项<code class="language-plaintext highlighter-rouge">rc-update add nginx default</code>就行了。当然这只是安装，之后还需要一些配置才能连接到PHP。</li>
<li>额外的一些比如Redis我也试着装了一下，用<code class="language-plaintext highlighter-rouge">apk add redis</code>和<code class="language-plaintext highlighter-rouge">rc-update add redis default</code>就OK。</li>
</ol>
<p>所有操作完成之后Nginx改一下配置文件，需要在<code class="language-plaintext highlighter-rouge">/etc/nginx/http.d</code>里的配置文件中增加一段：</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
</code></pre></div></div>
<p>这个文件夹里面的<code class="language-plaintext highlighter-rouge">default.conf</code>中没配root，而且默认404，这些使用的时候都需要改一下。 </p><p>
所有的东西改完之后就可以使用完整的LEMP环境了。当然这些都是预演，这篇文章也是为了接下来在服务器上配置做准备。 </p><p>
另外还有些安全上的问题，默认情况下是没有配禁用函数的，还有防火墙默认也没有安装，Alpine倒是支持安装ufw也挺方便的，这些实际使用的时候都得配一下。 </p><p>
除此之外还有把php-fpm和redis配置成监听Unix Domain之类的优化操作，这些之前的文章都有写，这里就不多做描述了。</p>
<h2 id="配置bbr">
<a href="#配置bbr"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 配置BBR
</h2>
<p>之前用CentOS的时候我是直接用的脚本整的BBR，不过BBR好像是高版本Linux内核自带的功能，本来就不需要安装，Alpine的内核版本好像是5.15，就不用像CentOS那样还要升级内核了，所以只要执行以下命令：</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sed</span> <span class="nt">-i</span> <span class="s1">'/net.core.default_qdisc/d'</span> /etc/sysctl.conf
<span class="nb">sed</span> <span class="nt">-i</span> <span class="s1">'/net.ipv4.tcp_congestion_control/d'</span> /etc/sysctl.conf
<span class="nb">echo</span> <span class="s2">"net.core.default_qdisc = fq"</span> <span class="o">&gt;&gt;</span> /etc/sysctl.conf
<span class="nb">echo</span> <span class="s2">"net.ipv4.tcp_congestion_control = bbr"</span> <span class="o">&gt;&gt;</span> /etc/sysctl.conf
sysctl <span class="nt">-p</span>
</code></pre></div></div>
<p>然后重启，执行<code class="language-plaintext highlighter-rouge">lsmod | grep bbr</code>只要有<code class="language-plaintext highlighter-rouge">tcp_bbr</code>就OK。</p>
<h1 id="体验和总结">
<a href="#体验和总结"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 体验和总结
</h1>
<p>最终整完之后安装了Discuz，感觉还挺不错的，功能简单试了一下都没有问题，用探针测试了一下速度也很不错，感觉作为接下来花火学园和资源统筹局的基础环境没有任何问题。 </p><p>
在结束之后我看了一下占用硬盘才600MiB，空载内存才200MiB左右，这简直比CentOS好太多了，像CentOS的LEMP空载内存都要600MiB左右，我整个服务器才2GiB的内存，被系统占掉那么多它到底干了些啥？目前我没有发现任何坑，到时候迁移完再看吧，总之现在的我只能说，小就是好！</p></main>
<small style="display: block">tags: <a rel="category tag" class="p-category" href="/search.html?keyword=Alpine"><em>Alpine</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=LEMP"><em>LEMP</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=PHP"><em>PHP</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2022-03-12-alpine.md">查看原始文件</a></span></small>
<h4 style="border-bottom: 1px solid #e5e5e5;margin: 2em 0 5px;">推荐文章</h4>
<p id="suggest-container">Loading...</p>
<script>
var suggest = $("#suggest-container");
$.get(BlogAPI + "/suggest?id=/2022/03/12/alpine.html&update=" + lastUpdated.valueOf(), function (data) {
if (data.length) {
getSearchJSON(function (search) {
suggest.empty();
var searchMap = {};
for (var i = 0; i < search.length; i++) {
searchMap[search[i].url] = search[i];
}
var tooltip = $('<div class="content-tooltip"></div>').appendTo('body').hide();
for (var j = 0; j < data.length; j++) {
var item = searchMap[data[j].id];
if (item) {
var link = $('<a href="' + item.url + '">' + item.title + '</a>');
var contentPreview = item.content.substring(0, 100);
if (item.content.length > 100) {
contentPreview += "……";
}
link.hover(
function(e) {
tooltip.text($(this).data('content'))
.css({
top: e.pageY + 10,
left: e.pageX + 10
})
.show();
},
function() {
tooltip.hide();
}
).mousemove(function(e) {
tooltip.css({
top: e.pageY + 10,
left: e.pageX + 10
});
}).data('content', contentPreview);
suggest.append(link);
suggest.append(' - ' + item.date + '<br />');
}
}
});
} else {
suggest.html("暂无推荐文章……");
}
});
</script>
<br />
<div class="pagination">
<span class="prev">
<a href="/2022/02/15/termux.html">
上一篇：在平板上使用Termux的经历
</a>
</span>
<br />
<span class="next">
<a href="/2022/03/27/radio.html">
下一篇：用树莓派自制FM电台
</a>
</span>
</div>
<!--[if !IE]> -->
<link rel="stylesheet" href="/assets/css/gitalk.css">
<script src="/assets/js/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script>
var gitalk = new Gitalk({
clientID: '36557aec4c3cb04f7ac6',
clientSecret: 'ac32993299751cb5a9ba81cf2b171cca65879cdb',
repo: 'mabbs.github.io',
owner: 'Mabbs',
admin: ['Mabbs'],
id: '/2022/03/12/alpine', // Ensure uniqueness and length less than 50
distractionFreeMode: false, // Facebook-like distraction free mode
proxy: "https://cors-anywhere.mayx.eu.org/?https://github.com/login/oauth/access_token"
})
gitalk.render('gitalk-container')
</script>
<!-- <![endif]-->
</section>
<!--[if !IE]> -->
<div id="landlord" style="left:5px;bottom:0px;">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="500" height="560" class="live2d"></canvas>
<div class="live_talk_input_body">
<form id="live_talk_input_form">
<div class="live_talk_input_name_body" >
<input type="checkbox" id="load_this" />
<input type="hidden" id="post_id" value="/2022/03/12/alpine.html" />
<label for="load_this">
<span style="font-size: 11px; color: #fff;">&#160;想问这篇文章</span>
</label>
</div>
<div class="live_talk_input_text_body">
<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀？" />
<button type="submit" class="live_talk_send_btn" id="talk_send">发送</button>
</div>
</form>
</div>
<input name="live_talk" id="live_talk" value="1" type="hidden" />
<div class="live_ico_box" style="display:none;">
<div class="live_ico_item type_info" id="showInfoBtn"></div>
<div class="live_ico_item type_talk" id="showTalkBtn"></div>
<div class="live_ico_item type_music" id="musicButton"></div>
<div class="live_ico_item type_youdu" id="youduButton"></div>
<div class="live_ico_item type_quit" id="hideButton"></div>
<input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
<audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
<input id="duType" value="douqilai" type="hidden" />
</div>
</div>
<div id="open_live2d">召唤伊斯特瓦尔</div>
<!-- <![endif]-->
<footer>
<p>
<small>Made with ❤ by Mayx<br />Last updated at 2026-01-01 00:00:18<br /> 总字数：614622 - 文章数：178 - <a href="/atom.xml" >Atom</a> - <a href="/README.html" >About</a></small>
</p>
</footer>
</div>
<script src="/assets/js/scale.fix.js"></script>
<!--[if !IE]> -->
<script src="/assets/js/main_new.js"></script>
<script src="/Live2dHistoire/live2d/js/live2d.js"></script>
<script src="/Live2dHistoire/live2d/js/message.js"></script>
<!-- <![endif]-->
</body>
</html>