1<!DOCTYPE html><html lang="en-US"><head><meta charSet="UTF-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><title data-next-head="">Notionic</title><meta name="robots" content="follow, index" data-next-head=""/><meta name="keywords" content="Notionic, Zuolan, Blog" data-next-head=""/><meta name="description" content="A static blog build on top of Notion and Next.js" data-next-head=""/><meta property="og:locale" content="en-US" data-next-head=""/><meta property="og:title" content="Notionic" data-next-head=""/><meta property="og:description" content="A static blog build on top of Notion and Next.js" data-next-head=""/><meta property="og:url" content="https://zuolan.me/" data-next-head=""/><meta property="og:image" content="https://og-zl.vercel.app/api/default?logo=https://zuolan.me/favicon.png&siteName=Notionic&description=A%20static%20blog%20build%20on%20top%20of%20Notion%20and%20Next.js&title=Notionic&summary=A%20static%20blog%20build%20on%20top%20of%20Notion%20and%20Next.js&theme=light&border=solid" data-next-head=""/><meta property="og:type" content="website" data-next-head=""/><meta name="twitter:card" content="summary_large_image" data-next-head=""/><meta name="twitter:description" content="A static blog build on top of Notion and Next.js" data-next-head=""/><meta name="twitter:title" content="Notionic" data-next-head=""/><meta name="twitter:image" content="https://og-zl.vercel.app/api/default?logo=https://zuolan.me/favicon.png&siteName=Notionic&description=A%20static%20blog%20build%20on%20top%20of%20Notion%20and%20Next.js&title=Notionic&summary=A%20static%20blog%20build%20on%20top%20of%20Notion%20and%20Next.js&theme=light&border=solid" data-next-head=""/><link rel="icon" href="/favicon.ico"/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" sizes="192x192" href="/favicon.png"/><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed"/><meta name="theme-color" content="#F6F8FA" media="(prefers-color-scheme: light)"/><meta name="theme-color" content="#212936" media="(prefers-color-scheme: dark)"/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/4042241a4f596c68.css" as="style"/><link rel="stylesheet" href="/_next/static/css/4042241a4f596c68.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-0989effd07308f9d.js" defer=""></script>
1<script src="/_next/static/chunks/framework-8ffa5ed75f9b67ba.js" defer=""></script>
1<script src="/_next/static/chunks/main-944e13845443dedb.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-4110658e52b5e1e0.js" defer=""></script>
1<script src="/_next/static/chunks/8685-ce41a09c8c76bca8.js" defer=""></script>
1<script src="/_next/static/chunks/341-756ffe21522a567b.js" defer=""></script>
1<script src="/_next/static/chunks/pages/index-fddf9befd93807d9.js" defer=""></script>
1<script src="/_next/static/OI2fmCT2UendTIC5aYU5W/_buildManifest.js" defer=""></script>
1<script src="/_next/static/OI2fmCT2UendTIC5aYU5W/_ssgManifest.js" defer=""></script>
1</head><body class="bg-day dark:bg-night"><div id="__next">
1<script>((e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n)}),R(n)}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n)}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y)}catch(n){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<div class="relative"><div class="observer-element h-4 md:h-12"></div><div class="sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 max-w-3xl px-4" id="sticky-nav"><div class="flex items-center"><a aria-label="Notionic" href="/"><div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100" overflow="visible" style="opacity:1" class="h-6 hover:text-blue-500 fill-current"><path opacity="0.4" fill="var(--color-inverse)"><animate attributeName="d" dur="10s" repeatCount="indefinite" values="M120.1,75.9Q111.8,101.8,88.9,120.9Q65.8,139.8,41.2,123.8Q16.6,107.8,-5.5,93Q-27.6,78.3,-30.5,49Q-33.2,19.8,-9.2,4.2Q14.6,-11.4,38.8,-17Q63,-22.5,81.5,-7.3Q100.1,8.1,114.2,29Q128.4,50,120.1,75.9Z;M125,75.8Q111.4,101.5,88.2,118.6Q65,135.9,40.4,122.6Q16.1,109.2,-3.1,92.7Q-22,76.1,-18.6,51Q-15.9,25.8,-0.4,7.8Q15.1,-10,39.1,-17.5Q63.3,-24.7,81.5,-8.1Q99.8,8.4,119.3,29.2Q138.5,50,125,75.8Z;M109.4,73.5Q105.4,96.2,84.2,107.9Q62.2,118.2,37.2,117.7Q12.1,115.3,-11.8,98.2Q-36.2,80.2,-34.5,50.3Q-33.4,19.6,-11.6,0.4Q10,-18.2,36.1,-18.6Q62,-18.3,87.8,-10.6Q113.5,-3.3,112.2,23.3Q112.6,50,109.4,73.5Z;M120.1,75.9Q111.8,101.8,88.9,120.9Q65.8,139.8,41.2,123.8Q16.6,107.8,-5.5,93Q-27.6,78.3,-30.5,49Q-33.2,19.8,-9.2,4.2Q14.6,-11.4,38.8,-17Q63,-22.5,81.5,-7.3Q100.1,8.1,114.2,29Q128.4,50,120.1,75.9Z"></animate></path><g transform="translate(0.000000,100) scale(0.080000,-0.080000)"><path d="M762 1203 c-6 -15 -13 -46 -17 -68 -4 -22 -13 -49 -20 -61 -15 -23 -122 -69 -257 -109 -49 -14 -88 -28 -88 -29 0 -2 33 -20 73 -40 49 -24 87 -36 115 -36 28 0 42 -4 42 -13 0 -34 -295 -517 -390 -639 -40 -52 -4 -28 86 56 49 46 105 109 124 141 19 31 64 98 100 148 77 108 125 186 173 283 20 39 46 78 59 86 13 8 69 34 126 58 107 45 118 57 110 111 -3 21 -10 25 -78 34 l-75 10 -5 45 c-5 42 -7 45 -36 48 -26 3 -33 -1 -42 -25z"></path><path d="M754 616 c-40 -19 -88 -39 -108 -46 -43 -14 -45 -30 -7 -72 25 -28 33 -31 80 -30 39 1 54 -3 58 -15 7 -18 -30 -140 -58 -192 -36 -67 6 -93 135 -84 l86 6 0 -26 c0 -14 -4 -37 -10 -51 -5 -14 -8 -26 -6 -26 7 0 110 68 129 85 11 10 17 30 17 60 0 62 -22 70 -150 57 -52 -5 -98 -6 -103 -2 -4 3 3 31 16 61 13 30 32 78 42 108 10 30 28 70 41 89 26 38 30 63 14 93 -17 31 -91 25 -176 -15z"></path></g></svg></div></a><p class="ml-5 font-medium hidden">Notionic<!-- -->,<!-- --> <span class="font-normal">A static blog build on top of Notion and Next.js</span></p></div><div class="flex nav-bar-pill backdrop-blur-sm md:p-1 bg-gray-100/40 dark:bg-gray-800/40 rounded-xl"><ul class="hidden md:flex md:gap-1"><a href="/"><li class="bg-gray-500/10 dark:bg-gray-300/10 nav-hover cursor-pointer rounded-lg block nav py-1 px-2"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path></svg><span class="inline-block m-1">Home</span></div></li></a><a href="/newsletter"><li class=" nav-hover cursor-pointer rounded-lg block nav py-1 px-2"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"></path></svg><span class="inline-block m-1">Newsletter</span></div></li></a><a href="/notes"><li class=" nav-hover cursor-pointer rounded-lg block nav py-1 px-2"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6
1a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"></path></svg><span class="inline-block m-1">Notes</span></div></li></a><a href="/projects"><li class=" nav-hover cursor-pointer rounded-lg block nav py-1 px-2"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"></path></svg><span class="inline-block m-1">Projects</span></div></li></a><a href="/search"><li class=" nav-hover cursor-pointer rounded-lg block nav py-1 px-2"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg><span class="inline-block m-1">Search</span></div></li></a></ul><div class="nav-func-btn block"><button aria-label="ThemeSwitcher" class="p-2 ml-1 nav-hover cursor-pointer rounded-lg dark:text-gray-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"></path></svg></button><a href="/zh"><button aria-label="LangSwitcher" class="p-2 nav-hover cursor-pointer rounded-lg dark:text-gray-100"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"></path></svg></button></a></div><div class="md:hidden block mr-2"><button type="button" aria-label="Menu" class="nav-hover cursor-pointer rounded-lg block p-1 m-1 -mr-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div></div></div><div style="opacity:1;transform:none"><div class="min-h-[calc(100vh-14rem)] md:min-h-[calc(100vh-18rem)] font-sans"><main class="m-auto flex-grow w-full transition-all max-w-2xl px-4"><div class="container mx-auto flex px-5 py-2 mb-10 md:flex-row flex-col items-center md:items-start"><div class="flex flex-col md:w-3/5 md:items-start mb-6 md:mb-0 text-left min-h-[8rem]"><div class="flex gap-4"><a target="_blank" aria-label="Telegram" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100" href="https://t.me/zuolan"><svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-3.11-8.83l-2.498-.779c-.54-.165-.543-.537.121-.804l9.733-3.76c.565-.23.885.061.702.79l-1.657 7.82c-.116.557-.451.69-.916.433l-2.551-1.888-1.189 1.148c-.122.118-.221.219-.409.244-.187.026-.341-.03-.454-.34l-.87-2.871-.012.008z"></path></svg></a><a target="_blank" aria-label="Twitter" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100" href="https://twitter.com/izuolan"><svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M15.3 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.6.6 0 0 1-.68.583l-1.561-.212c-2.054-.28-4.022-1.226-5.91-2.799-.598 3.31.57 5.603 3.383 7.372l1.747 1.098a.6.6 0 0 1 .034.993L7.793 18.17c.947.059 1.846.017 2.592-.131 4.718-.942 7.855-4.492 7.855-10.348 0-.478-1.012-2.141-2.94-2.141zm-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.
1005 1.316.175 2.669-.645-.335 1.64-.5 2.352-1.214 3.331 0 7.642-4.697 11.358-9.463 12.309-3.268.652-8.02-.419-9.382-1.841.694-.054 3.514-.357 5.144-1.55C5.16 15.7-.329 12.47 3.278 3.786c1.693 1.977 3.41 3.323 5.15 4.037 1.158.475 1.442.465 1.973.538z"></path></svg></a><a target="_blank" aria-label="Github" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100" href="https://github.com/izuolan"><svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588-.094-.117.34.427.433.539.19.227.33.365.44.438.204.137.587.196 1.15.14.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308 1.477-.933 2.613-1.226 3.422-1.096.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19.691.936 1.058 2.045 1.058 3.293 0 3.757-1.674 5.665-4.642 6.392.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716 1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446.005-.705c.005-.708.007-1.338.007-1.998 0-.697-.183-1.152-.425-1.36-.661-.57-.326-1.655.54-1.752 2.967-.333 4.337-1.482 4.337-4.66 0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66.865.097 1.201 1.177.544 1.748-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a></div><div class="flex flex-col sm:flex-row sm:justify-center gap-4 mt-6"><a href="/contact"><button class="w-full cursor-pointer bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 inline-flex py-3 px-5 rounded-lg items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block text-gray-600 dark:text-day h-7 w-7 mt-1"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"></path></svg><span class="ml-4 flex items-start flex-col leading-none"><span class="text-xs text-gray-600 dark:text-day mb-1">One Click</span><span class="font-medium">Contact</span></span></button></a><button class="cursor-pointer bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 inline-flex py-3 px-5 rounded-lg items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block text-gray-600 dark:text-day h-7 w-7"><path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 0 0-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"></path></svg><span class="ml-4 flex items-start flex-col leading-none"><span class="text-xs text-gray-600 dark:text-day mb-1">RSS Reader</span><span class="font-medium">Subscribe</span></span></button></div></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="150pt" height="150pt" style="opacity:0.8" class="w-2/5 flex items-center justify-center"><clipPath id="shape"><path id="blob"><animate attributeName="d" dur="10s" repeatCount="indefinite" values="M881,641Q836,782,711,885Q586,988,452,901Q318,814,198,734Q78,654,63,495Q48,336,178,251Q308,166,439,136Q570,106,671,189Q772,272,849,386Q926,500,881,641Z;M907.57494,639.97788Q833.95578,779.95578,707.93366,873.75676Q581.91154,967.55774,447.91154,894.86732Q313.91154,822.1769,211.28746,731.95578Q108.66338,641.73466,125.34888,505.22112Q142.03438,368.7076,226.0393,270.42014Q310.04422,172.13268,441.04422,132.93366Q572.04422,93.73464,671,183.88944Q769.95578,274.04422,875.57494,387.
102212Q981.19408,500,907.57494,639.97788Z;M822.79652,627.81266Q805.19354,755.62532,685.84118,815.27914Q566.48884,874.93296,430.27296,865.0856Q294.05706,855.23822,164.4665,761.9144Q34.87592,668.59058,40.90446,501.67618Q46.93298,334.76178,165.1712,230.11414Q283.40942,125.4665,424.38090,127.46030Q565.35236,129.4541,705.34616,169.59678Q845.33996,209.73944,842.86972,354.86972Q840.39948,500,822.79652,627.81266Z;M881,641Q836,782,711,885Q586,988,452,901Q318,814,198,734Q78,654,63,495Q48,336,178,251Q308,166,439,136Q570,106,671,189Q772,272,849,386Q926,500,881,641Z;"></animate></path></clipPath><rect x="0" y="0" width="100%" height="100%" fill="lightblue" clip-path="url(#shape)"></rect><image x="150" y="150" height="100%" clip-path="url(#shape)" href="/avatar_color.svg" preserveAspectRatio="xMidYMid slice"></image></svg></div><div><a href="/hello-world"><article class="group flex flex-col overflow-hidden relative mb-5 md:mb-8 cursor-pointer rounded-xl p-5 md:h-[140px] bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"><img alt="Hello from Markdown" loading="lazy" decoding="async" data-nimg="fill" class="w-full h-full object-cover object-center absolute inset-0 opacity-0 group-hover:opacity-20 dark:group-hover:opacity-40 group-hover:scale-110 transition-all duration-300 ease-in-out" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fcover.jpg&w=640&q=75 640w, /_next/image?url=%2Fcover.jpg&w=750&q=75 750w, /_next/image?url=%2Fcover.jpg&w=828&q=75 828w, /_next/image?url=%2Fcover.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fcover.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fcover.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fcover.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fcover.jpg&w=3840&q=75 3840w" src="/_next/image?url=%2Fcover.jpg&w=3840&q=75"/><div class="relative mt-0"><header class="flex flex-col justify-between md:flex-row md:items-baseline"><h2 class="text-lg md:text-xl font-medium mb-2 text-black dark:text-gray-100 transition-colors duration-300">Hello from Markdown</h2><span class="font-light shrink-0 text-gray-600 dark:text-gray-400 transition-colors duration-300"></span></header><p class="font-light hidden md:block leading-6 line-clamp-2 text-gray-700 dark:text-gray-300 transition-colors duration-300">A sample post written in Markdown to demonstrate local content support.</p></div></article></a></div></main></div></div><div class="mt-6 shrink-0 m-auto w-full text-gray-600 dark:text-gray-300 transition-all max-w-3xl md:px-8"><footer class="max-w-screen-2xl px-4 md:px-8 mx-auto"><div class="flex flex-col md:flex-row justify-between items-center border-b border-gray-200 dark:border-gray-600 py-1"><ul class="flex flex-wrap justify-center md:justify-start md:gap-1"><a href="/about"><li class=" hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer rounded-lg block py-1 px-2 nav"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"></path></svg><span class="inline-block m-1">About</span></div></li></a><a href="/friends"><li class=" hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer rounded-lg block py-1 px-2 nav"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"></path></svg><span class="inline-block m-1">Friends</span></div></li></a><a href="/books"><li class=" hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer rounded-lg block py-1 px-2 nav"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"></path></svg><span class="inline-block m-1">Books</span></div></li></a><a href="/contact"><li class=" hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer rounded-lg block py-1 px-2 nav"><div class="font-light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="inline-block mb-1 h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"></path></svg><span class="inline-block m-1">Contact</span></div></li></a></ul><div class="hidden md:flex"><div class="flex gap-4"><a target="_blank" aria-label="Telegram" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100" href="https://t.me/zuolan"><svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-3.11-8.83l-2.498-.779c-.54-.165-.543-.537.121-.804l9.733-3.76c.565-.23.885.061.702.79l-1.657 7.82c-.116.557-.451.69-.916.433l-2.551-1.888-1.189 1.148c-.122.118-.221.219-.409.244-.187.026-.341-.03-.454-.34l-.87-2.871-.012.008z"></path></svg></a><a target="_blank" aria-label="Twitter" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100" href="https://twitter.com/izuolan"><svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M15.3 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.6.6 0 0 1-.68.583l-1.561-.212c-2.054-.28-4.022-1.226-5.91-2.799-.598 3.31.57 5.603 3.383 7.372l1.747 1.098a.6.6 0 0 1 .034.993L7.793 18.17c.947.059 1.846.017 2.592-.131 4.718-.942 7.855-4.492 7.855-10.348 0-.478-1.012-2.141-2.94-2.141zm-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.
1005 1.316.175 2.669-.645-.335 1.64-.5 2.352-1.214 3.331 0 7.642-4.697 11.358-9.463 12.309-3.268.652-8.02-.419-9.382-1.841.694-.054 3.514-.357 5.144-1.55C5.16 15.7-.329 12.47 3.278 3.786c1.693 1.977 3.41 3.323 5.15 4.037 1.158.475 1.442.465 1.973.538z"></path></svg></a><a target="_blank" aria-label="Github" class="text-gray-400 hover:text-gray-500 active:text-gray-600 transition duration-100" href="https://github.com/izuolan"><svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588-.094-.117.34.427.433.539.19.227.33.365.44.438.204.137.587.196 1.15.14.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308 1.477-.933 2.613-1.226 3.422-1.096.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19.691.936 1.058 2.045 1.058 3.293 0 3.757-1.674 5.665-4.642 6.392.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716 1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446.005-.705c.005-.708.007-1.338.007-1.998 0-.697-.183-1.152-.425-1.36-.661-.57-.326-1.655.54-1.752 2.967-.333 4.337-1.482 4.337-4.66 0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66.865.097 1.201 1.177.544 1.748-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a></div></div></div><div class="text-gray-400 text-xs font-light py-4">© <!-- -->2022 - 2026<!-- --> | <!-- -->å·¦è<p class="md:float-right">This site is licensed under the <a class="underline" href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.</p></div></footer></div></div></div>
1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"page":1,"postsToShow":[{"id":"md-hello-world","title":"Hello from Markdown","slug":"hello-world","type":["Post"],"status":["Published"],"date":1772323200000,"tags":["markdown","demo"],"summary":"A sample post written in Markdown to demonstrate local content support.","page_cover":"/cover.jpg","fullWidth":false,"source":"markdown"}],"showNext":false,"blockMap":null},"__N_SSG":true},"page":"/","query":{},"buildId":"OI2fmCT2UendTIC5aYU5W","isFallback":false,"isExperimentalCompile":false,"gsp":true,"locale":"en","locales":["en","zh"],"defaultLocale":"en","scriptLoader":[]}</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.