CINXE.COM

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="canonical" href="https://liruifengv.com/"><meta name="generator" content="Astro v5.0.2"><title>liruifengv</title><meta name="title" content="liruifengv"><meta name="description" content="liruifengv 的个人网站。分享技术、生活、读书、随笔等。李瑞丰的个人博客。"><meta name="author" content="liruifengv"><link rel="sitemap" href="/sitemap-index.xml"><meta property="og:title" content="liruifengv"><meta property="og:description" content="liruifengv 的个人网站。分享技术、生活、读书、随笔等。李瑞丰的个人博客。"><meta property="og:url" content="https://liruifengv.com/"><meta property="og:image" content="https://liruifengv.com/og.png"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://liruifengv.com/"><meta property="twitter:title" content="liruifengv"><meta property="twitter:description" content="liruifengv 的个人网站。分享技术、生活、读书、随笔等。李瑞丰的个人博客。"><meta property="twitter:image" content="https://liruifengv.com/og.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&family=Rubik:wght@500;600&display=swap" rel="stylesheet"><script src="/toggle-theme.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-LH9N740HBE"></script><script type="module">window.dataLayer=window.dataLayer||[];function a(){window.dataLayer.push(arguments)}a("js",new Date);a("config","G-LH9N740HBE");</script><link rel="stylesheet" href="/_astro/about.BaOpPmvv.css"> <style>.action:where(.astro-balv45lp){position:relative;display:flex;place-content:center;text-align:center;padding:.56em 1.5em;gap:.8em;color:var(--accent-text-over);text-decoration:none;line-height:1.1;border-radius:999rem;overflow:hidden;background:var(--gradient-accent-orange);box-shadow:var(--shadow-md);white-space:nowrap;align-items:center;font-size:1.125rem;line-height:1.75rem}@media (min-width: 768px){.action:where(.astro-balv45lp){font-size:1.25rem;line-height:1.75rem}}.action:where(.astro-balv45lp):after{content:"";position:absolute;inset:0;pointer-events:none;transition:background-color var(--theme-transition);mix-blend-mode:overlay}.action:where(.astro-balv45lp):focus:after,.action:where(.astro-balv45lp):hover:after{background-color:hsla(var(--gray-999-basis),.3)}aside:where(.astro-rcdzuq3a){display:flex;flex-direction:column;gap:3rem;border-top:1px solid var(--gray-800);border-bottom:1px solid var(--gray-800);padding:5rem 1.5rem;background-color:var(--gray-999_40);box-shadow:var(--shadow-sm)}h2:where(.astro-rcdzuq3a){text-align:center;font-size:1.25rem;line-height:1.75rem}@media (min-width: 768px){h2:where(.astro-rcdzuq3a){font-size:1.5rem;line-height:2rem}}@media (min-width: 50em){aside:where(.astro-rcdzuq3a){padding:7.5rem;flex-direction:row;flex-wrap:wrap;justify-content:space-between}h2:where(.astro-rcdzuq3a){text-align:left}} .hero:where(.astro-bbe6dxrz){font-size:var(--text-lg);text-align:left}.title:where(.astro-bbe6dxrz),.tagline:where(.astro-bbe6dxrz){max-width:37ch;margin-inline:auto}.title:where(.astro-bbe6dxrz){color:var(--gray-0);font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.title:where(.astro-bbe6dxrz){font-size:1.875rem;line-height:2.25rem}}.tagline:where(.astro-bbe6dxrz){font-size:1.125rem;line-height:1.75rem}@media (min-width: 768px){.tagline:where(.astro-bbe6dxrz){font-size:1.25rem;line-height:1.75rem}}@media (min-width: 50em){.hero:where(.astro-bbe6dxrz){font-size:var(--text-xl)}.start:where(.astro-bbe6dxrz){text-align:start}.start:where(.astro-bbe6dxrz) .title:where(.astro-bbe6dxrz),.start:where(.astro-bbe6dxrz) .tagline:where(.astro-bbe6dxrz){margin-inline:unset}} </style> <link rel="stylesheet" href="/_astro/about.r1VhreVz.css"> <style>svg:where(.astro-patnjmll){vertical-align:middle;width:var(--size, 1em);height:var(--size, 1em)} .pill:where(.astro-2qeywk4b){display:flex;padding:.5rem 1rem;gap:.5rem;color:var(--accent-text-over);border:1px solid var(--accent-regular);background-color:var(--accent-regular);border-radius:999rem;font-size:var(--text-md);line-height:1.35;white-space:nowrap}.box:where(.astro-ab4ihpzs){border:1px solid var(--gray-800);border-radius:.75rem;padding:1.5rem;background-color:var(--gray-999_40);box-shadow:var(--shadow-sm)}.skills:where(.astro-ab4ihpzs){display:flex;flex-direction:column;gap:3rem}.skills:where(.astro-ab4ihpzs) h2:where(.astro-ab4ihpzs){font-size:1.25rem;line-height:1.75rem}@media (min-width: 768px){.skills:where(.astro-ab4ihpzs) h2:where(.astro-ab4ihpzs){font-size:1.5rem;line-height:2rem}}.skills:where(.astro-ab4ihpzs) p:where(.astro-ab4ihpzs){color:var(--gray-400)}@media (min-width: 50em){.box:where(.astro-ab4ihpzs){border-radius:1.5rem;padding:2.5rem}.skills:where(.astro-ab4ihpzs){display:grid;grid-template-columns:repeat(3,1fr);gap:5rem}}.hero:where(.astro-j7pv25f6){display:flex;flex-direction:column;align-items:center;gap:2rem}.roles:where(.astro-j7pv25f6){display:none}.hero:where(.astro-j7pv25f6) img:where(.astro-j7pv25f6){aspect-ratio:5 / 4;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;border-radius:1.5rem;box-shadow:var(--shadow-md)}@media (min-width: 50em){.hero:where(.astro-j7pv25f6){display:grid;grid-template-columns:6fr 4fr;padding-inline:2.5rem;gap:3.75rem}.roles:where(.astro-j7pv25f6){margin-top:.5rem;display:flex;gap:.5rem}}.section:where(.astro-j7pv25f6){display:grid;gap:2rem}.section-header:where(.astro-j7pv25f6){justify-self:center;text-align:center;max-width:50ch;font-size:var(--text-md);color:var(--gray-300)}.section-header:where(.astro-j7pv25f6) h3:where(.astro-j7pv25f6){font-size:var(--text-2xl)}@media (min-width: 50em){.section:where(.astro-j7pv25f6){grid-template-columns:repeat(4,1fr);grid-template-areas:"header header header header" "gallery gallery gallery gallery";gap:3rem}.section:where(.astro-j7pv25f6).with-cta{grid-template-areas:"header header header cta" "gallery gallery gallery gallery"}.section-header:where(.astro-j7pv25f6){grid-area:header;font-size:var(--text-lg)}.section-header:where(.astro-j7pv25f6) h3:where(.astro-j7pv25f6){font-size:var(--text-4xl)}.with-cta:where(.astro-j7pv25f6) .section-header:where(.astro-j7pv25f6){justify-self:flex-start;text-align:left}.gallery:where(.astro-j7pv25f6){grid-area:gallery}.cta:where(.astro-j7pv25f6){grid-area:cta}}.mention-card:where(.astro-j7pv25f6){display:flex;height:7rem;justify-content:center;align-items:center;text-align:center;border:1px solid var(--gray-800);border-radius:1.5rem;color:var(--gray-300);background:var(--gradient-subtle);box-shadow:var(--shadow-sm)}@media (min-width: 50em){.mention-card:where(.astro-j7pv25f6){border-radius:1.5rem;height:9.5rem}}.list:where(.astro-j7pv25f6){display:flex;flex-direction:column}a:where(.astro-j7pv25f6){text-decoration:none}li:where(.astro-j7pv25f6){list-style:none}.title:where(.astro-j7pv25f6):hover{color:var(--link-color)}.title:where(.astro-j7pv25f6){z-index:1;margin:.5rem;color:var(--gray-200);font-size:1rem;line-height:1.5rem}@media (min-width: 768px){.title:where(.astro-j7pv25f6){font-size:1.125rem;line-height:1.75rem}}.time:where(.astro-j7pv25f6){color:var(--gray-400);font-size:.8rem;margin:.5rem}.box:where(.astro-j7pv25f6){border:1px solid var(--gray-800);border-radius:.75rem;padding:1.5rem;background-color:var(--gray-999_40);box-shadow:var(--shadow-sm)}.projects:where(.astro-j7pv25f6){display:flex;gap:2rem;flex-direction:column;cursor:pointer}.projects:where(.astro-j7pv25f6) h2:where(.astro-j7pv25f6){font-size:var(--text-lg)}.projects:where(.astro-j7pv25f6) h2:where(.astro-j7pv25f6):hover{color:var(--link-color)}.projects:where(.astro-j7pv25f6) p:where(.astro-j7pv25f6){color:var(--gray-400);margin-top:.5rem}@media (min-width: 50em){.box:where(.astro-j7pv25f6){border-radius:1.5rem;padding:2.5rem}.projects:where(.astro-j7pv25f6){display:grid;grid-template-columns:repeat(2,1fr);gap:3rem}} [data-astro-image]{width:100%;height:auto;-o-object-fit:var(--fit);object-fit:var(--fit);-o-object-position:var(--pos);object-position:var(--pos);aspect-ratio:var(--w) / var(--h)}[data-astro-image=responsive]{max-width:calc(var(--w) * 1px);max-height:calc(var(--h) * 1px)}[data-astro-image=fixed]{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px)} </style></head> <body> <div class="stack min-h-screen"> <nav class="astro-dmqpwcec"> <div class="menu-header astro-dmqpwcec"> <a href="/" class="site-title astro-dmqpwcec"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="url(#icon-gradient-1zw9wamtb)" fill="url(#icon-gradient-1zw9wamtb)" style="--size:1.6em" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m80 96 40 32-40 32m56 0h40"/><rect width="192" height="160" x="32" y="48" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16.97" rx="8.5"/></g> <linearGradient id="icon-gradient-1zw9wamtb" x1="23" x2="235" y1="43" y2="202" gradientUnits="userSpaceOnUse" class="astro-patnjmll"> <stop stop-color="var(--gradient-stop-1)" class="astro-patnjmll"></stop> <stop offset=".5" stop-color="var(--gradient-stop-2)" class="astro-patnjmll"></stop> <stop offset="1" stop-color="var(--gradient-stop-3)" class="astro-patnjmll"></stop> </linearGradient> </svg> liruifengv </a> <menu-button class="astro-dmqpwcec"> <template class="astro-dmqpwcec"> <button class="menu-button astro-dmqpwcec" aria-expanded="false"> <span class="sr-only astro-dmqpwcec">Menu</span> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M40 128h176M40 64h176M40 192h176"/></g> </svg> </button> </template> </menu-button> </div> <noscript> <ul class="nav-items astro-dmqpwcec"> <li class="astro-dmqpwcec"> <a aria-current="true" class="link active astro-dmqpwcec" href="/"> 首页 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/posts/"> 文章 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/tags/"> 标签 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/projects/"> 项目 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/about/"> 关于 </a> </li> </ul> </noscript> <noscript> <div class="menu-footer astro-dmqpwcec"> <div class="socials astro-dmqpwcec"> <a href="https://twitter.com/liruifengv" class="social astro-dmqpwcec"> <span class="sr-only astro-dmqpwcec">Twitter</span> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M128 88c0-22 18.5-40.3 40.5-40a40 40 0 0 1 36.2 24H240l-32.3 32.3A127.9 127.9 0 0 1 80 224c-32 0-40-12-40-12s32-12 48-36c0 0-64-32-48-120 0 0 40 40 88 48Z"/></g> </svg> </a><a href="https://github.com/liruifengv" class="social astro-dmqpwcec"> <span class="sr-only astro-dmqpwcec">GitHub</span> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><g stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke-width="14.7" d="M55.7 167.2c13.9 1 21.3 13.1 22.2 14.6 4.2 7.2 10.4 9.6 18.3 7.1l1.1-3.4a60.3 60.3 0 0 1-25.8-11.9c-12-10.1-18-25.6-18-46.3"/><path fill="none" stroke-width="16" d="M61.4 205.1a24.5 24.5 0 0 1-3-6.1c-3.2-7.9-7.1-10.6-7.8-11.1l-1-.6c-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.7 46.7 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4 0 42.6-25.8 54.7-43.6 58.7 1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3"/><path fill="none" stroke-width="16" d="M160.9 185.7c1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3A98.6 98.6 0 1 0 61.4 205c-1.4-2.1-11.3-17.5-11.8-17.8-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.4 46.4 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4.1 42.6-25.8 54.7-43.6 58.6z"/><path fill="none" stroke-width="18.7" d="m170.1 203.3 17.3-12 17.2-18.7 9.5-26.6v-27.9l-9.5-27.5" /><path fill="none" stroke-width="22.7" d="m92.1 57.3 23.3-4.6 18.7-1.4 29.3 5.4m-110 32.6-8 16-4 21.4.6 20.3 3.4 13" /><path fill="none" stroke-width="13.3" d="M28.8 133a100 100 0 0 0 66.9 94.4v-8.7c-22.4 1.8-33-11.5-35.6-19.8-3.4-8.6-7.8-11.4-8.5-11.8"/></g></g> </svg> </a> </div> </div> </noscript> <div id="menu-content" hidden class="astro-dmqpwcec"> <ul class="nav-items astro-dmqpwcec"> <li class="astro-dmqpwcec"> <a aria-current="true" class="link active astro-dmqpwcec" href="/"> 首页 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/posts/"> 文章 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/tags/"> 标签 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/projects/"> 项目 </a> </li><li class="astro-dmqpwcec"> <a aria-current="false" class="link astro-dmqpwcec" href="/about/"> 关于 </a> </li> </ul> <div class="menu-footer astro-dmqpwcec"> <div class="socials astro-dmqpwcec"> <a href="https://twitter.com/liruifengv" class="social astro-dmqpwcec"> <span class="sr-only astro-dmqpwcec">Twitter</span> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M128 88c0-22 18.5-40.3 40.5-40a40 40 0 0 1 36.2 24H240l-32.3 32.3A127.9 127.9 0 0 1 80 224c-32 0-40-12-40-12s32-12 48-36c0 0-64-32-48-120 0 0 40 40 88 48Z"/></g> </svg> </a><a href="https://github.com/liruifengv" class="social astro-dmqpwcec"> <span class="sr-only astro-dmqpwcec">GitHub</span> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><g stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke-width="14.7" d="M55.7 167.2c13.9 1 21.3 13.1 22.2 14.6 4.2 7.2 10.4 9.6 18.3 7.1l1.1-3.4a60.3 60.3 0 0 1-25.8-11.9c-12-10.1-18-25.6-18-46.3"/><path fill="none" stroke-width="16" d="M61.4 205.1a24.5 24.5 0 0 1-3-6.1c-3.2-7.9-7.1-10.6-7.8-11.1l-1-.6c-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.7 46.7 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4 0 42.6-25.8 54.7-43.6 58.7 1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3"/><path fill="none" stroke-width="16" d="M160.9 185.7c1.4 4.1 2.2 8.8 2.2 13.7l-.1 23.4v2.3A98.6 98.6 0 1 0 61.4 205c-1.4-2.1-11.3-17.5-11.8-17.8-2.4-1.6-9.5-6.5-7.2-13.9 1.4-4.5 6-7.2 12.3-7.2h.8c4 .3 7.6 1.5 10.7 3.2-9.1-10.1-13.6-24.3-13.6-42.3 0-11.3 3.5-21.7 10.1-30.4A46.4 46.4 0 0 1 65 67.3a8.3 8.3 0 0 1 5-4.7c2.8-.9 13.3-2.7 33.2 9.9a105 105 0 0 1 50.5 0c19.9-12.6 30.4-10.8 33.2-9.9 2.3.7 4.1 2.4 5 4.7 5 12.7 4 23.2 2.6 29.4 6.7 8.7 10 18.9 10 30.4.1 42.6-25.8 54.7-43.6 58.6z"/><path fill="none" stroke-width="18.7" d="m170.1 203.3 17.3-12 17.2-18.7 9.5-26.6v-27.9l-9.5-27.5" /><path fill="none" stroke-width="22.7" d="m92.1 57.3 23.3-4.6 18.7-1.4 29.3 5.4m-110 32.6-8 16-4 21.4.6 20.3 3.4 13" /><path fill="none" stroke-width="13.3" d="M28.8 133a100 100 0 0 0 66.9 94.4v-8.7c-22.4 1.8-33-11.5-35.6-19.8-3.4-8.6-7.8-11.4-8.5-11.8"/></g></g> </svg> </a> </div> <div class="theme-toggle astro-dmqpwcec"> <theme-toggle class="astro-x3pjskd3"> <button class="astro-x3pjskd3"> <span class="sr-only astro-x3pjskd3">Dark theme</span> <span class="icon light astro-x3pjskd3"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><circle cx="128" cy="128" r="60" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M128 36V16M63 63 49 49m-13 79H16m47 65-14 14m79 13v20m65-47 14 14m13-79h20m-47-65 14-14"/></g> </svg> </span> <span class="icon dark astro-x3pjskd3"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M216 112V64m24 24h-48m-24-64v32m16-16h-32m65 113A92 92 0 0 1 103 39h0a92 92 0 1 0 114 114Z"/></g> </svg> </span> </button> </theme-toggle> <script type="module">class n extends HTMLElement{constructor(){super();const t=this.querySelector("button"),s=e=>{document.documentElement.classList[e?"add":"remove"]("theme-dark"),t.setAttribute("aria-pressed",String(e)),document.documentElement.setAttribute("data-theme",e?"dark":"light"),localStorage.setItem("theme",e?"dark":"light")};t.addEventListener("click",()=>s(!this.isDark())),s(this.isDark())}isDark(){return document.documentElement.classList.contains("theme-dark")}}customElements.define("theme-toggle",n);</script> </div> </div> </div> </nav> <script type="module">class i extends HTMLElement{constructor(){super(),this.appendChild(this.querySelector("template").content.cloneNode(!0));const n=this.querySelector("button"),t=document.getElementById("menu-content");t.hidden=!0,t.classList.add("menu-content");const d=e=>{n.setAttribute("aria-expanded",e?"true":"false"),t.hidden=!e};n.addEventListener("click",()=>d(t.hidden));const s=e=>{d(e.matches),n.hidden=e.matches},c=window.matchMedia("(min-width: 50em)");s(c),c.addEventListener("change",s)}}customElements.define("menu-button",i);</script> <div class="stack gap-15 astro-j7pv25f6"> <div class="wrapper stack gap-8 lg:gap-20 astro-j7pv25f6"> <header class="hero astro-j7pv25f6"> <div class="hero stack gap-4 start astro-bbe6dxrz"> <div class="stack gap-2 astro-bbe6dxrz"> <h1 class="title astro-bbe6dxrz">liruifengv</h1> <p class="tagline astro-bbe6dxrz">Web 开发者，Astro 项目成员，开源爱好者。</p> </div> <div class="roles astro-j7pv25f6"> <div class="pill astro-2qeywk4b"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" style="--size:1.33em" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m64 88-48 40 48 40m128-80 48 40-48 40M160 40 96 216"/></g> </svg> Developer</div>  <div class="pill astro-2qeywk4b"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" style="--size:1.33em" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M96 216H48a8 8 0 0 1-8-8v-44.7a7.9 7.9 0 0 1 2.3-5.6l120-120a8 8 0 0 1 11.4 0l44.6 44.6a8 8 0 0 1 0 11.4Zm40-152 56 56"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M216 216H96l-55.5-55.5M164 92l-96 96"/></g> </svg> Writer</div> </div> </div> <img src="/_astro/avatar_Z1WBhMX.webp" alt="liruifengv's avatar" class="astro-j7pv25f6" width="400" height="400" loading="lazy" decoding="async" class="astro-j7pv25f6"> </header> <section class="box skills astro-ab4ihpzs"> <div class="stack gap-2 lg:gap-4 astro-ab4ihpzs"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="url(#icon-gradient-1p3lbi86m)" fill="url(#icon-gradient-1p3lbi86m)" style="--size:2.5rem" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m80 96 40 32-40 32m56 0h40"/><rect width="192" height="160" x="32" y="48" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16.97" rx="8.5"/></g> <linearGradient id="icon-gradient-1p3lbi86m" x1="23" x2="235" y1="43" y2="202" gradientUnits="userSpaceOnUse" class="astro-patnjmll"> <stop stop-color="var(--gradient-stop-1)" class="astro-patnjmll"></stop> <stop offset=".5" stop-color="var(--gradient-stop-2)" class="astro-patnjmll"></stop> <stop offset="1" stop-color="var(--gradient-stop-3)" class="astro-patnjmll"></stop> </linearGradient> </svg> <h2 class="astro-ab4ihpzs">Web 开发</h2> <p class="astro-ab4ihpzs">专注 Web 开发。使用 JS、Rust、Go。</p> </div> <div class="stack gap-2 lg:gap-4 astro-ab4ihpzs"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="url(#icon-gradient-2sgjmy2zu)" fill="url(#icon-gradient-2sgjmy2zu)" style="--size:2.5rem" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M56 56v55.1c0 39.7 31.8 72.6 71.5 72.9a72 72 0 0 0 72.5-72V56a8 8 0 0 0-8-8H64a8 8 0 0 0-8 8Zm40 168h64m-32-40v40"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M198.2 128h9.8a32 32 0 0 0 32-32V80a8 8 0 0 0-8-8h-32M58 128H47.9a32 32 0 0 1-32-32V80a8 8 0 0 1 8-8h32"/></g> <linearGradient id="icon-gradient-2sgjmy2zu" x1="23" x2="235" y1="43" y2="202" gradientUnits="userSpaceOnUse" class="astro-patnjmll"> <stop stop-color="var(--gradient-stop-1)" class="astro-patnjmll"></stop> <stop offset=".5" stop-color="var(--gradient-stop-2)" class="astro-patnjmll"></stop> <stop offset="1" stop-color="var(--gradient-stop-3)" class="astro-patnjmll"></stop> </linearGradient> </svg> <h2 class="astro-ab4ihpzs">Astro</h2> <p class="astro-ab4ihpzs">Astro 项目成员，中文文档维护翻译。</p> </div> <div class="stack gap-2 lg:gap-4 astro-ab4ihpzs"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="url(#icon-gradient-29da96zfm)" fill="url(#icon-gradient-29da96zfm)" style="--size:2.5rem" class="astro-patnjmll"> <g class="astro-patnjmll"><circle cx="68" cy="188" r="28" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m40 72 40 40m0-40-40 40m136 56 40 40m0-40-40 40M136 80V40h40"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="m136 40 16 16c40 40 8 88-24 96"/></g> <linearGradient id="icon-gradient-29da96zfm" x1="23" x2="235" y1="43" y2="202" gradientUnits="userSpaceOnUse" class="astro-patnjmll"> <stop stop-color="var(--gradient-stop-1)" class="astro-patnjmll"></stop> <stop offset=".5" stop-color="var(--gradient-stop-2)" class="astro-patnjmll"></stop> <stop offset="1" stop-color="var(--gradient-stop-3)" class="astro-patnjmll"></stop> </linearGradient> </svg> <h2 class="astro-ab4ihpzs">AI 初学者</h2> <p class="astro-ab4ihpzs">AI 是未来吗，我不知道。</p> </div> </section> </div> <main class="wrapper stack gap-20 astro-j7pv25f6"> <section class="section with-background with-cta astro-j7pv25f6"> <header class="section-header stack gap-2 lg:gap-4 astro-j7pv25f6"> <h4 class="text-2xl font-bold astro-j7pv25f6">精选文章</h4><h4 class="astro-j7pv25f6"></h4> <p class="text-lg astro-j7pv25f6"> 这里是我最近写的一些文章，感兴趣的话可以看看！ </p> </header> <div class="gallery astro-j7pv25f6"> <li class="astro-j7pv25f6"> <a href="/posts/svelte-5" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">svelte 5.0 全新响应式API</p> <div class="time astro-j7pv25f6"> 2024年10月24日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/2024-mid-year-summary" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">2024 年中总结 & 为什么程序员要做个人品牌</p> <div class="time astro-j7pv25f6"> 2024年7月2日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/react-19-with-astro-actions" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">学习 React 19 新 Hook useActionState，并在 Astro 中使用</p> <div class="time astro-j7pv25f6"> 2024年6月26日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/zero-js-view-transitions" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">零 js 开启 View Transitions 动画</p> <div class="time astro-j7pv25f6"> 2024年6月12日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/astro-actions" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">详解 Astro Actions API，在客户端类型安全地调用后端函数</p> <div class="time astro-j7pv25f6"> 2024年5月15日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/2024-q1-summary" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">2024 Q1 季度总结</p> <div class="time astro-j7pv25f6"> 2024年4月1日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/daily-poetry-image" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">每天一句中国古诗词，通过 Bing DALL-E-3 生成 AI 图片</p> <div class="time astro-j7pv25f6"> 2024年1月22日 </div> </a> </li><li class="astro-j7pv25f6"> <a href="/posts/astro-auto-gen-og-image" class="astro-j7pv25f6"> <p class="title astro-j7pv25f6">Astro 自动生成 Open Graph & Twitter card 图片😄</p> <div class="time astro-j7pv25f6"> 2024年1月17日 </div> </a> </li> </div> <div class="cta astro-j7pv25f6"> <a class="action astro-balv45lp" href="/posts/"> 查看全部 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" style="--size:1.2em" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M40 128h176m-72-72 72 72-72 72"/></g> </svg> </a> </div> </section> <section class="section with-cta astro-j7pv25f6"> <header class="section-header stack gap-2 lg:gap-4 astro-j7pv25f6"> <h4 class="text-2xl font-bold astro-j7pv25f6">最近项目</h4><h4 class="astro-j7pv25f6"></h4> </header> <section class="projects gallery astro-j7pv25f6"> <a class="box astro-j7pv25f6" href="https://github.com/liruifengv/we-drawing" target="_blank" rel="noopener noreferrer"> <h2 class="astro-j7pv25f6">We Drawing</h2> <p class="astro-j7pv25f6">AI 画图。每天一句中国古诗词，生成 AI 图片。</p> </a><a class="box astro-j7pv25f6" href="https://github.com/liruifengv/astro-cn.com" target="_blank" rel="noopener noreferrer"> <h2 class="astro-j7pv25f6">astro-cn.com</h2> <p class="astro-j7pv25f6">Astro 中文网站 Showcase。展示一些使用 Astro 构建的中文网站！</p> </a> </section> <div class="cta astro-j7pv25f6"> <a class="action astro-balv45lp" href="/projects/"> 查看全部 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" style="--size:1.2em" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M40 128h176m-72-72 72 72-72 72"/></g> </svg> </a> </div> </section> </main> <aside class="astro-rcdzuq3a"> <h2 class="astro-rcdzuq3a">很高兴见到你！</h2> <a class="action astro-balv45lp" href="/about/#联系方式"> 加我好友 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" aria-hidden="true" stroke="currentcolor" fill="currentcolor" style="--size:1.2em" class="astro-patnjmll"> <g class="astro-patnjmll"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M210.3 35.9 23.9 88.4a8 8 0 0 0-1.2 15l85.6 40.5a7.8 7.8 0 0 1 3.8 3.8l40.5 85.6a8 8 0 0 0 15-1.2l52.5-186.4a7.9 7.9 0 0 0-9.8-9.8Zm-99.4 109.2 45.2-45.2"/></g> </svg> </a> </aside> </div> <footer class="astro-sz7xmlte"> <div class="group astro-sz7xmlte"> <p class="flex gap-2 items-center justify-center astro-sz7xmlte"> <a href="https://astro.build" class="astro-sz7xmlte"><img src="https://astro.badg.es/v2/built-with-astro/tiny.svg" alt="Built with Astro" width="120" height="20" class="astro-sz7xmlte"></a> </p> <p class="astro-sz7xmlte">© 2025 liruifengv</p> </div> <p class="socials astro-sz7xmlte"> <a href="https://twitter.com/liruifengv" class="astro-sz7xmlte"> Twitter</a> <a href="https://github.com/liruifengv" class="astro-sz7xmlte"> GitHub</a> <a href="/cdn-cgi/l/email-protection#ddb1b4afa8b4bbb8b3baecedefe99dbab0bcb4b1f3beb2b0" class="astro-sz7xmlte"> Email</a> <a href="https://liruifengv.com/rss.xml" class="astro-sz7xmlte"> RSS</a> <a href="/year" class="astro-sz7xmlte"> Archive</a> </p> </footer> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body></html>