Help
RSS
API
Feed
Maltego
Contact
Domain > blog.ucasn.us
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2025-02-06
104.21.84.107
(
ClassC
)
2025-11-30
216.198.79.65
(
ClassC
)
Port 443
HTTP/1.1 200 OKAccept-Ranges: bytesAccess-Control-Allow-Origin: *Age: 0Cache-Control: public, max-age0, must-revalidateContent-Disposition: inlineContent-Length: 65211Content-Type: text/html; charsetutf-8Date: Sun, 30 Nov 2025 04:03:59 GMTEtag: bc11e4f7d9a22a35e527a5296bb96e6cLast-Modified: Sun, 30 Nov 2025 04:03:59 GMTServer: VercelStrict-Transport-Security: max-age63072000X-Vercel-Cache: HITX-Vercel-Id: pdx1::xmrzv-1764475439166-d8e478b0ea5f !DOCTYPE html>html langzh-CN classbg-var(--page-bg) transition text-14px md:text-16px data-overlayscrollbars-initialize data-astro-cid-sckkx6r4 style--bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 255;--page-width: 75rem;> head>title>Jeehren'Blog - 分享Jee的事情。/title>meta charsetUTF-8>meta namedescription contentJeehrenBlog - 分享Jee的事情。>meta nameauthor contentJeehren>meta propertyog:site_name contentJeehrenBlog>meta propertyog:url contenthttps://blog.9854321.xyz/>meta propertyog:title contentJeehrenBlog - 分享Jee的事情。>meta propertyog:description contentJeehrenBlog - 分享Jee的事情。>meta propertyog:type contentwebsite>meta nametwitter:card contentsummary_large_image>meta propertytwitter:url contenthttps://blog.9854321.xyz/>meta nametwitter:title contentJeehrenBlog - 分享Jee的事情。>meta nametwitter:description contentJeehrenBlog - 分享Jee的事情。>meta nameviewport contentwidthdevice-width>meta namegenerator contentAstro v5.13.10>link relicon href/favicon/favicon-light-32.png sizes32x32 media(prefers-color-scheme: light)>link relicon href/favicon/favicon-light-128.png sizes128x128 media(prefers-color-scheme: light)>link relicon href/favicon/favicon-light-180.png sizes180x180 media(prefers-color-scheme: light)>link relicon href/favicon/favicon-light-192.png sizes192x192 media(prefers-color-scheme: light)>link relicon href/favicon/favicon-dark-32.png sizes32x32 media(prefers-color-scheme: dark)>link relicon href/favicon/favicon-dark-128.png sizes128x128 media(prefers-color-scheme: dark)>link relicon href/favicon/favicon-dark-180.png sizes180x180 media(prefers-color-scheme: dark)>link relicon href/favicon/favicon-dark-192.png sizes192x192 media(prefers-color-scheme: dark)>!-- Set the theme before the page is rendered to avoid a flash -->script>(function(){const DEFAULT_THEME auto;const LIGHT_MODE light;const DARK_MODE dark;const AUTO_MODE auto;const BANNER_HEIGHT_EXTEND 30;const PAGE_WIDTH 75;const configHue 255; // Load the theme from local storage const theme localStorage.getItem(theme) || DEFAULT_THEME; switch (theme) { case LIGHT_MODE: document.documentElement.classList.remove(dark); break case DARK_MODE: document.documentElement.classList.add(dark); break case AUTO_MODE: if (window.matchMedia((prefers-color-scheme: dark)).matches) { document.documentElement.classList.add(dark); } else { document.documentElement.classList.remove(dark); } } // Load the hue from local storage const hue localStorage.getItem(hue) || configHue; document.documentElement.style.setProperty(--hue, hue); // calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text let offset Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100)); offset offset - offset % 4; document.documentElement.style.setProperty(--banner-height-extend, `${offset}px`); })();/script>!-- defines global css variables. This will be applied to html> body> and some other elements idk why -->link relalternate typeapplication/rss+xml titleJeehren hrefhttps://blog.9854321.xyz/rss.xml>link relstylesheet href/_astro/Layout.DSulWsr7.css>link relstylesheet href/_astro/Layout.y4KPJ9hc.css>link relstylesheet href/_astro/_page_.DpTWXJf8.css>link relstylesheet href/_astro/_page_.B08li1OA.css>link relstylesheet href/_astro/about.BtniRLn_.css>style>input.svelte-1wah7ro:focus{outline:0}.search-panel.svelte-1wah7ro{max-height:calc(100vh - 100px);overflow-y:auto}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k){-webkit-appearance:none;height:1.5rem;background-image:var(--color-selection-bar);transition:background-image .15s ease-in-out}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-webkit-slider-thumb{-webkit-appearance:none;height:1rem;width:.5rem;border-radius:.125rem;background:#ffffffb3;box-shadow:none}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-webkit-slider-thumb:hover{background:#fffc}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-webkit-slider-thumb:active{background:#fff9}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-moz-range-thumb{-webkit-appearance:none;height:1rem;width:.5rem;border-radius:.125rem;border-width:0;background:#ffffffb3;box-shadow:none}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-moz-range-thumb:hover{background:#fffc}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-moz-range-thumb:active{background:#fff9}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-ms-thumb{-webkit-appearance:none;height:1rem;width:.5rem;border-radius:.125rem;background:#ffffffb3;box-shadow:none}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-ms-thumb:hover{background:#fffc}#display-setting.svelte-d7tq3k inputtyperange:where(.svelte-d7tq3k)::-ms-thumb:active{background:#fff9}/style>script typemodule src/_astro/page.Z8IJTFqj.js>/script>/head> body class min-h-screen transition lg:is-home data-overlayscrollbars-initialize data-astro-cid-sckkx6r4 style--bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 255;--page-width: 75rem;> div idconfig-carrier data-hue255>/div> div idtop-row classz-50 pointer-events-none relative transition-all duration-700 max-w-var(--page-width) px-0 md:px-4 mx-auto> div idnavbar-wrapper classpointer-events-auto sticky top-0 transition-all> div idnavbar classz-50 onload-animation> div classabsolute h-8 left-0 right-0 -top-8 bg-var(--card-bg) transition>/div> !-- used for onload animation --> div classcard-base !overflow-visible max-w-var(--page-width) h-4.5rem !rounded-t-none mx-auto flex items-center justify-between px-4> a href/ classbtn-plain scale-animation rounded-lg h-3.25rem px-5 font-bold active:scale-95> div classflex flex-row text-var(--primary) items-center text-md> svg width1em height1em classtext-1.75rem mb-1 mr-2 data-iconmaterial-symbols:home-outline-rounded> symbol idai:material-symbols:home-outline-rounded viewBox0 0 24 24>path fillcurrentColor dM6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75/>/symbol>use href#ai:material-symbols:home-outline-rounded>/use> /svg> Jeehren'Blog /div> /a> div classhidden md:flex> a aria-label主页 href/ classbtn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95> div classflex items-center> 主页 /div> /a>a aria-label归档 href/archive/ classbtn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95> div classflex items-center> 归档 /div> /a>a aria-label关于 href/about/ classbtn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95> div classflex items-center> 关于 /div> /a> /div> div classflex> !--SearchPanel client:load>--> style>astro-island,astro-slot,astro-static-slot{display:contents}/style>script>(()>{var easync t>{await(await t())()};(self.Astro||(self.Astro{})).onlye;window.dispatchEvent(new Event(astro:only));})();/script>script>(()>{var AObject.defineProperty;var g(i,o,a)>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):ioa;var d(i,o,a)>g(i,typeof o!symbol?o+:o,a);{let i{0:t>m(t),1:t>a(t),2:t>new RegExp(t),3:t>new Date(t),4:t>new Map(a(t)),5:t>new Set(a(t)),6:t>BigInt(t),7:t>new URL(t),8:t>new Uint8Array(t),9:t>new Uint16Array(t),10:t>new Uint32Array(t),11:t>1/0*t},ot>{letl,et;return l in i?il(e):void 0},at>t.map(o),mt>typeof t!object||tnull?t:Object.fromEntries(Object.entries(t).map((l,e)>l,o(e)));class y extends HTMLElement{constructor(){super(...arguments);d(this,Component);d(this,hydrator);d(this,hydrate,async()>{var b;if(!this.hydrator||!this.isConnected)return;let e(bthis.parentElement)null?void 0:b.closest(astro-islandssr);if(e){e.addEventListener(astro:hydrate,this.hydrate,{once:!0});return}let cthis.querySelectorAll(astro-slot),n{},hthis.querySelectorAll(templatedata-astro-template);for(let r of h){let sr.closest(this.tagName);s!null&&s.isSameNode(this)&&(nr.getAttribute(data-astro-template)||defaultr.innerHTML,r.remove())}for(let r of c){let sr.closest(this.tagName);s!null&&s.isSameNode(this)&&(nr.getAttribute(name)||defaultr.innerHTML)}let p;try{pthis.hasAttribute(props)?m(JSON.parse(this.getAttribute(props))):{}}catch(r){let sthis.getAttribute(component-url)||unknown>,vthis.getAttribute(component-export);throw v&&(s+` (export ${v})`),console.error(`hydrate Error parsing props for component ${s}`,this.getAttribute(props),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute(client)}),this.removeAttribute(ssr),this.dispatchEvent(new CustomEvent(astro:hydrate))});d(this,unmount,()>{this.isConnected||this.dispatchEvent(new CustomEvent(astro:unmount))})}disconnectedCallback(){document.removeEventListener(astro:after-swap,this.unmount),document.addEventListener(astro:after-swap,this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute(await-children)||document.readyStateinteractive||document.readyStatecomplete)this.childrenConnectedCallback();else{let e()>{document.removeEventListener(DOMContentLoaded,e),c.disconnect(),this.childrenConnectedCallback()},cnew MutationObserver(()>{var n;((nthis.lastChild)null?void 0:n.nodeType)Node.COMMENT_NODE&&this.lastChild.nodeValueastro:end&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener(DOMContentLoaded,e)}}async childrenConnectedCallback(){let ethis.getAttribute(before-hydration-url);e&&await import(e),this.start()}async start(){let eJSON.parse(this.getAttribute(opts)),cthis.getAttribute(client);if(Astrocvoid 0){window.addEventListener(`astro:${c}`,()>this.start(),{once:!0});return}try{await Astroc(async()>{let nthis.getAttribute(renderer-url),h,{default:p}await Promise.all(import(this.getAttribute(component-url)),n?import(n):()>()>{}),uthis.getAttribute(component-export)||default;if(!u.includes(.))this.Componenthu;else{this.Componenth;for(let f of u.split(.))this.Componentthis.Componentf}return this.hydratorp,this.hydrate},e,this)}catch(n){console.error(`astro-island Error hydrating ${this.getAttribute(component-url)}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,observedAttributes,props),customElements.get(astro-island)||customElements.define(astro-island,y)}})();/script>astro-island uid2tWlKS component-url/_astro/Search.nm3Aht0w.js component-exportdefault renderer-url/_astro/client.svelte.BtEbdPyR.js props{} ssr clientonly opts{"name":"Search","value":"svelte"}>/astro-island> button aria-labelDisplay Settings classbtn-plain scale-animation rounded-lg h-11 w-11 active:scale-90 iddisplay-settings-switch> svg width1em height1em classtext-1.25rem data-iconmaterial-symbols:palette-outline> symbol idai:material-symbols:palette-outline viewBox0 0 24 24>path fillcurrentColor dM12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-5.5-9q.65 0 1.075-.425T8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13m3-4q.65 0 1.075-.425T11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9m5 0q.65 0 1.075-.425T16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9m3 4q.65 0 1.075-.425T19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13M12 20q.225 0 .363-.125t.137-.325q0-.35-.375-.825T11.75 17.3q0-1.05.725-1.675T14.25 15H16q1.65 0 2.825-.962T20 11.05q0-3.025-2.312-5.038T12.2 4Q8.8 4 6.4 6.325T4 12q0 3.325 2.338 5.663T12 20/>/symbol>use href#ai:material-symbols:palette-outline>/use> /svg> /button> astro-island uid13RqIl component-url/_astro/LightDarkSwitch.Css4FTsg.js component-exportdefault renderer-url/_astro/client.svelte.BtEbdPyR.js props{} ssr clientonly opts{"name":"LightDarkSwitch","value":"svelte"}>/astro-island> button aria-labelMenu nameNav Menu classbtn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden idnav-menu-switch> svg width1em height1em classtext-1.25rem data-iconmaterial-symbols:menu-rounded> symbol idai:material-symbols:menu-rounded viewBox0 0 24 24>path fillcurrentColor dM4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z/>/symbol>use href#ai:material-symbols:menu-rounded>/use> /svg> /button> /div> div idnav-menu-panel classfloat-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2> a href/ classgroup flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 hover:bg-var(--btn-plain-bg-hover) active:bg-var(--btn-plain-bg-active) transition > div classtransition text-black/75 dark:text-white/75 font-bold group-hover:text-var(--primary) group-active:text-var(--primary)> 主页 /div> svg width1em height1em classtransition text-1.25rem text-var(--primary) data-iconmaterial-symbols:chevron-right-rounded> symbol idai:material-symbols:chevron-right-rounded viewBox0 0 24 24>path fillcurrentColor dM12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z/>/symbol>use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a>a href/archive/ classgroup flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 hover:bg-var(--btn-plain-bg-hover) active:bg-var(--btn-plain-bg-active) transition > div classtransition text-black/75 dark:text-white/75 font-bold group-hover:text-var(--primary) group-active:text-var(--primary)> 归档 /div> svg width1em height1em viewBox0 0 24 24 classtransition text-1.25rem text-var(--primary) data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a>a href/about/ classgroup flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 hover:bg-var(--btn-plain-bg-hover) active:bg-var(--btn-plain-bg-active) transition > div classtransition text-black/75 dark:text-white/75 font-bold group-hover:text-var(--primary) group-active:text-var(--primary)> 关于 /div> svg width1em height1em viewBox0 0 24 24 classtransition text-1.25rem text-var(--primary) data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> /div> astro-island uidZ1AzHif component-url/_astro/DisplaySettings.CEoHIn-R.js component-exportdefault renderer-url/_astro/client.svelte.BtEbdPyR.js props{} ssr clientonly opts{"name":"DisplaySettings","value":"svelte"}>/astro-island> /div> /div> script typemodule>function c(){localStorage.themedark?(document.documentElement.classList.remove(dark),localStorage.themelight):(document.documentElement.classList.add(dark),localStorage.themedark)}function o(){let tdocument.getElementById(scheme-switch);t&&(t.onclickfunction(){c()});let ndocument.getElementById(display-settings-switch);n&&(n.onclickfunction(){let edocument.getElementById(display-setting);e&&e.classList.toggle(float-panel-closed)});let ldocument.getElementById(nav-menu-switch);l&&(l.onclickfunction(){let edocument.getElementById(nav-menu-panel);e&&e.classList.toggle(float-panel-closed)})}o();/script> script>(function(){const scriptUrl /pagefind/pagefind.js;async function loadPagefind() { try { const response await fetch(scriptUrl, { method: HEAD }); if (!response.ok) { throw new Error(`Pagefind script not found: ${response.status}`); } const pagefind await import(scriptUrl); await pagefind.options({ excerptLength: 20 }); window.pagefind pagefind; document.dispatchEvent(new CustomEvent(pagefindready)); console.log(Pagefind loaded and initialized successfully, event dispatched.); } catch (error) { console.error(Failed to load Pagefind:, error); window.pagefind { search: () > Promise.resolve({ results: }), options: () > Promise.resolve(), }; document.dispatchEvent(new CustomEvent(pagefindloaderror)); console.log(Pagefind load error, event dispatched.); }}if (document.readyState loading) { document.addEventListener(DOMContentLoaded, loadPagefind);} else { loadPagefind();}})();/script> /div> /div> div classabsolute w-full z-30 pointer-events-none styletop: 5.5rem> !-- The pointer-events-none here prevent blocking the click event of the TOC --> div classrelative max-w-var(--page-width) mx-auto pointer-events-auto> div idmain-grid classtransition duration-700 w-full left-0 right-0 grid grid-cols-17.5rem_auto grid-rows-auto_1fr_auto lg:grid-rows-auto mx-auto gap-4 px-0 md:px-4> !-- Banner image credit --> div idsidebar classmb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-17.5rem onload-animation w-full> div classflex flex-col w-full gap-4 mb-4> div classcard-base p-3> a aria-labelGo to About Page href/about/ classgroup block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3 max-w-12rem lg:max-w-none overflow-hidden rounded-xl active:scale-95> div classabsolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center> svg width1.13em height1em classtransition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl data-iconfa6-regular:address-card> symbol idai:fa6-regular:address-card viewBox0 0 576 512>path fillcurrentColor dM512 80c8.8 0 16 7.2 16 16v320c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16zM64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm144 224a64 64 0 1 0 0-128a64 64 0 1 0 0 128m-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80zm200-144c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24z/>/symbol>use href#ai:fa6-regular:address-card>/use> /svg> /div> div classmx-auto lg:w-full h-full lg:mt-0 overflow-hidden relative> div classtransition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none>/div> img src/_astro/demo-avatar.DqzsG9hB_14rsLM.webp altProfile Image of the Author styleobject-position: center loadinglazy decodingasync fetchpriorityauto width1080 height1080 classw-full h-full object-cover> /div> /a> div classpx-2> div classfont-bold text-xl text-center mb-1 dark:text-neutral-50 transition>Jeehren/div> div classh-1 w-5 bg-var(--primary) mx-auto rounded-full mb-2 transition>/div> div classtext-center text-neutral-400 mb-2.5 transition>25级电气工程及其自动化的苦逼大学生。/div> div classflex flex-wrap gap-2 justify-center mb-1> a relme aria-label邮箱 hrefmailto:accoreo@outlook.com target_blank classbtn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95> svg width1em height1em classtext-1.5rem data-iconfa6-solid:envelope> symbol idai:fa6-solid:envelope viewBox0 0 512 512>path fillcurrentColor dM48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4l217.6 163.2c11.4 8.5 27 8.5 38.4 0l217.6-163.2c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48zM0 176v208c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V176L294.4 339.2a63.9 63.9 0 0 1-76.8 0z/>/symbol>use href#ai:fa6-solid:envelope>/use> /svg> 邮箱 /a> /div> /div> /div> /div> div idsidebar-sticky classtransition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4> widget-layout data-idcategories data-is-collapsedfalse classpb-4 card-base onload-animation styleanimation-delay: 150ms; --collapsedHeight: 7.5rem; data-astro-cid-ucso7hvetrue> div classfont-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 before:w-1 before:h-4 before:rounded-md before:bg-var(--primary) before:absolute before:left--16px before:top-5.5px data-astro-cid-ucso7hve style--collapsedHeight: 7.5rem;>分类/div> div idcategories classcollapse-wrapper px-4 overflow-hidden data-astro-cid-ucso7hve style--collapsedHeight: 7.5rem;> a href/archive/?categoryExamples aria-labelView all posts in the Examples category> button class w-full h-10 rounded-lg bg-none hover:bg-var(--btn-plain-bg-hover) active:bg-var(--btn-plain-bg-active) transition-all pl-2 hover:pl-3 text-neutral-700 hover:text-var(--primary) dark:text-neutral-300 dark:hover:text-var(--primary) > div classflex items-center justify-between relative mr-2> div classoverflow-hidden text-left whitespace-nowrap overflow-ellipsis > Examples /div> div classtransition px-2 h-7 ml-4 min-w-2rem rounded-lg text-sm font-bold text-var(--btn-content) dark:text-var(--deep-text) bg-var(--btn-regular-bg) dark:bg-var(--primary) flex items-center justify-center> 4 /div> /div> /button> /a>a href/archive/?categoryGuides aria-labelView all posts in the Guides category> button class w-full h-10 rounded-lg bg-none hover:bg-var(--btn-plain-bg-hover) active:bg-var(--btn-plain-bg-active) transition-all pl-2 hover:pl-3 text-neutral-700 hover:text-var(--primary) dark:text-neutral-300 dark:hover:text-var(--primary) > div classflex items-center justify-between relative mr-2> div classoverflow-hidden text-left whitespace-nowrap overflow-ellipsis > Guides /div> div classtransition px-2 h-7 ml-4 min-w-2rem rounded-lg text-sm font-bold text-var(--btn-content) dark:text-var(--deep-text) bg-var(--btn-regular-bg) dark:bg-var(--primary) flex items-center justify-center> 1 /div> /div> /button> /a> /div> /widget-layout> script typemodule>class d extends HTMLElement{constructor(){if(super(),this.dataset.isCollapsed!true)return;const ethis.dataset.id,tthis.querySelector(.expand-btn),sthis.querySelector(`#${e}`);t.addEventListener(click,()>{s.classList.remove(collapsed),t.classList.add(hidden)})}}customElements.get(widget-layout)||customElements.define(widget-layout,d);/script> widget-layout data-idtags data-is-collapsedfalse classpb-4 card-base onload-animation styleanimation-delay: 200ms; --collapsedHeight: 7.5rem; data-astro-cid-ucso7hvetrue> div classfont-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 before:w-1 before:h-4 before:rounded-md before:bg-var(--primary) before:absolute before:left--16px before:top-5.5px data-astro-cid-ucso7hve style--collapsedHeight: 7.5rem;>标签/div> div idtags classcollapse-wrapper px-4 overflow-hidden data-astro-cid-ucso7hve style--collapsedHeight: 7.5rem;> div classflex gap-2 flex-wrap> a href/archive/?tagBlogging aria-labelView all posts with the Blogging tag classbtn-regular h-8 text-sm px-3 rounded-lg> Blogging /a>a href/archive/?tagCustomization aria-labelView all posts with the Customization tag classbtn-regular h-8 text-sm px-3 rounded-lg> Customization /a>a href/archive/?tagDemo aria-labelView all posts with the Demo tag classbtn-regular h-8 text-sm px-3 rounded-lg> Demo /a>a href/archive/?tagExample aria-labelView all posts with the Example tag classbtn-regular h-8 text-sm px-3 rounded-lg> Example /a>a href/archive/?tagFuwari aria-labelView all posts with the Fuwari tag classbtn-regular h-8 text-sm px-3 rounded-lg> Fuwari /a>a href/archive/?tagMarkdown aria-labelView all posts with the Markdown tag classbtn-regular h-8 text-sm px-3 rounded-lg> Markdown /a>a href/archive/?tagVideo aria-labelView all posts with the Video tag classbtn-regular h-8 text-sm px-3 rounded-lg> Video /a> /div> /div> /widget-layout> /div> /div> main idswup-container classtransition-swup-fade col-span-2 lg:col-span-1 overflow-hidden> div idcontent-wrapper classonload-animation> !-- the overflow-hidden here prevent long text break the layout--> !-- make id different from windows.swup global property --> div classtransition flex flex-col rounded-var(--radius-large) bg-var(--card-bg) py-1 md:py-0 md:bg-transparent md:gap-4 mb-4> div classcard-base flex flex-col-reverse md:flex-col w-full rounded-var(--radius-large) overflow-hidden relative onload-animation styleanimation-delay: calc(var(--content-delay) + 0ms);; --coverWidth: 28%; data-astro-cid-iyiqi2so> div classpl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-calc(100%_-_52px_-_12px) data-astro-cid-iyiqi2so style--coverWidth: 28%;> a href/posts/markdown-extended/ classtransition group w-full block font-bold mb-3 text-3xl text-90 hover:text-var(--primary) dark:hover:text-var(--primary) active:text-var(--title-active) dark:active:text-var(--title-active) before:w-1 before:h-5 before:rounded-md before:bg-var(--primary) before:absolute before:top-35px before:left-18px before:hidden md:before:block data-astro-cid-iyiqi2so style--coverWidth: 28%;> Markdown Extended Features svg width1em height1em viewBox0 0 24 24 classinline text-2rem text-var(--primary) md:hidden translate-y-0.5 absolute data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> svg width1em height1em viewBox0 0 24 24 classtext-var(--primary) text-2rem transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> !-- metadata --> div classflex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4> !-- publish date --> div classflex items-center> div classmeta-icon> svg width1em height1em classtext-xl data-iconmaterial-symbols:calendar-today-outline-rounded> symbol idai:material-symbols:calendar-today-outline-rounded viewBox0 0 24 24>path fillcurrentColor dM5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z/>/symbol>use href#ai:material-symbols:calendar-today-outline-rounded>/use> /svg> /div> span classtext-50 text-sm font-medium>2024-05-01/span> /div> !-- update date --> !-- categories --> div classflex items-center> div classmeta-icon> svg width1em height1em classtext-xl data-iconmaterial-symbols:book-2-outline-rounded> symbol idai:material-symbols:book-2-outline-rounded viewBox0 0 24 24>path fillcurrentColor dM6 15.325q.35-.175.725-.25T7.5 15H8V4h-.5q-.625 0-1.062.438T6 5.5zM10 15h8V4h-8zm-4 .325V4zM7.5 22q-1.45 0-2.475-1.025T4 18.5v-13q0-1.45 1.025-2.475T7.5 2H18q.825 0 1.413.587T20 4v12.525q0 .2-.162.363t-.588.362q-.35.175-.55.5t-.2.75t.2.763t.55.487t.55.413t.2.562v.25q0 .425-.288.725T19 22zm0-2h9.325q-.15-.35-.237-.712T16.5 18.5q0-.4.075-.775t.25-.725H7.5q-.65 0-1.075.438T6 18.5q0 .65.425 1.075T7.5 20/>/symbol>use href#ai:material-symbols:book-2-outline-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> a href/archive/?categoryExamples aria-labelView all posts in the Examples category classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Examples /a> /div> /div> !-- tags --> div classitems-center hidden md:flex> div classmeta-icon> svg width1em height1em classtext-xl data-iconmaterial-symbols:tag-rounded> symbol idai:material-symbols:tag-rounded viewBox0 0 24 24>path fillcurrentColor dm9 16l-.825 3.275q-.075.325-.325.525t-.6.2q-.475 0-.775-.375T6.3 18.8L7 16H4.275q-.5 0-.8-.387T3.3 14.75q.075-.35.35-.55t.625-.2H7.5l1-4H5.775q-.5 0-.8-.387T4.8 8.75q.075-.35.35-.55t.625-.2H9l.825-3.275Q9.9 4.4 10.15 4.2t.6-.2q.475 0 .775.375t.175.825L11 8h4l.825-3.275q.075-.325.325-.525t.6-.2q.475 0 .775.375t.175.825L17 8h2.725q.5 0 .8.387t.175.863q-.075.35-.35.55t-.625.2H16.5l-1 4h2.725q.5 0 .8.388t.175.862q-.075.35-.35.55t-.625.2H15l-.825 3.275q-.075.325-.325.525t-.6.2q-.475 0-.775-.375T12.3 18.8L13 16zm.5-2h4l1-4h-4z/>/symbol>use href#ai:material-symbols:tag-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> div classhidden mx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagDemo aria-labelView all posts with the Demo tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Demo /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagExample aria-labelView all posts with the Example tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Example /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagMarkdown aria-labelView all posts with the Markdown tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Markdown /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagFuwari aria-labelView all posts with the Fuwari tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Fuwari /a> /div> /div> /div> !-- description --> div classtransition text-75 mb-3.5 pr-4 data-astro-cid-iyiqi2so style--coverWidth: 28%;> Read more about Markdown features in Fuwari /div> !-- word count and read time --> div classtext-sm text-black/30 dark:text-white/30 flex gap-4 transition data-astro-cid-iyiqi2so style--coverWidth: 28%;> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 176 字 /div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;>|/div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 1 分钟 /div> /div> /div> a href/posts/markdown-extended/ aria-labelMarkdown Extended Features class!hidden md:!flex btn-regular w-3.25rem absolute right-3 top-3 bottom-3 rounded-xl bg-var(--enter-btn-bg) hover:bg-var(--enter-btn-bg-hover) active:bg-var(--enter-btn-bg-active) active:scale-95 data-astro-cid-iyiqi2so style--coverWidth: 28%;> svg width1em height1em viewBox0 0 24 24 classtransition text-var(--primary) text-4xl mx-auto data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> /div> div classtransition border-t-1px border-dashed mx-6 border-black/10 dark:border-white/0.15 last:border-t-0 md:hidden data-astro-cid-iyiqi2so style--coverWidth: 28%;>/div> div classcard-base flex flex-col-reverse md:flex-col w-full rounded-var(--radius-large) overflow-hidden relative onload-animation styleanimation-delay: calc(var(--content-delay) + 50ms);; --coverWidth: 28%; data-astro-cid-iyiqi2so> div classpl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-calc(100%_-_52px_-_12px) data-astro-cid-iyiqi2so style--coverWidth: 28%;> a href/posts/expressive-code/ classtransition group w-full block font-bold mb-3 text-3xl text-90 hover:text-var(--primary) dark:hover:text-var(--primary) active:text-var(--title-active) dark:active:text-var(--title-active) before:w-1 before:h-5 before:rounded-md before:bg-var(--primary) before:absolute before:top-35px before:left-18px before:hidden md:before:block data-astro-cid-iyiqi2so style--coverWidth: 28%;> Expressive Code Example svg width1em height1em viewBox0 0 24 24 classinline text-2rem text-var(--primary) md:hidden translate-y-0.5 absolute data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> svg width1em height1em viewBox0 0 24 24 classtext-var(--primary) text-2rem transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> !-- metadata --> div classflex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4> !-- publish date --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:calendar-today-outline-rounded> use href#ai:material-symbols:calendar-today-outline-rounded>/use> /svg> /div> span classtext-50 text-sm font-medium>2024-04-10/span> /div> !-- update date --> !-- categories --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:book-2-outline-rounded> use href#ai:material-symbols:book-2-outline-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> a href/archive/?categoryExamples aria-labelView all posts in the Examples category classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Examples /a> /div> /div> !-- tags --> div classitems-center hidden md:flex> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:tag-rounded> use href#ai:material-symbols:tag-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> div classhidden mx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagMarkdown aria-labelView all posts with the Markdown tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Markdown /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagBlogging aria-labelView all posts with the Blogging tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Blogging /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagDemo aria-labelView all posts with the Demo tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Demo /a> /div> /div> /div> !-- description --> div classtransition text-75 mb-3.5 pr-4 data-astro-cid-iyiqi2so style--coverWidth: 28%;> How code blocks look in Markdown using Expressive Code. /div> !-- word count and read time --> div classtext-sm text-black/30 dark:text-white/30 flex gap-4 transition data-astro-cid-iyiqi2so style--coverWidth: 28%;> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 737 字 /div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;>|/div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 4 分钟 /div> /div> /div> a href/posts/expressive-code/ aria-labelExpressive Code Example class!hidden md:!flex btn-regular w-3.25rem absolute right-3 top-3 bottom-3 rounded-xl bg-var(--enter-btn-bg) hover:bg-var(--enter-btn-bg-hover) active:bg-var(--enter-btn-bg-active) active:scale-95 data-astro-cid-iyiqi2so style--coverWidth: 28%;> svg width1em height1em viewBox0 0 24 24 classtransition text-var(--primary) text-4xl mx-auto data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> /div> div classtransition border-t-1px border-dashed mx-6 border-black/10 dark:border-white/0.15 last:border-t-0 md:hidden data-astro-cid-iyiqi2so style--coverWidth: 28%;>/div> div classcard-base flex flex-col-reverse md:flex-col w-full rounded-var(--radius-large) overflow-hidden relative onload-animation styleanimation-delay: calc(var(--content-delay) + 100ms);; --coverWidth: 28%; data-astro-cid-iyiqi2so> div classpl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-calc(100%_-_var(--coverWidth)_-_12px) data-astro-cid-iyiqi2so style--coverWidth: 28%;> a href/posts/guide/ classtransition group w-full block font-bold mb-3 text-3xl text-90 hover:text-var(--primary) dark:hover:text-var(--primary) active:text-var(--title-active) dark:active:text-var(--title-active) before:w-1 before:h-5 before:rounded-md before:bg-var(--primary) before:absolute before:top-35px before:left-18px before:hidden md:before:block data-astro-cid-iyiqi2so style--coverWidth: 28%;> Simple Guides for Fuwari svg width1em height1em viewBox0 0 24 24 classinline text-2rem text-var(--primary) md:hidden translate-y-0.5 absolute data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> svg width1em height1em viewBox0 0 24 24 classtext-var(--primary) text-2rem transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> !-- metadata --> div classflex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4> !-- publish date --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:calendar-today-outline-rounded> use href#ai:material-symbols:calendar-today-outline-rounded>/use> /svg> /div> span classtext-50 text-sm font-medium>2024-04-01/span> /div> !-- update date --> !-- categories --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:book-2-outline-rounded> use href#ai:material-symbols:book-2-outline-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> a href/archive/?categoryGuides aria-labelView all posts in the Guides category classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Guides /a> /div> /div> !-- tags --> div classitems-center hidden md:flex> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:tag-rounded> use href#ai:material-symbols:tag-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> div classhidden mx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagFuwari aria-labelView all posts with the Fuwari tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Fuwari /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagBlogging aria-labelView all posts with the Blogging tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Blogging /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagCustomization aria-labelView all posts with the Customization tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Customization /a> /div> /div> /div> !-- description --> div classtransition text-75 mb-3.5 pr-4 data-astro-cid-iyiqi2so style--coverWidth: 28%;> How to use this blog template. /div> !-- word count and read time --> div classtext-sm text-black/30 dark:text-white/30 flex gap-4 transition data-astro-cid-iyiqi2so style--coverWidth: 28%;> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 160 字 /div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;>|/div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 1 分钟 /div> /div> /div> a href/posts/guide/ aria-labelSimple Guides for Fuwari classgroup max-h-20vh md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0 md:w-var(--coverWidth) relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95 data-astro-cid-iyiqi2so style--coverWidth: 28%;> div classabsolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition data-astro-cid-iyiqi2so style--coverWidth: 28%;>/div> div classabsolute pointer-events-none z-20 w-full h-full flex items-center justify-center data-astro-cid-iyiqi2so style--coverWidth: 28%;> svg width1em height1em viewBox0 0 24 24 classtransition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /div> div classw-full h-full overflow-hidden relative> div classtransition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none>/div> img src/_astro/cover.CgGywNHJ_9MQNr.webp altCover Image of the Post styleobject-position: center loadinglazy decodingasync fetchpriorityauto width2048 height1024 classw-full h-full object-cover> /div> /a> /div> div classtransition border-t-1px border-dashed mx-6 border-black/10 dark:border-white/0.15 last:border-t-0 md:hidden data-astro-cid-iyiqi2so style--coverWidth: 28%;>/div> div classcard-base flex flex-col-reverse md:flex-col w-full rounded-var(--radius-large) overflow-hidden relative onload-animation styleanimation-delay: calc(var(--content-delay) + 150ms);; --coverWidth: 28%; data-astro-cid-iyiqi2so> div classpl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-calc(100%_-_52px_-_12px) data-astro-cid-iyiqi2so style--coverWidth: 28%;> a href/posts/markdown/ classtransition group w-full block font-bold mb-3 text-3xl text-90 hover:text-var(--primary) dark:hover:text-var(--primary) active:text-var(--title-active) dark:active:text-var(--title-active) before:w-1 before:h-5 before:rounded-md before:bg-var(--primary) before:absolute before:top-35px before:left-18px before:hidden md:before:block data-astro-cid-iyiqi2so style--coverWidth: 28%;> Markdown Example svg width1em height1em viewBox0 0 24 24 classinline text-2rem text-var(--primary) md:hidden translate-y-0.5 absolute data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> svg width1em height1em viewBox0 0 24 24 classtext-var(--primary) text-2rem transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> !-- metadata --> div classflex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4> !-- publish date --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:calendar-today-outline-rounded> use href#ai:material-symbols:calendar-today-outline-rounded>/use> /svg> /div> span classtext-50 text-sm font-medium>2023-10-01/span> /div> !-- update date --> !-- categories --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:book-2-outline-rounded> use href#ai:material-symbols:book-2-outline-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> a href/archive/?categoryExamples aria-labelView all posts in the Examples category classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Examples /a> /div> /div> !-- tags --> div classitems-center hidden md:flex> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:tag-rounded> use href#ai:material-symbols:tag-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> div classhidden mx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagMarkdown aria-labelView all posts with the Markdown tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Markdown /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagBlogging aria-labelView all posts with the Blogging tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Blogging /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagDemo aria-labelView all posts with the Demo tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Demo /a> /div> /div> /div> !-- description --> div classtransition text-75 mb-3.5 pr-4 data-astro-cid-iyiqi2so style--coverWidth: 28%;> A simple example of a Markdown blog post. /div> !-- word count and read time --> div classtext-sm text-black/30 dark:text-white/30 flex gap-4 transition data-astro-cid-iyiqi2so style--coverWidth: 28%;> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 444 字 /div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;>|/div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 2 分钟 /div> /div> /div> a href/posts/markdown/ aria-labelMarkdown Example class!hidden md:!flex btn-regular w-3.25rem absolute right-3 top-3 bottom-3 rounded-xl bg-var(--enter-btn-bg) hover:bg-var(--enter-btn-bg-hover) active:bg-var(--enter-btn-bg-active) active:scale-95 data-astro-cid-iyiqi2so style--coverWidth: 28%;> svg width1em height1em viewBox0 0 24 24 classtransition text-var(--primary) text-4xl mx-auto data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> /div> div classtransition border-t-1px border-dashed mx-6 border-black/10 dark:border-white/0.15 last:border-t-0 md:hidden data-astro-cid-iyiqi2so style--coverWidth: 28%;>/div> div classcard-base flex flex-col-reverse md:flex-col w-full rounded-var(--radius-large) overflow-hidden relative onload-animation styleanimation-delay: calc(var(--content-delay) + 200ms);; --coverWidth: 28%; data-astro-cid-iyiqi2so> div classpl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-calc(100%_-_52px_-_12px) data-astro-cid-iyiqi2so style--coverWidth: 28%;> a href/posts/video/ classtransition group w-full block font-bold mb-3 text-3xl text-90 hover:text-var(--primary) dark:hover:text-var(--primary) active:text-var(--title-active) dark:active:text-var(--title-active) before:w-1 before:h-5 before:rounded-md before:bg-var(--primary) before:absolute before:top-35px before:left-18px before:hidden md:before:block data-astro-cid-iyiqi2so style--coverWidth: 28%;> Include Video in the Posts svg width1em height1em viewBox0 0 24 24 classinline text-2rem text-var(--primary) md:hidden translate-y-0.5 absolute data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> svg width1em height1em viewBox0 0 24 24 classtext-var(--primary) text-2rem transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> !-- metadata --> div classflex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4> !-- publish date --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:calendar-today-outline-rounded> use href#ai:material-symbols:calendar-today-outline-rounded>/use> /svg> /div> span classtext-50 text-sm font-medium>2023-08-01/span> /div> !-- update date --> !-- categories --> div classflex items-center> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:book-2-outline-rounded> use href#ai:material-symbols:book-2-outline-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> a href/archive/?categoryExamples aria-labelView all posts in the Examples category classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Examples /a> /div> /div> !-- tags --> div classitems-center hidden md:flex> div classmeta-icon> svg width1em height1em viewBox0 0 24 24 classtext-xl data-iconmaterial-symbols:tag-rounded> use href#ai:material-symbols:tag-rounded>/use> /svg> /div> div classflex flex-row flex-nowrap items-center> div classhidden mx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagExample aria-labelView all posts with the Example tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Example /a>div classmx-1.5 text-var(--meta-divider) text-sm>//div> a href/archive/?tagVideo aria-labelView all posts with the Video tag classlink-lg transition text-50 text-sm font-medium hover:text-var(--primary) dark:hover:text-var(--primary) whitespace-nowrap> Video /a> /div> /div> /div> !-- description --> div classtransition text-75 mb-3.5 pr-4 data-astro-cid-iyiqi2so style--coverWidth: 28%;> This post demonstrates how to include embedded video in a blog post. /div> !-- word count and read time --> div classtext-sm text-black/30 dark:text-white/30 flex gap-4 transition data-astro-cid-iyiqi2so style--coverWidth: 28%;> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 61 字 /div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;>|/div> div data-astro-cid-iyiqi2so style--coverWidth: 28%;> 1 分钟 /div> /div> /div> a href/posts/video/ aria-labelInclude Video in the Posts class!hidden md:!flex btn-regular w-3.25rem absolute right-3 top-3 bottom-3 rounded-xl bg-var(--enter-btn-bg) hover:bg-var(--enter-btn-bg-hover) active:bg-var(--enter-btn-bg-active) active:scale-95 data-astro-cid-iyiqi2so style--coverWidth: 28%;> svg width1em height1em viewBox0 0 24 24 classtransition text-var(--primary) text-4xl mx-auto data-astro-cid-iyiqi2sotrue data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> /div> div classtransition border-t-1px border-dashed mx-6 border-black/10 dark:border-white/0.15 last:border-t-0 md:hidden data-astro-cid-iyiqi2so style--coverWidth: 28%;>/div> /div> div classmx-auto onload-animation flex flex-row gap-3 justify-center styleanimation-delay: calc(var(--content-delay) + 250ms)> a href classbtn-card overflow-hidden rounded-lg text-var(--primary) w-11 h-11 disabled> svg width1em height1em classtext-1.75rem data-iconmaterial-symbols:chevron-left-rounded> symbol idai:material-symbols:chevron-left-rounded viewBox0 0 24 24>path fillcurrentColor dm10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z/>/symbol>use href#ai:material-symbols:chevron-left-rounded>/use> /svg> /a> div classbg-var(--card-bg) flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold> div classh-11 w-11 rounded-lg bg-var(--primary) flex items-center justify-center font-bold text-white dark:text-black/70> 1 /div> /div> a href classbtn-card overflow-hidden rounded-lg text-var(--primary) w-11 h-11 disabled> svg width1em height1em viewBox0 0 24 24 classtext-1.75rem data-iconmaterial-symbols:chevron-right-rounded> use href#ai:material-symbols:chevron-right-rounded>/use> /svg> /a> /div> div classfooter col-span-2 onload-animation hidden lg:block> !--div classborder-t border-var(--primary) mx-16 border-dashed py-8 max-w-var(--page-width) flex flex-col items-center justify-center px-6>-->div classtransition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32>/div> !--div classtransition bg-oklch(92%_0.01_var(--hue)) dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6>--> div classtransition border-dashed border-oklch(85%_0.01_var(--hue)) dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6> div classtransition text-50 text-sm text-center>© span idcopyright-year>2025/span> Jeehren. All Rights Reserved. / Powered bya classtransition link text-var(--primary) font-medium target_blank hrefhttps://cloudflare.com>cloudflare/a> &a classtransition link text-var(--primary) font-medium target_blank hrefhttps://www.hbkjxy.edu.cn/>阿里云/a> /div> /div> /div> /div> /main> div classfooter col-span-2 onload-animation block lg:hidden> !--div classborder-t border-var(--primary) mx-16 border-dashed py-8 max-w-var(--page-width) flex flex-col items-center justify-center px-6>-->div classtransition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32>/div> !--div classtransition bg-oklch(92%_0.01_var(--hue)) dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6>--> div classtransition border-dashed border-oklch(85%_0.01_var(--hue)) dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6> div classtransition text-50 text-sm text-center>© span idcopyright-year>2025/span> Jeehren. All Rights Reserved. / Powered bya classtransition link text-var(--primary) font-medium target_blank hrefhttps://cloudflare.com>cloudflare/a> &a classtransition link text-var(--primary) font-medium target_blank hrefhttps://www.hbkjxy.edu.cn/>阿里云/a> /div> /div> /div> /div> !-- There cant be a filter on parent element, or it will break `fixed` -->div classback-to-top-wrapper hidden lg:block data-astro-cid-eymb5ayk> div idback-to-top-btn classback-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition onclickbackToTop() data-astro-cid-eymb5ayk> button aria-labelBack to Top classbtn-card h-3.75rem w-3.75rem data-astro-cid-eymb5ayk> svg width1em height1em classmx-auto data-astro-cid-eymb5ayktrue data-iconmaterial-symbols:keyboard-arrow-up-rounded> symbol idai:material-symbols:keyboard-arrow-up-rounded viewBox0 0 24 24>path fillcurrentColor dm12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z/>/symbol>use href#ai:material-symbols:keyboard-arrow-up-rounded>/use> /svg> /button> /div> /div> script>function backToTop() { window.scroll({ top: 0, behavior: smooth });}/script> /div> /div> div classabsolute w-full z-0 hidden 2xl:block> div classrelative max-w-var(--page-width) mx-auto> !-- TOC component --> div idtoc-wrapper classhidden lg:block transition absolute top-0 -right-var(--toc-width) w-var(--toc-width) items-center> div idtoc-inner-wrapper classfixed top-14 w-var(--toc-width) h-calc(100vh_-_20rem) overflow-y-scroll overflow-x-hidden hide-scrollbar> div idtoc classw-full h-full transition-swup-fade > div classh-8 w-full>/div> script typemodule>class l extends HTMLElement{tocElnull;visibleClassvisible;observer;anchorNavTargetnull;headingIdxMapnew Map;headings;sections;tocEntries;active;activeIndicatornull;constructor(){super(),this.observernew IntersectionObserver(this.markVisibleSection,{threshold:0})}markVisibleSectiont>{t.forEach(e>{const ie.target.children0?.getAttribute(id),si?this.headingIdxMap.get(i):void 0;s!null&&(this.activese.isIntersecting),e.isIntersecting&&this.anchorNavTargete.target.firstChild&&(this.anchorNavTargetnull)}),this.active.includes(!0)||this.fallback(),this.update()};toggleActiveHeading()>{let tthis.active.length-1,ethis.active.length-1,i-1;for(;t>0&&!this.activet;)this.tocEntriest.classList.remove(this.visibleClass),t--;for(;t>0&&this.activet;)this.tocEntriest.classList.add(this.visibleClass),eMath.min(e,t),iMath.max(i,t),t--;for(;t>0;)this.tocEntriest.classList.remove(this.visibleClass),t--;if(e>i)this.activeIndicator?.setAttribute(style,opacity: 0);else{let sthis.tocEl?.getBoundingClientRect().top||0,nthis.tocEl?.scrollTop||0,othis.tocEntriese.getBoundingClientRect().top-s+n,cthis.tocEntriesi.getBoundingClientRect().bottom-s+n;this.activeIndicator?.setAttribute(style,`top: ${o}px; height: ${c-o}px`)}};scrollToActiveHeading()>{if(this.anchorNavTarget||!this.tocEl)return;const tdocument.querySelectorAll(`#toc .${this.visibleClass}`);if(!t.length)return;const et0,itt.length-1,sthis.tocEl.clientHeight;let n;i.getBoundingClientRect().bottom-e.getBoundingClientRect().top.9*s?ne.offsetTop-32:ni.offsetTop-s*.8,this.tocEl.scrollTo({top:n,left:0,behavior:smooth})};update()>{requestAnimationFrame(()>{this.toggleActiveHeading(),this.scrollToActiveHeading()})};fallback()>{if(this.sections.length)for(let t0;tthis.sections.length;t++){let ethis.sectionst.getBoundingClientRect().top,ithis.sectionst.getBoundingClientRect().bottom;if(this.isInRange(e,0,window.innerHeight)||this.isInRange(i,0,window.innerHeight)||e0&&i>window.innerHeight)this.markActiveHeading(t);else if(e>window.innerHeight)break}};markActiveHeadingt>{this.activet!0};handleAnchorClickt>{const et.composedPath().find(i>i instanceof HTMLAnchorElement);if(e){const idecodeURIComponent(e.hash?.substring(1)),sthis.headingIdxMap.get(i);s!void 0?this.anchorNavTargetthis.headingss:this.anchorNavTargetnull}};isInRange(t,e,i){return et&&ti}connectedCallback(){const tdocument.querySelector(.prose);t?t.addEventListener(animationend,()>{this.init()},{once:!0}):console.debug(Animation element not found)}init(){if(this.tocEldocument.getElementById(toc-inner-wrapper),!!this.tocEl&&(this.tocEl.addEventListener(click,this.handleAnchorClick,{capture:!0}),this.activeIndicatordocument.getElementById(active-indicator),this.tocEntriesArray.from(document.querySelectorAll(#toc ahref^#)),this.tocEntries.length!0)){this.sectionsnew Array(this.tocEntries.length),this.headingsnew Array(this.tocEntries.length);for(let t0;tthis.tocEntries.length;t++){const edecodeURIComponent(this.tocEntriest.hash?.substring(1)),idocument.getElementById(e),si?.parentElement;i instanceof HTMLElement&&s instanceof HTMLElement&&(this.headingsti,this.sectionsts,this.headingIdxMap.set(e,t))}this.activenew Array(this.tocEntries.length).fill(!1),this.sections.forEach(t>this.observer.observe(t)),this.fallback(),this.update()}}disconnectedCallback(){this.sections.forEach(t>this.observer.unobserve(t)),this.observer.disconnect(),this.tocEl?.removeEventListener(click,this.handleAnchorClick)}}customElements.get(table-of-contents)||customElements.define(table-of-contents,l);/script> div classh-8 w-full>/div> /div> /div> /div> !-- #toc needs to exist for Swup to work normally --> /div> /div> !-- increase the page height during page transition to prevent the scrolling animation from jumping --> div idpage-height-extend classhidden h-300vh data-astro-cid-sckkx6r4 style--bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 255;--page-width: 75rem;>/div> script typemodule src/_astro/Layout.astro_astro_type_script_index_0_lang.DAHrxWCB.js>/script> script typemodule src/_astro/Layout.astro_astro_type_script_index_1_lang.E65OPlLe.js>/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]