mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-04-30 18:09:31 +08:00
329 lines
215 KiB
HTML
329 lines
215 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head prefix="og: https://ogp.me/ns#">
|
||
<meta charset="utf-8" />
|
||
<meta name="generator" content="gh:importantimport/urara" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="manifest" crossorigin="use-credentials" href="/manifest.webmanifest" />
|
||
<link rel="alternate" type="application/feed+json" href="/feed.json" />
|
||
<link rel="alternate" type="application/atom+xml" href="/atom.xml" />
|
||
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
|
||
<meta http-equiv="content-security-policy" content=""><title>为博客写一个Project showcase 页面 | Seviche.cc</title><link rel="me" href="https://kongwoo.icu/@seviche" data-svelte="svelte-1592q3p"><link rel="webmention" href="https://webmention.io/seviche.cc/webmention" data-svelte="svelte-1592q3p">
|
||
<link rel="pingback" href="https://webmention.io/seviche.cc/xmlrpc" data-svelte="svelte-1592q3p"><link rel="shortcut icon" href="https://seviche.cc/favicon.png" sizes="48x48" type="image/png" data-svelte="svelte-1kxdj3d"><link rel="apple-touch-icon" href="https://seviche.cc/assets/any@180.png" sizes="180x180" type="image/png" data-svelte="svelte-1kxdj3d"><link rel="icon" href="https://seviche.cc/assets/any@192.png" sizes="192x192" type="image/png" data-svelte="svelte-1kxdj3d"><meta name="theme-color" data-svelte="svelte-1g590ms"><meta name="author" content="酸橘汁腌鱼" data-svelte="svelte-abrfj"><link rel="canonical" href="https://seviche.cc/2022-05-26-write-a-page-template" data-svelte="svelte-abrfj">
|
||
|
||
<meta name="keywords" content="Svelte, Open Source" data-svelte="svelte-abrfj">
|
||
<meta name="description" content="第一次Pull Request的经历" data-svelte="svelte-abrfj"><!-- HTML_TAG_START --><link rel="authorization_endpoint" href="https://indieauth.com/auth"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="me" href="https://github.com/sevichecc" /><!-- HTML_TAG_END --><!-- HTML_TAG_START --><script data-cfasync="false" defer data-do-not-track="true" data-website-id="2403ea30-74ff-4ffa-8264-556b9f3b2897" src="https://hexoverc.vercel.app/umami.js"></script><!-- HTML_TAG_END --><!-- HTML_TAG_START --><script async data-cfasync="false" src="https://cdn.splitbee.io/sb.js"></script><!-- HTML_TAG_END --><!-- HTML_TAG_START --><meta name="baiduspider" content="noindex"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="microsub" href="https://aperture.p3k.io/microsub/761"><!-- HTML_TAG_END --><meta property="og:site_name" content="Seviche.cc" data-svelte="svelte-1y1uq0g"><meta property="og:locale" content="zh" data-svelte="svelte-1y1uq0g"><meta property="og:type" content="article" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:title" content="为博客写一个Project showcase 页面" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:description" content="第一次Pull Request的经历" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:image" content="https://seviche.cc/assets/maskable@512.png" data-svelte="svelte-1y1uq0g">
|
||
<meta name="twitter:card" content="summary" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:tag" content="Svelte" data-svelte="svelte-1y1uq0g"><meta property="article:tag" content="Open Source" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:url" content="https://seviche.cc/2022-05-26-write-a-page-template" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:author" content="酸橘汁腌鱼" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:published_time" content="2022-05-26T00:00:00.000Z" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:modified_time" content="2022-08-01T11:36:42.589Z" data-svelte="svelte-1y1uq0g">
|
||
<link href="/_app/immutable/assets/__layout-916a0572.css" rel="stylesheet">
|
||
<link rel="modulepreload" href="/_app/immutable/start-f4ec0a74.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/index-cd58b8d1.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/index-81c83cec.js">
|
||
<link rel="modulepreload" href="/_app/immutable/pages/__layout.svelte-251b91cc.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/title-765c989f.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/posts-c52cb603.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/posts-57ab4794.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/icon-3aa13b39.js">
|
||
<link rel="modulepreload" href="/_app/immutable/pages/2022-05-26-write-a-page-template.md-1f0b482a.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/post_layout-9085e57e.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/post_card-e7f4525a.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/head-4a058b17.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/footer-1abd9501.js">
|
||
</head>
|
||
|
||
<body itemscope itemtype="https://schema.org/WebPage">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<header id="header" class="fixed z-50 w-screen transition-all duration-500 ease-in-out border-b-2 border-transparent max-h-[4.125rem] false"><div class="navbar"><div class="navbar-start"><div class="dropdown lg:hidden"><label for="navbar-dropdown" tabindex="0" class="btn btn-square btn-ghost"><span class="i-heroicons-outline-menu-alt-1"></span></label>
|
||
<ul id="navbar-dropdown" tabindex="0" class="menu menu-compact dropdown-content bg-base-100 text-base-content shadow-lg rounded-box max-w-52 p-2"><li><a sveltekit:prefetch href="/projects">Projects</a>
|
||
</li><li><a sveltekit:prefetch href="/friends">Friends</a>
|
||
</li><li><a sveltekit:prefetch href="/about">About</a>
|
||
</li></ul></div>
|
||
<div class="swap order-last hidden lg:inline-grid"><button class="swap-on btn btn-ghost text-base font-normal normal-case transition-all duration-200 hidden"></button>
|
||
<ul class="swap-off menu menu-horizontal p-0"><li><a sveltekit:prefetch href="/projects">Projects</a>
|
||
</li><li><a sveltekit:prefetch href="/friends">Friends</a>
|
||
</li><li><a sveltekit:prefetch href="/about">About</a>
|
||
</li></ul></div>
|
||
<a href="/" sveltekit:prefetch class="btn btn-ghost normal-case text-lg">Seviche.cc</a></div>
|
||
<div class="navbar-end">
|
||
|
||
|
||
|
||
|
||
<div id="change-theme" class="dropdown dropdown-end"><div tabindex="0" class="btn btn-square btn-ghost"><span class="i-heroicons-outline-color-swatch"></span></div>
|
||
<ul tabindex="0" class="flex shadow-2xl menu dropdown-content bg-base-100 text-base-content rounded-box w-52 p-2 gap-2 overflow-y-auto max-h-[21.5rem]"><button data-theme="lemonade" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Light</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="night" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Dark</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="cupcake" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Cupcake</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="bumblebee" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Bumblebee</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="emerald" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Emerald</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="corporate" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Corporate</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="valentine" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Valentine</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="synthwave" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Synthwave</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="retro" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Retro</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="cyberpunk" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Cyberpunk</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="halloween" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Halloween</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="garden" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Garden</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="forest" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Forest</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="aqua" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Aqua</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="lofi" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Lo-Fi</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="pastel" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Pastel</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="fantasy" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Fantasy</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="wirefream" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Wireframe</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="black" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Black</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="luxury" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Luxury</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="dracula" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Dracula</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="cmyk" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">CMYK</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="autumn" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Autumn</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="business" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Business</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="acid" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Acid</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="coffee" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Coffee</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="winter" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Winter</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button></ul></div></div></div></header>
|
||
|
||
<button id="totop" aria-label="scroll to top" class="fixed grid group btn btn-circle btn-lg border-none backdrop-blur bottom-6 right-6 z-50 duration-500 ease-in-out btn-ghost bg-base-100/30 md:bg-base-200/30 translate-y-24"><div class="radial-progress text-accent transition-all duration-500 ease-in-out group-hover:text-accent-focus col-start-1 row-start-1" style="--size:4rem; --thickness: 0.25rem; --value:undefined;"></div>
|
||
<div class="border-4 border-base-content/10 group-hover:border-transparent col-start-1 row-start-1 rounded-full w-full h-full p-4 grid duration-500 ease-in-out"><span class="i-heroicons-solid-chevron-up !w-6 !h-6"></span></div></button>
|
||
|
||
<div class="bg-base-100 md:bg-base-200 min-h-screen pt-16 md:pb-8 lg:pb-16">
|
||
|
||
|
||
|
||
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap"><div class="flex-1 w-full max-w-screen-md order-first ease-out transform mx-auto xl:mr-0"></div>
|
||
<div class="flex-1 w-full max-w-screen-md xl:order-last ease-out transform mx-auto xl:mr-0"></div>
|
||
<div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0"><article itemscope itemtype="https://schema.org/BlogPosting" itemprop="blogPost" class="card bg-base-100 rounded-none md:rounded-box md:shadow-xl z-10 md:mb-8 lg:mb-16"><div id="bridgy" class="hidden"><a href="https://brid.gy/publish/mastodon">mastodon</a></div>
|
||
|
||
|
||
<div class="card-body gap-0 "><div class="flex flex-col gap-2">
|
||
<div class="flex font-semibold gap-1.5"><a rel="author" class="opacity-75 hover:opacity-100 hover:text-primary duration-500 ease-in-out p-author h-card" href="https://seviche.cc">酸橘汁腌鱼</a>
|
||
<span class="opacity-50">/</span>
|
||
<a href="/2022-05-26-write-a-page-template" class="swap hover:swap-active u-url u-uid"><time class="swap-off font-semibold opacity-75 duration-500 ease-in-out mr-auto dt-published" datetime="2022-05-26T00:00:00.000Z" itemprop="datePublished">Thu, May 26, 2022</time>
|
||
<time class="swap-on font-semibold text-primary duration-500 ease-in-out mr-auto dt-updated" datetime="2022-08-01T11:36:42.589Z" itemprop="dateModified">Mon, Aug 1, 2022</time></a></div>
|
||
<h1 itemprop="name headline" class="card-title text-3xl mb-8 p-name">为博客写一个Project showcase 页面</h1>
|
||
<p itemprop="description" class="p-summary mb-auto hidden">第一次Pull Request的经历</p></div>
|
||
<main itemprop="articleBody" class="urara-prose prose e-content"><p>这两天为博客写了一个 Project 的页面用来放我的作品，这里记录一下我是怎么写（模仿）的，我对 Svelte 语法的了解不多，没有特别深入学习，只是在官方看了下文档和用了下他们的 <a href="https://www.sveltejs.cn/tutorial/basics" rel="nofollow noopener noreferrer external" target="_blank">交互式教程</a> ，编码的过程是一边学习一边模仿慢慢摸索的，虽然最终没有 merge 到 repo 中，但我觉得整个过程都蛮兴奋的。</p>
|
||
<p>既然有了博客，那我肯定是要写一下这个过程的。</p>
|
||
<h2 id="1-分析需求"><a href="#1-分析需求">1. 分析需求</a></h2>
|
||
<p>我想要的是一个独立的 Page，而不是一个 Post 页面，最后把它放在导航栏里面。
|
||
想要有以下这几个功能：</p>
|
||
<ul><li>技术栈分类</li>
|
||
<li>项目类别筛选</li>
|
||
<li>项目展示</li></ul>
|
||
<p>主要有这些信息的展示：</p>
|
||
<ul><li>项目标题</li>
|
||
<li>项目图片</li>
|
||
<li>项目描述</li>
|
||
<li>技术栈</li>
|
||
<li>项目类别</li></ul>
|
||
<h2 id="2-画原型图"><a href="#2-画原型图">2. 画原型图</a></h2>
|
||
<p>明确了需求后，参考了几个项目平台的布局，在 <a href="https://whimsical.com/" rel="nofollow noopener noreferrer external" target="_blank">Whimsical</a> 上画了原型图如下：
|
||
<img src="https://s2.loli.net/2022/05/26/8kMa6LPrgUEC7Xb.png" alt="https://s2.loli.net/2022/05/26/8kMa6LPrgUEC7Xb.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
|
||
<p>目前还没有做上面 Tag 的分类功能，之后可能会做吧</p>
|
||
<h2 id="2-创建组件样式-css"><a href="#2-创建组件样式-css">2. 创建组件样式 CSS</a></h2>
|
||
<p>为了统一风格，我在博客现有框架里四处搜寻可用的组件样式，想在这基础上修改，然后我找到了作者 藍 在 Tailwind Play 上的友链组件，感觉很适合，然后就直接在这个 Tailwind Play Demo 上进行了样式修改，不过此时填写的数据都是死数据，后面再进行修改。</p>
|
||
<p>因为我之前没有怎么用过 Tailwind，所以是一边对照 Tailwind 文档修改的，然后 Tailwind Play 上的代码提示功能真的很新手友好，hover CSS class 的时候会显示具体的 CSS 原始参数，很直观。</p>
|
||
<p><img src="https://s2.loli.net/2022/05/27/lFwQ8T5YUcdjDfe.png" alt="https://s2.loli.net/2022/05/27/lFwQ8T5YUcdjDfe.png" class="rounded-lg my-2" loading="lazy" decoding="async">
|
||
最后我构建的 Demo 样式如下：
|
||
<a href="https://play.tailwindcss.com/uQwYojgpuk?layout=horizontal" rel="nofollow noopener noreferrer external" target="_blank">Tailwind Play</a></p>
|
||
<p><img src="https://s2.loli.net/2022/05/27/g5aYxD9mzlqpj6c.png" alt="https://s2.loli.net/2022/05/27/g5aYxD9mzlqpj6c.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
|
||
<h2 id="4-编写组件代码"><a href="#4-编写组件代码">4. 编写组件代码</a></h2>
|
||
<p>整个页面的构建跟 Friend 页面很像，我分析了 Friend 页面所涉及到的代码和结构，然后一点点模仿构建 Project 页面。</p>
|
||
<h3 id="数据"><a href="#数据">数据</a></h3>
|
||
<p>首先根据需求确定传入的数据及其格式，以便后面使用 TypeScript 的提示</p>
|
||
<ul><li>参考：<code>/src/lib/config/friends.ts</code></li>
|
||
<li>新建：<code>/src/lib/config/projects.ts</code></li></ul>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default with-title twoslash lsp" style="background-color: #263238; color: #EEFFFF" ts="true" title="/src/lib/config/friends.ts"><div class='code-title'>/src/lib/config/friends.ts</div><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">interface</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='interface FriendOld' >FriendOld</data-lsp></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// hCard+XFN</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// HTML id</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.rel?: string | undefined' >rel</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// XFN, contact / acquaintance / friend</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// URL</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.html?: string | undefined' >html</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// HTML</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.title?: string | undefined' >title</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 标题</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.descr?: string | undefined' >descr</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 描述</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 头像</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// backwards compatibility</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'> </div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">type</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Friend = { id: string; rel?: string | undefined; link?: string | undefined; html?: string | undefined; title?: string | undefined; name?: string | undefined; avatar?: string | undefined; descr?: string | undefined; class?: { ...; } | undefined; }' >Friend</data-lsp></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// HTML id</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) rel?: string | undefined' >rel</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// XHTML Friends Network</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// URL</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) html?: string | undefined' >html</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// Custom HTML</span></div><div class='line'> </div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) title?: string | undefined' >title</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 标题</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 人名</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 头像</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) descr?: string | undefined' >descr</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 描述</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) class?: { avatar?: string | undefined; img?: string | undefined; } | undefined' >class</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 头像类名</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) img?: string | undefined' >img</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// 图片类名</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'> </div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> <data-lsp lsp='const friends: Friend[]' >friends</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Friend = { id: string; rel?: string | undefined; link?: string | undefined; html?: string | undefined; title?: string | undefined; name?: string | undefined; avatar?: string | undefined; descr?: string | undefined; class?: { ...; } | undefined; }' >Friend</data-lsp></span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">id</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) rel?: string | undefined' >rel</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) title?: string | undefined' >title</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) descr?: string | undefined' >descr</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">''</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">]</span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default with-title twoslash lsp" style="background-color: #263238; color: #EEFFFF" ts="true" title="/src/lib/config/projects.ts"><div class='code-title'>/src/lib/config/projects.ts</div><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">type</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Project = { id: string; name?: string | undefined; tags?: string[] | undefined; feature?: string | undefined; description?: string | undefined; img?: string | undefined; link?: string | undefined; }' >Project</data-lsp></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) tags?: string[] | undefined' >tags</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF">[]</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) feature?: string | undefined' >feature</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) description?: string | undefined' >description</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) img?: string | undefined' >img</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'> </div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> <data-lsp lsp='const projects: Project[]' >projects</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Project = { id: string; name?: string | undefined; tags?: string[] | undefined; feature?: string | undefined; description?: string | undefined; img?: string | undefined; link?: string | undefined; }' >Project</data-lsp></span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">coach</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Find a Coach</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) tags?: string[] | undefined' >tags</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Vue 3</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Composition API</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) feature?: string | undefined' >feature</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Vue3</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) description?: string | undefined' >description</data-lsp></span><span style="color: #89DDFF">:</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">既然如何， 问题的关键究竟为何？ 要想清楚，科学和人文谁更有意义，到底是一种怎么样的存在。 普列姆昌德曾经提到过，希望的灯一旦熄灭，生活刹那间变成了一片黑暗。这启发了我， 那么， 我认为， 总结的来说，</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) img?: string | undefined' >img</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">https://uneorange.oss-cn-guangzhou.aliyuncs.com/202205251801454.avif</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">https://seviche.cc</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">]</span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="组件"><a href="#组件">组件</a></h3>
|
||
<p>将 CSS 复制进去，并注入数据</p>
|
||
<ul><li>参考：<code>/src/lib/components/extra/friend.svelte</code></li>
|
||
<li>新建：<code>/src/lib/components/extra/project.svelte</code></li></ul>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/src/lib/components/extra/friend.svelte"><div class='code-title'>/src/lib/components/extra/friend.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">type</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Friend</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/friends</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Footer </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/footer.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> friend </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Friend</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">{#if friend.id === 'footer'}</span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">footer</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">rounded</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{true}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">p-4 md:p-8</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF">{:else if friend.html}</span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">a</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.id}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">rel</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.rel}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.link}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">h-card u-url</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{@html friend.html}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">a</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF">{:else}</span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">a</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.id}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">rel</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.rel}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.link}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow h-card u-url</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">absolute text-4xl font-bold opacity-5 rotate-6 leading-tight top-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{friend.name ?? ''}{friend.title ?? ''}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-body p-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">flex items-center gap-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {#if friend.avatar}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">avatar {friend.class?.avatar} shrink-0 w-16 mb-auto</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">img</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.class?.img ?? 'rounded-xl'} u-photo</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">src</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.avatar}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.title}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {:else}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">avatar {friend.class?.avatar} placeholder mb-auto</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{friend.class?.img ?? 'bg-neutral-focus text-neutral-content shadow-inner rounded-xl'} w-16</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text-3xl</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{(friend.name ?? friend.title).charAt(0)}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {/if}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-title flex-col gap-0 flex-1 items-end</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text-right p-name</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{friend.name ?? ''}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">opacity-50 text-right</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{friend.title}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {#if friend.descr}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">prose opacity-70 p-note</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{friend.descr}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {/if}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">a</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF">{/if}</span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>根据具体的页面效果修改了 Demo 中的 CSS 样式</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/src/lib/components/extra/project.svelte"><div class='code-title'>/src/lib/components/extra/project.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">type</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Project</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/projects</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Footer </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/footer.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> project </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Project</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> tags </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> project</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">tags</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">{#if project.id === 'footer'}</span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">footer</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">rounded</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{true}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">max-w-4xl mx-auto p-4 md:p-8</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF">{:else}</span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">a</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{project.id}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{project.link}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card mx-auto max-w-4xl bg-base-100 shadow-xl transition-shadow mb-7 h-card u-url hover:shadow-2xl</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">absolute text-5xl font-bold opacity-5 rotate-6 leading-tight top-2 right-0</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{project.feature}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-body p-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">flex flex-col md:flex-row items-start gap-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">mb-auto max-w-full shrink-0 md:max-w-xs</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">img</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">rounded-md</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">src</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{project.img}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{project.description}</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-title flex-1 flex-col items-start gap-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">h2</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">p-name text-left text-2xl mb-2</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{project.name}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">h2</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">mb-3 text-base font-normal</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {#each tags as tag}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 my-1 mr-1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{tag}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> {/each}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text-left text-base font-normal opacity-70</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">{@html project.description}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">a</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF">{/if}</span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="页面"><a href="#页面">页面</a></h3>
|
||
<ul><li>参考：<code>/urara/friends/index.svelte</code></li>
|
||
<li>新建：<code>/urara/projects/index.svelte</code></li></ul>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/urara/friends/index.svelte"><div class='code-title'>/urara/friends/index.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// @ts-nocheck</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Masonry </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">svelte-bricks</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Friend</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">friends</span><span style="color: #F07178"> </span><span style="color: #89DDFF">as</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">allFriends</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/friends</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Head </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/head.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> FriendComponent </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/extra/friend.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> rnd </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> Math</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">random</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> fy </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">a</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Friend</span><span style="color: #EEFFFF">[]</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> r </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> c </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> a</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">length</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">while</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">c</span><span style="color: #F07178">) (</span><span style="color: #EEFFFF">r</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">rnd</span><span style="color: #F07178"> </span><span style="color: #89DDFF">*</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">c</span><span style="color: #89DDFF">--</span><span style="color: #F07178">) </span><span style="color: #89DDFF">|</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> ([</span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">c</span><span style="color: #F07178">]</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">r</span><span style="color: #F07178">]] </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> [</span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">r</span><span style="color: #F07178">]</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">c</span><span style="color: #F07178">]])</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">a</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">...</span><span style="color: #82AAFF">fy</span><span style="color: #EEFFFF">(allFriends </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">[])</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">footer</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">head</span><span style="color: #89DDFF"> /></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">Masonry</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">{items}</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">minColWidth</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{384}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">maxColWidth</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{384}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">gap</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">{32}</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">let:item</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">bind:width</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">bind:height</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">FriendComponent</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">{item}</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">Masonry</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p><strong>Projects 页面</strong></p>
|
||
<p>因为我没有用到瀑布流布局，所以删掉了一些组件和 function</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/urara/projects/index.svelte"><div class='code-title'>/urara/projects/index.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">projects</span><span style="color: #F07178"> </span><span style="color: #89DDFF">as</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">allProjects</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/projects</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Head </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/head.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> ProjectComponent </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/extra/projects.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">(allProjects </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">[])</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">footer</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">head</span><span style="color: #89DDFF"> /></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">{#each items as item}</span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">ProjectComponent</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">{item}</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF">{/each}</span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="响应式布局"><a href="#响应式布局">响应式布局</a></h3>
|
||
<p>参考 <a href="https://tailwindcss.com/docs/responsive-design" rel="nofollow noopener noreferrer external" target="_blank">Tailwind 的响应式设计指南</a> ，修改了卡片<code>flex</code> 的方向，以及图片的宽度，以适应小尺寸屏幕。</p>
|
||
<h2 id="5-测试"><a href="#5-测试">5. 测试</a></h2>
|
||
<p>其实有错误的话 <code>pnpm dev</code> 以及 <code>pnpm build</code> 的时候都会提醒，但我后面发现也可以用 <code>pnpm check</code> 来检查。过程中我好像没有遇到什么 Bug。</p>
|
||
<h2 id="6-pull-request-到-github"><a href="#6-pull-request-到-github">6. Pull request 到 Github</a></h2>
|
||
<p>先看了一下 Repo 作者写的 <a href="https://github.com/importantimport/urara/blob/main/.github/CONTRIBUTING.md" rel="nofollow noopener noreferrer external" target="_blank">contributing docs</a>，了解 Contribute 的规范。</p>
|
||
<p>按照相应步骤做了之后，Google 了一下如何 pull request，照着 FreeCodeCamp 的这篇进行了操作：
|
||
<a href="https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/" rel="nofollow noopener noreferrer external" target="_blank">如何在 GitHub 提交第一个 pull request</a> ，然后成功 Pull 了一个 Request，但后面发现有的文件没有改，造成了 bug，就删除了原 Request 重新 Pull。</p>
|
||
<p>最后终于创建成功了我的第一个 Pull request！
|
||
链接：<a href="https://github.com/importantimport/urara/pull/19" rel="nofollow noopener noreferrer external" target="_blank">feat: ✨ add project page by Sevichecc · Pull Request #19 · importantimport/urara · GitHub</a></p>
|
||
<h2 id="7-last-but-not-least"><a href="#7-last-but-not-least">7. Last but not least</a></h2>
|
||
<p>写一篇这样的博文，并发表到互联网。</p>
|
||
<p><span class="spoiler">好啦我知道这篇文章有点臭屁，但下次还敢……</span></p></main>
|
||
<div class="divider mt-4 mb-0"></div>
|
||
<div><a href="/?tags=Svelte" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">#Svelte
|
||
</a><a href="/?tags=Open Source" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">#Open Source
|
||
</a></div></div>
|
||
|
||
</article>
|
||
<footer id="footer" class="footer footer-center bg-base-300 text-base-content shadow-inner p-8 md:rounded-box sticky bottom-0 z-0 md:static "><div class="prose"><p><a href="/atom.xml" rel="noopener external" target="_blank">Feed</a>
|
||
<span class="mr-1">·</span><a href="/sitemap.xml" rel="noopener external" target="_blank">Sitemap</a>
|
||
<span class="mr-1">·</span><a href="/privacy" rel="noopener external" target="_blank">Pravicy</a>
|
||
|
||
<br>
|
||
Copyright © 2022
|
||
酸橘汁腌鱼
|
||
<br>
|
||
Powered by
|
||
<a rel="noopener external" target="_blank" class="tooltip tooltip-secondary hover:text-secondary" data-tip="🌸 [δ] - Based on MDsveX & SvelteKit 🌸" href="https://github.com/importantimport/urara">Urara
|
||
</a>
|
||
<br>
|
||
<!-- HTML_TAG_START --><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><!-- HTML_TAG_END --></p></div></footer></div></div></div>
|
||
|
||
|
||
<script type="module" data-sveltekit-hydrate="nrr71n">
|
||
import { set_public_env, start } from "/_app/immutable/start-f4ec0a74.js";
|
||
|
||
set_public_env({});
|
||
|
||
start({
|
||
target: document.querySelector('[data-sveltekit-hydrate="nrr71n"]').parentNode,
|
||
paths: {"base":"","assets":""},
|
||
session: {},
|
||
route: true,
|
||
spa: false,
|
||
trailing_slash: "never",
|
||
hydrate: {
|
||
status: 200,
|
||
error: null,
|
||
nodes: [0, 23],
|
||
params: {},
|
||
routeId: "2022-05-26-write-a-page-template"
|
||
}
|
||
});
|
||
</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/posts.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"[\n {\n \"title\": \"Vue.js 挑战练习\",\n \"created\": \"2022-08-12T00:00:00.000Z\",\n \"summary\": \"我的答案以及相关知识点\",\n \"tags\": [\n \"Vue\"\n ],\n \"slug\": \"/2022-08-12-vue-challenges.md\",\n \"path\": \"/2022-08-12-vue-challenges\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Built-ins\",\n \"slug\": \"built-ins\"\n },\n {\n \"depth\": 3,\n \"title\": \"DOM 传送门\",\n \"slug\": \"dom-传送门\"\n },\n {\n \"depth\": 3,\n \"title\": \"优化性能的指令\",\n \"slug\": \"优化性能的指令\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS Features\",\n \"slug\": \"css-features\"\n },\n {\n \"depth\": 3,\n \"title\": \"动态 CSS\",\n \"slug\": \"动态-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"全局 CSS\",\n \"slug\": \"全局-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"Components\",\n \"slug\": \"components\"\n },\n {\n \"depth\": 3,\n \"title\": \"DOM 传送门\",\n \"slug\": \"dom-传送门-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Props 验证\",\n \"slug\": \"props-验证\"\n },\n {\n \"depth\": 3,\n \"title\": \"函数式组件\",\n \"slug\": \"函数式组件\"\n },\n {\n \"depth\": 3,\n \"title\": \"渲染函数h()\",\n \"slug\": \"渲染函数h\"\n },\n {\n \"depth\": 3,\n \"title\": \"树组件\",\n \"slug\": \"树组件\"\n },\n {\n \"depth\": 2,\n \"title\": \"Composable Function\",\n \"slug\": \"composable-function\"\n },\n {\n \"depth\": 3,\n \"title\": \"切换器\",\n \"slug\": \"切换器\"\n },\n {\n \"depth\": 3,\n \"title\": \"计数器\",\n \"slug\": \"计数器\"\n },\n {\n \"depth\": 3,\n \"title\": \"实现本地存储函数\",\n \"slug\": \"实现本地存储函数\"\n },\n {\n \"depth\": 3,\n \"title\": \"鼠标坐标\",\n \"slug\": \"鼠标坐标\"\n },\n {\n \"depth\": 2,\n \"title\": \"Composition API\",\n \"slug\": \"composition-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"生命周期钩子\",\n \"slug\": \"生命周期钩子\"\n },\n {\n \"depth\": 3,\n \"title\": \"ref 全家桶\",\n \"slug\": \"ref-全家桶\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应性丢失\",\n \"slug\": \"响应性丢失\"\n },\n {\n \"depth\": 3,\n \"title\": \"可写的计算属性\",\n \"slug\": \"可写的计算属性\"\n },\n {\n \"depth\": 3,\n \"title\": \"watch 全家桶\",\n \"slug\": \"watch-全家桶\"\n },\n {\n \"depth\": 3,\n \"title\": \"浅层 ref\",\n \"slug\": \"浅层-ref\"\n },\n {\n \"depth\": 3,\n \"title\": \"依赖注入\",\n \"slug\": \"依赖注入\"\n },\n {\n \"depth\": 3,\n \"title\": \"Effect 作用域 API\",\n \"slug\": \"effect-作用域-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义 ref\",\n \"slug\": \"自定义-ref\"\n },\n {\n \"depth\": 2,\n \"title\": \"Directives\",\n \"slug\": \"directives\"\n },\n {\n \"depth\": 3,\n \"title\": \"大写\",\n \"slug\": \"大写\"\n },\n {\n \"depth\": 3,\n \"title\": \"优化性能的指令\",\n \"slug\": \"优化性能的指令-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"切换焦点指令\",\n \"slug\": \"切换焦点指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"防抖点击指令\",\n \"slug\": \"防抖点击指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"激活的样式-指令\",\n \"slug\": \"激活的样式-指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"实现简易版v-model指令\",\n \"slug\": \"实现简易版v-model指令\"\n },\n {\n \"depth\": 2,\n \"title\": \"Event Handling\",\n \"slug\": \"event-handling\"\n },\n {\n \"depth\": 3,\n \"title\": \"阻止事件冒泡\",\n \"slug\": \"阻止事件冒泡\"\n },\n {\n \"depth\": 3,\n \"title\": \"按键修饰符\",\n \"slug\": \"按键修饰符\"\n },\n {\n \"depth\": 2,\n \"title\": \"Global API:General\",\n \"slug\": \"global-apigeneral\"\n },\n {\n \"depth\": 3,\n \"title\": \"下一次 DOM 更新\",\n \"slug\": \"下一次-dom-更新\"\n },\n {\n \"depth\": 2,\n \"title\": \"Lifecycle\",\n \"slug\": \"lifecycle\"\n },\n {\n \"depth\": 3,\n \"title\": \"生命周期钩子\",\n \"slug\": \"生命周期钩子-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Advanced\",\n \"slug\": \"reactivityadvanced\"\n },\n {\n \"depth\": 3,\n \"title\": \"浅层 ref\",\n \"slug\": \"浅层-ref-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"原始值 API\",\n \"slug\": \"原始值-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"Effect 作用域 API\",\n \"slug\": \"effect-作用域-api-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义 ref\",\n \"slug\": \"自定义-ref-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Core\",\n \"slug\": \"reactivitycore\"\n },\n {\n \"depth\": 3,\n \"title\": \"ref 全家桶\",\n \"slug\": \"ref-全家桶-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"可写的计算属性\",\n \"slug\": \"可写的计算属性-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"watch 全家桶\",\n \"slug\": \"watch-全家桶-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Utilities\",\n \"slug\": \"reactivityutilities\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应性丟失\",\n \"slug\": \"响应性丟失\"\n },\n {\n \"depth\": 2,\n \"title\": \"Utility Function\",\n \"slug\": \"utility-function\"\n },\n {\n \"depth\": 3,\n \"title\": \"until\",\n \"slug\": \"until\"\n },\n {\n \"depth\": 2,\n \"title\": \"Web Components\",\n \"slug\": \"web-components\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义元素\",\n \"slug\": \"自定义元素\"\n }\n ],\n \"updated\": \"2022-08-13T08:21:08.878Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Monkey Patch\",\n \"created\": \"2022-08-06T00:00:00.000Z\",\n \"summary\": \"猴子打补丁\",\n \"toc\": false,\n \"tag\": [\n \"Notes\"\n ],\n \"slug\": \"/2022-08-06-notes/index.md\",\n \"path\": \"/2022-08-06-notes\",\n \"updated\": \"2022-08-07T04:36:02.907Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 7 月\",\n \"created\": \"2022-07-31T00:00:00.000Z\",\n \"summary\": \"eval / CSP&XSS / Commonplace Book ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-31-reading-7/july.webp\",\n \"slug\": \"/2022-07-31-reading-7/index.md\",\n \"path\": \"/2022-07-31-reading-7\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"前端\",\n \"slug\": \"前端\"\n },\n {\n \"depth\": 2,\n \"title\": \"后端\",\n \"slug\": \"后端\"\n },\n {\n \"depth\": 2,\n \"title\": \"什锦\",\n \"slug\": \"什锦\"\n },\n {\n \"depth\": 2,\n \"title\": \"Commonplace Book\",\n \"slug\": \"commonplace-book\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.119Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JS中的二进制数字\",\n \"created\": \"2022-07-27T00:00:00.000Z\",\n \"summary\": \"0b/0B和paresInt\",\n \"tags\": [\n \"JavsScript\"\n ],\n \"slug\": \"/2022-07-27-bin.md\",\n \"path\": \"/2022-07-27-bin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"ES6+\",\n \"slug\": \"es6\"\n },\n {\n \"depth\": 2,\n \"title\": \"Before ES6\",\n \"slug\": \"before-es6\"\n }\n ],\n \"updated\": \"2022-08-11T17:12:21.128Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"created\": \"2022-07-26T00:00:00.000Z\",\n \"tags\": [\n \"XSS\",\n \"Notes\"\n ],\n \"slug\": \"/2022-07-23-notes-xss.md\",\n \"path\": \"/2022-07-23-notes-xss\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"XSS 学习\",\n \"slug\": \"xss-学习\"\n }\n ],\n \"updated\": \"2022-08-11T17:39:51.841Z\",\n \"type\": \"note\",\n \"html\": \"\u003Ch3 id=\\\"xss-学习\\\">\u003Ca href=\\\"#xss-学习\\\">XSS 学习\u003C/a>\u003C/h3>\u003Cp>介绍文章：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://tech.meituan.com/2018/09/27/fe-security.html\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\\\"https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">Cross-site scripting（跨站脚本攻击） - 术语表 | MDN\u003C/a>\u003C/li>\u003C/ul>\u003Cp>练习：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://prompt.ml/\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">prompt(1) to win\u003C/a>\u003C/li>\u003Cli>解答：\u003Ca href=\\\"https://github.com/cure53/XSSChallengeWiki/wiki/prompt.ml#level-1\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">prompt.ml\u003C/a>\u003C/li>\u003C/ul>\u003Cp>相关文章：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">我自己博客的一个 XSS 的故事 | 离别歌\u003C/a>\u003C/li>\u003C/ul>\"\n },\n {\n \"title\": \"D3.js 基础笔记\",\n \"created\": \"2022-07-23T00:00:00.000Z\",\n \"summary\": \"即使是FreeCodeCamp也要做笔记\",\n \"tags\": [\n \"D3.js\",\n \"数据可视化\"\n ],\n \"slug\": \"/2022-07-23-d3.md\",\n \"path\": \"/2022-07-23-d3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"学习资源\",\n \"slug\": \"学习资源\"\n },\n {\n \"depth\": 2,\n \"title\": \"基础操作\",\n \"slug\": \"基础操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改元素\",\n \"slug\": \"修改元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用数据\",\n \"slug\": \"使用数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用动态数据\",\n \"slug\": \"使用动态数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"给元素添加内联样式\",\n \"slug\": \"给元素添加内联样式\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加 Class\",\n \"slug\": \"添加-class\"\n },\n {\n \"depth\": 3,\n \"title\": \"标签\",\n \"slug\": \"标签\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加工具提示 tooltip\",\n \"slug\": \"添加工具提示-tooltip\"\n },\n {\n \"depth\": 2,\n \"title\": \"SVG\",\n \"slug\": \"svg\"\n },\n {\n \"depth\": 3,\n \"title\": \"创建 SVG\",\n \"slug\": \"创建-svg\"\n },\n {\n \"depth\": 3,\n \"title\": \"反转 SVG 元素\",\n \"slug\": \"反转-svg-元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"更改 SVG 元素的颜色\",\n \"slug\": \"更改-svg-元素的颜色\"\n },\n {\n \"depth\": 3,\n \"title\": \"SVG 图形\",\n \"slug\": \"svg-图形\"\n },\n {\n \"depth\": 4,\n \"title\": \"矩形\",\n \"slug\": \"矩形\"\n },\n {\n \"depth\": 4,\n \"title\": \"圆形\",\n \"slug\": \"圆形\"\n },\n {\n \"depth\": 2,\n \"title\": \"比例尺\",\n \"slug\": \"比例尺\"\n },\n {\n \"depth\": 3,\n \"title\": \"创建线性比例\",\n \"slug\": \"创建线性比例\"\n },\n {\n \"depth\": 4,\n \"title\": \"线性缩放\",\n \"slug\": \"线性缩放\"\n },\n {\n \"depth\": 4,\n \"title\": \"按比例设置域和范围\",\n \"slug\": \"按比例设置域和范围\"\n },\n {\n \"depth\": 4,\n \"title\": \"最小值最大值\",\n \"slug\": \"最小值最大值\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用动态比例\",\n \"slug\": \"使用动态比例\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用预定义的比例放置元素\",\n \"slug\": \"使用预定义的比例放置元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加坐标轴\",\n \"slug\": \"添加坐标轴\"\n },\n {\n \"depth\": 2,\n \"title\": \"常见图表\",\n \"slug\": \"常见图表\"\n },\n {\n \"depth\": 3,\n \"title\": \"散点图\",\n \"slug\": \"散点图\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.463Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"css和js两种方式实现div右移1000px动画\",\n \"created\": \"2022-07-20T00:00:00.000Z\",\n \"summary\": \"用keyframes和timer\",\n \"tags\": [\n \"CSS\",\n \"JavaScript\",\n \"animation\"\n ],\n \"slug\": \"/2022-07-20-animation/index.svelte.md\",\n \"path\": \"/2022-07-20-animation\",\n \"toc\": [],\n \"updated\": \"2022-08-01T03:03:33.463Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 5月\",\n \"created\": \"2022-07-16T00:00:00.000Z\",\n \"summary\": \"Anki / JSDoc / 蘑菇 / Music-Map ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-16-reading-5/May1.jpg\",\n \"slug\": \"/2022-07-16-reading-5/index.md\",\n \"path\": \"/2022-07-16-reading-5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Productivity\",\n \"slug\": \"productivity\"\n },\n {\n \"depth\": 2,\n \"title\": \"有趣的\",\n \"slug\": \"有趣的\"\n }\n ],\n \"updated\": \"2022-08-11T16:29:56.272Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 6月\",\n \"created\": \"2022-07-15T00:00:00.000Z\",\n \"summary\": \"Vue / 网页性能优化 / npm ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-15-reading-6/june.png\",\n \"slug\": \"/2022-07-15-reading-6/index.md\",\n \"path\": \"/2022-07-15-reading-6\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"编程相关\",\n \"slug\": \"编程相关\"\n },\n {\n \"depth\": 3,\n \"title\": \"前端\",\n \"slug\": \"前端\"\n },\n {\n \"depth\": 3,\n \"title\": \"后端\",\n \"slug\": \"后端\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n },\n {\n \"depth\": 2,\n \"title\": \"互联网哲学\",\n \"slug\": \"互联网哲学\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.091Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"SQL 基础笔记\",\n \"created\": \"2022-07-13T00:00:00.000Z\",\n \"summary\": \"关于增改删查的方式\",\n \"tags\": [\n \"SQL\"\n ],\n \"slug\": \"/2022-07-13-sql.md\",\n \"path\": \"/2022-07-13-sql\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"SQL vs. NOSQL\",\n \"slug\": \"sql-vs-nosql\"\n },\n {\n \"depth\": 2,\n \"title\": \"CRUD\",\n \"slug\": \"crud\"\n },\n {\n \"depth\": 3,\n \"title\": \"Create\",\n \"slug\": \"create\"\n },\n {\n \"depth\": 3,\n \"title\": \"Read\",\n \"slug\": \"read\"\n },\n {\n \"depth\": 3,\n \"title\": \"Update\",\n \"slug\": \"update\"\n },\n {\n \"depth\": 3,\n \"title\": \"Destory\",\n \"slug\": \"destory\"\n },\n {\n \"depth\": 2,\n \"title\": \"Understanding SQL Relationships, Foreign Keys and Inner Joins\",\n \"slug\": \"understanding-sql-relationships-foreign-keys-and-inner-joins\"\n },\n {\n \"depth\": 3,\n \"title\": \"FOREIGN KEY\",\n \"slug\": \"foreign-key\"\n },\n {\n \"depth\": 3,\n \"title\": \"INNER JOIN\",\n \"slug\": \"inner-join\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.359Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"一些设计作品\",\n \"created\": \"2022-07-13T00:00:00.000Z\",\n \"summary\": \"logo / UI / 包装 / 儿童玩具 ……\",\n \"slug\": \"/2022-07-13-work/index.md\",\n \"path\": \"/2022-07-13-work\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"二十四节气茶包\",\n \"slug\": \"二十四节气茶包\"\n },\n {\n \"depth\": 2,\n \"title\": \"UI 设计\",\n \"slug\": \"ui-设计\"\n },\n {\n \"depth\": 2,\n \"title\": \"饼干包装\",\n \"slug\": \"饼干包装\"\n },\n {\n \"depth\": 2,\n \"title\": \"Logo\",\n \"slug\": \"logo\"\n },\n {\n \"depth\": 2,\n \"title\": \"排版装帧\",\n \"slug\": \"排版装帧\"\n },\n {\n \"depth\": 2,\n \"title\": \"儿童玩具\",\n \"slug\": \"儿童玩具\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.433Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Privacy Policy 隐私声明\",\n \"created\": \"2022-06-19T00:00:00.000Z\",\n \"flags\": [\n \"unlisted\"\n ],\n \"slug\": \"/privacy/index.svelte.md\",\n \"path\": \"/privacy\",\n \"toc\": [],\n \"updated\": \"2022-08-01T03:03:33.476Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS · Jellyfin结合Cloudreve开启线上影院\",\n \"created\": \"2022-06-15T00:00:00.000Z\",\n \"summary\": \"基于 Docker 和 Nginx 的信心搭建过程\",\n \"image\": \"/2022-06-15-jellyfin/1.jpg\",\n \"tags\": [\n \"Nginx\",\n \"VPS\",\n \"Docker\"\n ],\n \"slug\": \"/2022-06-15-jellyfin/index.md\",\n \"path\": \"/2022-06-15-jellyfin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关于 Jellyfin\",\n \"slug\": \"关于-jellyfin\"\n },\n {\n \"depth\": 2,\n \"title\": \"Cloudrever\",\n \"slug\": \"cloudrever\"\n },\n {\n \"depth\": 3,\n \"title\": \"反代\",\n \"slug\": \"反代\"\n },\n {\n \"depth\": 3,\n \"title\": \"一些配置\",\n \"slug\": \"一些配置\"\n },\n {\n \"depth\": 2,\n \"title\": \"Jellyfin\",\n \"slug\": \"jellyfin\"\n },\n {\n \"depth\": 3,\n \"title\": \"搭建\",\n \"slug\": \"搭建\"\n },\n {\n \"depth\": 3,\n \"title\": \"反代\",\n \"slug\": \"反代-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"媒体库路径\",\n \"slug\": \"媒体库路径\"\n },\n {\n \"depth\": 3,\n \"title\": \"插件安装\",\n \"slug\": \"插件安装\"\n },\n {\n \"depth\": 3,\n \"title\": \"主题和语言\",\n \"slug\": \"主题和语言\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.091Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS · 配置 Cloudflare 的免费 SSL 证书\",\n \"created\": \"2022-06-12T00:00:00.000Z\",\n \"summary\": \"关于如何为多个域名配置SSL证书的操作笔记\",\n \"tags\": [\n \"Nginx\",\n \"VPS\"\n ],\n \"slug\": \"/2022-06-12-cloudflare.md\",\n \"path\": \"/2022-06-12-cloudflare\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 创建证书\",\n \"slug\": \"1-创建证书\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 密钥上传到 VPS\",\n \"slug\": \"2-密钥上传到-vps\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 修改 Nginx 配置\",\n \"slug\": \"3-修改-nginx-配置\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"实现一个返回页面顶部的 Vue3 组件\",\n \"created\": \"2022-06-10T00:00:00.000Z\",\n \"summary\": \"结合流畅的动画平滑滚动到页面顶部\",\n \"tags\": [\n \"Vue3\",\n \"BootStrap\"\n ],\n \"slug\": \"/2022-06-10-backtotop.md\",\n \"path\": \"/2022-06-10-backtotop\",\n \"toc\": [],\n \"updated\": \"2022-08-01T11:38:16.754Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Contabo OSS + PicGo 图床配置\",\n \"created\": \"2022-05-30T00:00:00.000Z\",\n \"summary\": \"OSS自建图床笔记\",\n \"tags\": [\n \"OSS\"\n ],\n \"slug\": \"/2022-05-30-contabo-oss.md\",\n \"path\": \"/2022-05-30-contabo-oss\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 购买套餐\",\n \"slug\": \"1-购买套餐\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建 Bucket\",\n \"slug\": \"2-创建-bucket\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 安装 PicGo 插件\",\n \"slug\": \"3-安装-picgo-插件\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 配置插件\",\n \"slug\": \"4-配置插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"应用密钥 ID 和 应用密钥\",\n \"slug\": \"应用密钥-id-和-应用密钥\"\n },\n {\n \"depth\": 3,\n \"title\": \"桶 / 自定义节点 /自定义域名\",\n \"slug\": \"桶--自定义节点-自定义域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他设置\",\n \"slug\": \"其他设置\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 其他\",\n \"slug\": \"5-其他\"\n },\n {\n \"depth\": 3,\n \"title\": \"Obsidian 中的图床设置\",\n \"slug\": \"obsidian-中的图床设置\"\n },\n {\n \"depth\": 3,\n \"title\": \"更多 PicGO 插件：\",\n \"slug\": \"更多-picgo-插件\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"为博客写一个Project showcase 页面\",\n \"created\": \"2022-05-26T00:00:00.000Z\",\n \"summary\": \"第一次Pull Request的经历\",\n \"tags\": [\n \"Svelte\",\n \"Open Source\"\n ],\n \"slug\": \"/2022-05-26-write-a-page-template.md\",\n \"path\": \"/2022-05-26-write-a-page-template\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 分析需求\",\n \"slug\": \"1-分析需求\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 画原型图\",\n \"slug\": \"2-画原型图\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建组件样式 CSS\",\n \"slug\": \"2-创建组件样式-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 编写组件代码\",\n \"slug\": \"4-编写组件代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"组件\",\n \"slug\": \"组件\"\n },\n {\n \"depth\": 3,\n \"title\": \"页面\",\n \"slug\": \"页面\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应式布局\",\n \"slug\": \"响应式布局\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 测试\",\n \"slug\": \"5-测试\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. Pull request 到 Github\",\n \"slug\": \"6-pull-request-到-github\"\n },\n {\n \"depth\": 2,\n \"title\": \"7. Last but not least\",\n \"slug\": \"7-last-but-not-least\"\n }\n ],\n \"updated\": \"2022-08-01T11:36:42.589Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Git · 常用操作笔记\",\n \"created\": \"2022-05-25T00:00:00.000Z\",\n \"summary\": \"每次更新博客进行的操作以及常见错误处理\",\n \"tags\": [\n \"Git\"\n ],\n \"slug\": \"/2022-05-25-git.md\",\n \"path\": \"/2022-05-25-git\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"每次更新博客进行的操作\",\n \"slug\": \"每次更新博客进行的操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 追踪所有文件\",\n \"slug\": \"1-追踪所有文件\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 提交上传信息\",\n \"slug\": \"2-提交上传信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. push 到 Github\",\n \"slug\": \"3-push-到-github\"\n },\n {\n \"depth\": 2,\n \"title\": \"常用 Git 操作\",\n \"slug\": \"常用-git-操作\"\n },\n {\n \"depth\": 2,\n \"title\": \"常见问题\",\n \"slug\": \"常见问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"版本回滚\",\n \"slug\": \"版本回滚\"\n },\n {\n \"depth\": 3,\n \"title\": \"报错处理\",\n \"slug\": \"报错处理\"\n },\n {\n \"depth\": 3,\n \"title\": \"博客相关\",\n \"slug\": \"博客相关\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.322Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Hypothesis 使用小记\",\n \"created\": \"2022-05-25T00:00:00.000Z\",\n \"summary\": \"Hypothesis同步到Obsidian / Logseq的方法\",\n \"tags\": [\n \"Logseq\",\n \"Obsidian\"\n ],\n \"slug\": \"/2022-05-25-hypothesis/index.md\",\n \"path\": \"/2022-05-25-hypothesis\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"同步到 Logseq\",\n \"slug\": \"同步到-logseq\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 打开插件系统开关\",\n \"slug\": \"1-打开插件系统开关\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 安装 Hypothesis 插件\",\n \"slug\": \"2-安装-hypothesis-插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 获取 API Token\",\n \"slug\": \"3-获取-api-token\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 同步笔记\",\n \"slug\": \"4-同步笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"5. 修改笔记模板\",\n \"slug\": \"5-修改笔记模板\"\n },\n {\n \"depth\": 2,\n \"title\": \"同步到 Obsidian\",\n \"slug\": \"同步到-obsidian\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 安装 Hypothesis 插件\",\n \"slug\": \"1-安装-hypothesis-插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. API 配置\",\n \"slug\": \"2-api-配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 笔记模板配置\",\n \"slug\": \"3-笔记模板配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 更新笔记\",\n \"slug\": \"4-更新笔记\"\n },\n {\n \"depth\": 2,\n \"title\": \"订阅 Hypothesis 的 RSS\",\n \"slug\": \"订阅-hypothesis-的-rss\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他参考\",\n \"slug\": \"其他参考\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"SQL · 在 Windows 10 上安装 sqlite\",\n \"created\": \"2022-05-23T00:00:00.000Z\",\n \"summary\": \"写给计算机小白的 sqlite 安装笔记\",\n \"tags\": [\n \"SQL\"\n ],\n \"slug\": \"/2022-05-23-win-sql/index.md\",\n \"path\": \"/2022-05-23-win-sql\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 下载二进制文件\",\n \"slug\": \"1-下载二进制文件\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建安装文件夹\",\n \"slug\": \"2-创建安装文件夹\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 添加环境变量\",\n \"slug\": \"3-添加环境变量\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 命令提示符中查看 sqlite3 版本\",\n \"slug\": \"4-命令提示符中查看-sqlite3-版本\"\n },\n {\n \"depth\": 2,\n \"title\": \"常用命令行\",\n \"slug\": \"常用命令行\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.303Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 数组中的copyWithin方法\",\n \"created\": \"2022-05-08T17:13:47.671Z\",\n \"summary\": \"一种数组内元素复制的方法\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-05-09T02:27:47.533Z\",\n \"slug\": \"/2022-05-09-copywithin/index.md\",\n \"path\": \"/2022-05-09-copywithin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"简介\",\n \"slug\": \"简介\"\n },\n {\n \"depth\": 3,\n \"title\": \"语法：\",\n \"slug\": \"语法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参数\",\n \"slug\": \"参数\"\n },\n {\n \"depth\": 3,\n \"title\": \"target\",\n \"slug\": \"target\"\n },\n {\n \"depth\": 3,\n \"title\": \"start\",\n \"slug\": \"start\"\n },\n {\n \"depth\": 3,\n \"title\": \"end\",\n \"slug\": \"end\"\n },\n {\n \"depth\": 2,\n \"title\": \"例子\",\n \"slug\": \"例子\"\n },\n {\n \"depth\": 3,\n \"title\": \"源码\",\n \"slug\": \"源码\"\n },\n {\n \"depth\": 3,\n \"title\": \"可视化\",\n \"slug\": \"可视化\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.294Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS 安全初始化\",\n \"created\": \"2022-05-06T00:00:00.000Z\",\n \"summary\": \"上次 VPS 被别人暴力破解了，一哭二闹三重装之后，有了本文\",\n \"tags\": [\n \"VPS\",\n \"Self hosted\"\n ],\n \"slug\": \"/2022-05-07-vps-init.md\",\n \"path\": \"/2022-05-07-vps-init\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"思路\",\n \"slug\": \"思路\"\n },\n {\n \"depth\": 3,\n \"title\": \"日常防护\",\n \"slug\": \"日常防护\"\n },\n {\n \"depth\": 3,\n \"title\": \"安全检查\",\n \"slug\": \"安全检查\"\n },\n {\n \"depth\": 2,\n \"title\": \"1. 创建新用户\",\n \"slug\": \"1-创建新用户\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 配置 SSH-keys\",\n \"slug\": \"2-配置-ssh-keys\"\n },\n {\n \"depth\": 3,\n \"title\": \"本地生成 SSH 密钥对\",\n \"slug\": \"本地生成-ssh-密钥对\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装公钥\",\n \"slug\": \"安装公钥\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改权限\",\n \"slug\": \"修改权限\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改 sshd 配置文件\",\n \"slug\": \"修改-sshd-配置文件\"\n },\n {\n \"depth\": 3,\n \"title\": \"禁用密码登陆和改端口\",\n \"slug\": \"禁用密码登陆和改端口\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改默认登陆端口\",\n \"slug\": \"修改默认登陆端口\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 安装 ClamAV\",\n \"slug\": \"3-安装-clamav\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装\",\n \"slug\": \"安装\"\n },\n {\n \"depth\": 3,\n \"title\": \"更新病毒数据库\",\n \"slug\": \"更新病毒数据库\"\n },\n {\n \"depth\": 3,\n \"title\": \"开机启动\",\n \"slug\": \"开机启动\"\n },\n {\n \"depth\": 3,\n \"title\": \"下载 ClamAV 数据库\",\n \"slug\": \"下载-clamav-数据库\"\n },\n {\n \"depth\": 3,\n \"title\": \"限制 Clamscan CPU 使用率\",\n \"slug\": \"限制-clamscan-cpu-使用率\"\n },\n {\n \"depth\": 3,\n \"title\": \"常见 CLI\",\n \"slug\": \"常见-cli\"\n },\n {\n \"depth\": 3,\n \"title\": \"ClamAV 返回码\",\n \"slug\": \"clamav-返回码\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 安装 Fail2ban\",\n \"slug\": \"4-安装-fail2ban\"\n },\n {\n \"depth\": 3,\n \"title\": \"准备\",\n \"slug\": \"准备\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装\",\n \"slug\": \"安装-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改配置：\",\n \"slug\": \"修改配置\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. SSL 证书相关\",\n \"slug\": \"5-ssl-证书相关\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.291Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"About\",\n \"created\": \"2022-05-06T00:00:00.000Z\",\n \"updated\": \"2022-05-06T00:00:00.000Z\",\n \"flags\": [\n \"unlisted\"\n ],\n \"lastmod\": \"2022-05-20T04:07:08.760Z\",\n \"slug\": \"/about/index.svelte.md\",\n \"path\": \"/about\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"写码进度\",\n \"slug\": \"写码进度\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他站点\",\n \"slug\": \"其他站点\"\n },\n {\n \"depth\": 3,\n \"title\": \"博客日志\",\n \"slug\": \"博客日志\"\n }\n ],\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 解决 Chrome 中小于12px的字体不显示的问题\",\n \"lastmod\": \"2022-04-07T07:36:23.629Z\",\n \"summary\": \"先用scale总体缩小再补上减少的宽度\",\n \"created\": \"2022-03-29T13:46:29.228Z\",\n \"tags\": [\n \"CSS\",\n \"CSS Trick\"\n ],\n \"categories\": [\n \"CSS\"\n ],\n \"toc\": false,\n \"slug\": \"/2022-03-29-12px.md\",\n \"path\": \"/2022-03-29-12px\",\n \"updated\": \"2022-08-06T10:50:25.374Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Miniflux · 保存文章到 Pocket 以及 RSS\",\n \"summary\": \"将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源\",\n \"created\": \"2022-03-10T16:24:38.663Z\",\n \"preview\": \"\",\n \"draft\": \"\",\n \"tags\": [\n \"RSS\",\n \"Miniflux\"\n ],\n \"changelogs\": [\n {\n \"tag\": \"202203011\",\n \"summary\": [\n \"添加了`instapaper`的连接方式\",\n \"添加了Pocket按钮嵌入方式\"\n ]\n }\n ],\n \"lastmod\": \"2022-04-07T07:38:52.406Z\",\n \"slug\": \"/2022-03-11-miniflux-to-pocket.md\",\n \"path\": \"/2022-03-11-miniflux-to-pocket\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 创建 Pocket Application\",\n \"slug\": \"1-创建-pocket-application\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 获取 Consumer Key 用户密钥\",\n \"slug\": \"2-获取-consumer-key-用户密钥\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 获取 Access Token 访问密钥\",\n \"slug\": \"3-获取-access-token-访问密钥\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.为博客添加 Pocket 收藏按钮\",\n \"slug\": \"1为博客添加-pocket-收藏按钮\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.用 Fever 同步到 Reeder\",\n \"slug\": \"2用-fever-同步到-reeder\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.连接到 Instapaper\",\n \"slug\": \"3连接到-instapaper\"\n },\n {\n \"depth\": 2,\n \"title\": \"RSS 相关内容\",\n \"slug\": \"rss-相关内容\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. Miniflux 搭建\",\n \"slug\": \"1-miniflux-搭建\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 其他选择\",\n \"slug\": \"2-其他选择\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. RSS 生成\",\n \"slug\": \"3-rss-生成\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 看什么\",\n \"slug\": \"4-看什么\"\n },\n {\n \"depth\": 4,\n \"title\": \"5. 关于 RSS\",\n \"slug\": \"5-关于-rss\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:23.859Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Forty页面仿写\",\n \"summary\": \"完成 HTML、CSS 代码编写，暂无 JavaScript\",\n \"created\": \"2022-03-10T08:38:17.227Z\",\n \"preview\": \"\",\n \"draft\": \"\",\n \"tags\": [\n \"CSS\",\n \"HTML\"\n ],\n \"lastmod\": \"2022-04-07T07:39:48.473Z\",\n \"slug\": \"/2022-03-10-forty.md\",\n \"path\": \"/2022-03-10-forty\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"示例图\",\n \"slug\": \"示例图\"\n },\n {\n \"depth\": 2,\n \"title\": \"Demo\",\n \"slug\": \"demo\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:23.374Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Tab选项卡\",\n \"summary\": \"一个纯 CSS 实现的 Tab 选项卡\",\n \"created\": \"2022-03-09T07:42:25.299Z\",\n \"tags\": [\n \"CSS\"\n ],\n \"categories\": [\n \"CSS\"\n ],\n \"lastmod\": \"2022-04-07T07:40:02.371Z\",\n \"slug\": \"/2022-03-09-css-tab.md\",\n \"path\": \"/2022-03-09-css-tab\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"原理\",\n \"slug\": \"原理\"\n },\n {\n \"depth\": 2,\n \"title\": \"代码\",\n \"slug\": \"代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 3,\n \"title\": \"CSS\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:54.161Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 打字机效果生成器\",\n \"summary\": \"用 JavaScript 实现网页打字机效果\",\n \"created\": \"2022-03-08T16:19:05.137Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:40:27.758Z\",\n \"slug\": \"/2022-03-09-typewriter.md\",\n \"path\": \"/2022-03-09-typewriter\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:29.470Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · Caesar Cipher 凯撒加密\",\n \"summary\": \"用JavaScrpit编码实现凯撒加密算法\",\n \"created\": \"2022-03-08T16:01:08.850Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:20:47.694Z\",\n \"slug\": \"/2022-03-09-caesar-cipher.md\",\n \"path\": \"/2022-03-09-caesar-cipher\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 3,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 3,\n \"title\": \"JS\",\n \"slug\": \"js\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:48.659Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 字符串去重\",\n \"summary\": \"编码实现字符串去重\",\n \"created\": \"2022-03-07T13:55:21.090Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:20:30.550Z\",\n \"slug\": \"/2022-03-07-filter.md\",\n \"path\": \"/2022-03-07-filter\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他解法\",\n \"slug\": \"其他解法\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:50.151Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Obsidian · 网课学习笔记整理\",\n \"summary\": \"拆分整合的过程\",\n \"created\": \"2022-03-06T16:23:33.118Z\",\n \"tags\": [\n \"Obsidian\"\n ],\n \"categories\": [\n \"Obsidian\"\n ],\n \"lastmod\": \"2022-04-07T07:20:39.933Z\",\n \"slug\": \"/2022-03-07-obsidian-notes1.md\",\n \"path\": \"/2022-03-07-obsidian-notes1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"具体的方法\",\n \"slug\": \"具体的方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step1-构建地图\",\n \"slug\": \"step1-构建地图\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step2-写课堂笔记\",\n \"slug\": \"step2-写课堂笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step3-重组笔记\",\n \"slug\": \"step3-重组笔记\"\n },\n {\n \"depth\": 4,\n \"title\": \"布局\",\n \"slug\": \"布局\"\n },\n {\n \"depth\": 4,\n \"title\": \"结构编辑\",\n \"slug\": \"结构编辑\"\n },\n {\n \"depth\": 4,\n \"title\": \"拆分笔记\",\n \"slug\": \"拆分笔记\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:46.655Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Airtable · 网页剪藏\",\n \"summary\": \"Airtable Web Cilpper设置\",\n \"created\": \"2022-03-06T05:58:29.026Z\",\n \"categories\": [\n \"实用技巧\"\n ],\n \"tags\": [\n \"实用技巧\"\n ],\n \"lastmod\": \"2022-04-16T12:54:20.049Z\",\n \"slug\": \"/2022-03-06-airtable.md\",\n \"path\": \"/2022-03-06-airtable\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"书签这回事\",\n \"slug\": \"书签这回事\"\n },\n {\n \"depth\": 2,\n \"title\": \"关于 Airtable\",\n \"slug\": \"关于-airtable\"\n },\n {\n \"depth\": 2,\n \"title\": \"怎么用 Airtable 剪切网页\",\n \"slug\": \"怎么用-airtable-剪切网页\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 创建表格\",\n \"slug\": \"1-创建表格\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 创建 app\",\n \"slug\": \"2-创建-app\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 配置剪切设置\",\n \"slug\": \"3-配置剪切设置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. Web Clipper 剪切\",\n \"slug\": \"4-web-clipper-剪切\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:42.370Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 十进制数转二进制\",\n \"summary\": \"用JavaScript将十进制数转二进制数\",\n \"created\": \"2022-03-04T14:57:48.683Z\",\n \"draft\": \"\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-16T12:54:16.167Z\",\n \"type\": \"article\",\n \"slug\": \"/2022-03-04-decbin.md\",\n \"path\": \"/2022-03-04-decbin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 3,\n \"title\": \"Task1\",\n \"slug\": \"task1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Task2\",\n \"slug\": \"task2\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:40.572Z\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 判断水仙花数\",\n \"summary\": \"用JavaScript判断水仙花数\",\n \"created\": \"2022-03-03T15:07:14.533Z\",\n \"categories\": [\n \"JavaScript\"\n ],\n \"tags\": [\n \"JavaScript\"\n ],\n \"slug\": \"/2022-03-03.md\",\n \"lastmod\": \"2022-04-07T07:20:02.340Z\",\n \"path\": \"/2022-03-03\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:38.994Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"自建网页书签Flare\",\n \"created\": \"2022-02-20T14:04:17.000Z\",\n \"tags\": [\n \"Docker\",\n \"Self-hosted\"\n ],\n \"slug\": \"/flare.md\",\n \"summary\": \"通过Docker自建网页书签Flare\",\n \"lastmod\": \"2022-03-30T02:19:33.711Z\",\n \"path\": \"/flare\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"1.创建 Flare 文件夹\",\n \"slug\": \"1创建-flare-文件夹\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.下载包含示例的代码\",\n \"slug\": \"2下载包含示例的代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.运行容器\",\n \"slug\": \"3运行容器\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 1：直接启动\",\n \"slug\": \"方法-1直接启动\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 2：通过 docker composer\",\n \"slug\": \"方法-2通过-docker-composer\"\n },\n {\n \"depth\": 3,\n \"title\": \"4.修改书签内容\",\n \"slug\": \"4修改书签内容\"\n },\n {\n \"depth\": 3,\n \"title\": \"5.用 nginx 反代和设置域名\",\n \"slug\": \"5用-nginx-反代和设置域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"6.SSL 证书和其他书签\",\n \"slug\": \"6ssl-证书和其他书签\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:53.655Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"用 docker 安装 Halo 博客\",\n \"created\": \"2022-02-16T14:04:17.000Z\",\n \"tags\": [\n \"Docker\",\n \"Self-hosted\"\n ],\n \"slug\": \"/halo.md\",\n \"summary\": \"\",\n \"lastmod\": \"2022-05-07T05:39:19.169Z\",\n \"path\": \"/halo\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"准备\",\n \"slug\": \"准备\"\n },\n {\n \"depth\": 3,\n \"title\": \"解析域名\",\n \"slug\": \"解析域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装 docker\",\n \"slug\": \"安装-docker\"\n },\n {\n \"depth\": 3,\n \"title\": \"检查端口开放情况\",\n \"slug\": \"检查端口开放情况\"\n },\n {\n \"depth\": 2,\n \"title\": \"安装 Halo\",\n \"slug\": \"安装-halo\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.创建工作目录\",\n \"slug\": \"1创建工作目录\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.下载示例配置文件到工作目录\",\n \"slug\": \"2下载示例配置文件到工作目录\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 编辑配置文件，配置数据库或者端口\",\n \"slug\": \"3-编辑配置文件配置数据库或者端口\"\n },\n {\n \"depth\": 4,\n \"title\": \"打开配置文件 application.yaml\",\n \"slug\": \"打开配置文件-applicationyaml\"\n },\n {\n \"depth\": 4,\n \"title\": \"修改配置\",\n \"slug\": \"修改配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 拉取最新的 Halo 镜像\",\n \"slug\": \"4-拉取最新的-halo-镜像\"\n },\n {\n \"depth\": 3,\n \"title\": \"5. 创建容器\",\n \"slug\": \"5-创建容器\"\n },\n {\n \"depth\": 3,\n \"title\": \"6. 打开安装引导界面。\",\n \"slug\": \"6-打开安装引导界面\"\n },\n {\n \"depth\": 2,\n \"title\": \"用 Nginx 反代\",\n \"slug\": \"用-nginx-反代\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.安装 Nginx\",\n \"slug\": \"1安装-nginx\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.配置 halo.conf\",\n \"slug\": \"2配置-haloconf\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.重启 nginx\",\n \"slug\": \"3重启-nginx\"\n },\n {\n \"depth\": 2,\n \"title\": \"安装 certbot，为域名获取免费 SSL 证书\",\n \"slug\": \"安装-certbot为域名获取免费-ssl-证书\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.安装 certbot\",\n \"slug\": \"1安装-certbot\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.配置证书\",\n \"slug\": \"2配置证书\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:49.221Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VS Code 技巧合集\",\n \"tags\": [\n \"实用技巧\"\n ],\n \"categories\": [\n \"实用技巧\"\n ],\n \"slug\": \"/vscode.md\",\n \"summary\": \"字体/插件/设置……\",\n \"created\": \"2022-01-27T13:40:28.920Z\",\n \"lastmod\": \"2022-03-30T02:20:34.584Z\",\n \"path\": \"/vscode\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关闭 VS Code 中的 popup 面板\",\n \"slug\": \"关闭-vs-code-中的-popup-面板\"\n },\n {\n \"depth\": 2,\n \"title\": \"修改字体\",\n \"slug\": \"修改字体\"\n },\n {\n \"depth\": 2,\n \"title\": \"快捷键\",\n \"slug\": \"快捷键\"\n },\n {\n \"depth\": 2,\n \"title\": \"插件\",\n \"slug\": \"插件\"\n },\n {\n \"depth\": 2,\n \"title\": \"设置\",\n \"slug\": \"设置\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:29.477Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"两种免费发布Axure原型的方式\",\n \"created\": \"2022-01-21T00:11:17.000Z\",\n \"tags\": [\n \"实用技巧\"\n ],\n \"slug\": \"/axure.md\",\n \"summary\": \"通过Netlify和Vercel发布\",\n \"lastmod\": \"2022-04-07T07:24:20.692Z\",\n \"path\": \"/axure\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Netlify\",\n \"slug\": \"netlify\"\n },\n {\n \"depth\": 2,\n \"title\": \"Vercel +Github\",\n \"slug\": \"vercel-github\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:25.527Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Argon主题的CSS修改\",\n \"created\": \"2022-01-16T14:04:17.000Z\",\n \"tags\": [\n \"CSS\"\n ],\n \"slug\": \"/argon.md\",\n \"summary\": \"基于最近所学，对当前Argon主题做了一些微小的调整\",\n \"lastmod\": \"2022-05-07T05:30:35.639Z\",\n \"path\": \"/argon\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:50:02.849Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · hover时图片放大的动效\",\n \"created\": \"2022-01-13T16:03:47.000Z\",\n \"slug\": \"/hover.md\",\n \"tags\": [\n \"CSS Trick\",\n \"CSS\"\n ],\n \"summary\": \"通过transform设置\",\n \"lastmod\": \"2022-05-07T05:30:52.029Z\",\n \"path\": \"/hover\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:49:47.292Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 三种布局方式\",\n \"slug\": \"/css-layout.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:07:00.000Z\",\n \"summary\": \"Float / Flexbox / Grid /\",\n \"lastmod\": \"2022-05-07T05:30:20.613Z\",\n \"path\": \"/css-layout\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Overview\",\n \"slug\": \"overview\"\n },\n {\n \"depth\": 2,\n \"title\": \"Box-sizing\",\n \"slug\": \"box-sizing\"\n },\n {\n \"depth\": 3,\n \"title\": \"reset\",\n \"slug\": \"reset\"\n },\n {\n \"depth\": 2,\n \"title\": \"Float Layout\",\n \"slug\": \"float-layout\"\n },\n {\n \"depth\": 3,\n \"title\": \"left\",\n \"slug\": \"left\"\n },\n {\n \"depth\": 3,\n \"title\": \"right\",\n \"slug\": \"right\"\n },\n {\n \"depth\": 3,\n \"title\": \"ABSOLUTE POSITIONING VS. FLOATS\",\n \"slug\": \"absolute-positioning-vs-floats\"\n },\n {\n \"depth\": 3,\n \"title\": \"Clear Float\",\n \"slug\": \"clear-float\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 1: empty div\",\n \"slug\": \"方法-1-empty-div\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 2:clearfix hack\",\n \"slug\": \"方法-2clearfix-hack\"\n },\n {\n \"depth\": 2,\n \"title\": \"Flexbox\",\n \"slug\": \"flexbox\"\n },\n {\n \"depth\": 3,\n \"title\": \"Flex container\",\n \"slug\": \"flex-container\"\n },\n {\n \"depth\": 3,\n \"title\": \"Flex items\",\n \"slug\": \"flex-items\"\n },\n {\n \"depth\": 3,\n \"title\": \"Propetities\",\n \"slug\": \"propetities\"\n },\n {\n \"depth\": 4,\n \"title\": \"order\",\n \"slug\": \"order\"\n },\n {\n \"depth\": 4,\n \"title\": \"flex-grow\",\n \"slug\": \"flex-grow\"\n },\n {\n \"depth\": 4,\n \"title\": \"flex-basis\",\n \"slug\": \"flex-basis\"\n },\n {\n \"depth\": 4,\n \"title\": \"shorthand\",\n \"slug\": \"shorthand\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS Grid\",\n \"slug\": \"css-grid\"\n },\n {\n \"depth\": 3,\n \"title\": \"grid container\",\n \"slug\": \"grid-container\"\n },\n {\n \"depth\": 4,\n \"title\": \"Gap\",\n \"slug\": \"gap\"\n },\n {\n \"depth\": 4,\n \"title\": \"align tracks inside containers\",\n \"slug\": \"align-tracks-inside-containers\"\n },\n {\n \"depth\": 3,\n \"title\": \"grid items\",\n \"slug\": \"grid-items\"\n },\n {\n \"depth\": 4,\n \"title\": \"align items inside cells\",\n \"slug\": \"align-items-inside-cells\"\n },\n {\n \"depth\": 3,\n \"title\": \"fr\",\n \"slug\": \"fr\"\n },\n {\n \"depth\": 3,\n \"title\": \"implicit row\",\n \"slug\": \"implicit-row\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:54.807Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Add margin to buttons\",\n \"slug\": \"/margin.md\",\n \"tags\": [\n \"CSS Trick\",\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:04:21.000Z\",\n \"summary\": \"用helper class为单个按钮加margin，防止元素复用时产生不必要的margin\",\n \"lastmod\": \"2022-05-07T05:32:49.156Z\",\n \"path\": \"/margin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 2,\n \"title\": \"为按钮增加内边距\",\n \"slug\": \"为按钮增加内边距\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:40.186Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Reusable Grid\",\n \"slug\": \"/grid.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:01:44.000Z\",\n \"summary\": \"可复用的CSS Grid设置\",\n \"lastmod\": \"2022-05-07T05:32:52.372Z\",\n \"path\": \"/grid\",\n \"toc\": [\n {\n \"depth\": 4,\n \"title\": \"CSS:\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 4,\n \"title\": \"HTML:\",\n \"slug\": \"html\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:51.803Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Rem in CSS\",\n \"slug\": \"/rem-css.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-12T09:50:27.000Z\",\n \"summary\": \"CSS中的Rem是什么\",\n \"lastmod\": \"2022-05-07T05:32:42.708Z\",\n \"path\": \"/rem-css\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. set px\",\n \"slug\": \"1-set-px\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. percentage\",\n \"slug\": \"2-percentage\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:34.711Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"翻译 · Material Design3\",\n \"created\": \"2022-01-03T13:02:17.000Z\",\n \"tags\": [\n \"翻译\"\n ],\n \"categories\": [\n \"翻译\"\n ],\n \"slug\": \"/material.md\",\n \"summary\": \"部分翻译内容\",\n \"lastmod\": \"2022-05-07T05:30:39.510Z\",\n \"path\": \"/material\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:49:37.342Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 战略层（产品目标和用户需求）\",\n \"created\": \"2022-01-02T13:08:29.000Z\",\n \"categories\": [\n \"UX学习笔记\"\n ],\n \"tags\": [\n \"《用户体验要素》\",\n \"读书笔记\"\n ],\n \"summary\": \"第三章笔记\",\n \"lastmod\": \"2022-05-07T05:33:16.860Z\",\n \"slug\": \"/用户体验要素3.md\",\n \"path\": \"/用户体验要素3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"产品目标\",\n \"slug\": \"产品目标\"\n },\n {\n \"depth\": 2,\n \"title\": \"用户需求\",\n \"slug\": \"用户需求\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户细分( user segmentation）\",\n \"slug\": \"用户细分-user-segmentation\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户研究(User Research）\",\n \"slug\": \"用户研究user-research\"\n },\n {\n \"depth\": 2,\n \"title\": \"团队角色和流程\",\n \"slug\": \"团队角色和流程\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:03.925Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 基础笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"slug\": \"/css-fundamental.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"lastmod\": \"2022-05-07T05:30:27.910Z\",\n \"path\": \"/css-fundamental\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"css 是什么\",\n \"slug\": \"css-是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"分类\",\n \"slug\": \"分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"inline CSS\",\n \"slug\": \"inline-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"internal CSS\",\n \"slug\": \"internal-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"external CSS\",\n \"slug\": \"external-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"组成\",\n \"slug\": \"组成\"\n },\n {\n \"depth\": 2,\n \"title\": \"Selectors\",\n \"slug\": \"selectors\"\n },\n {\n \"depth\": 3,\n \"title\": \"descendent selector\",\n \"slug\": \"descendent-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"line selector\",\n \"slug\": \"line-selector\"\n },\n {\n \"depth\": 2,\n \"title\": \"id\",\n \"slug\": \"id\"\n },\n {\n \"depth\": 3,\n \"title\": \"class attributes\",\n \"slug\": \"class-attributes\"\n },\n {\n \"depth\": 3,\n \"title\": \"universal selector\",\n \"slug\": \"universal-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"body\",\n \"slug\": \"body\"\n },\n {\n \"depth\": 3,\n \"title\": \"优先级\",\n \"slug\": \"优先级\"\n },\n {\n \"depth\": 4,\n \"title\": \"conflicting between selectors\",\n \"slug\": \"conflicting-between-selectors\"\n },\n {\n \"depth\": 4,\n \"title\": \"inheritance\",\n \"slug\": \"inheritance\"\n },\n {\n \"depth\": 2,\n \"title\": \"颜色\",\n \"slug\": \"颜色\"\n },\n {\n \"depth\": 3,\n \"title\": \"RGB/RGBA\",\n \"slug\": \"rgbrgba\"\n },\n {\n \"depth\": 2,\n \"title\": \"Hexadecimal Colors\",\n \"slug\": \"hexadecimal-colors\"\n },\n {\n \"depth\": 2,\n \"title\": \"Pseudo Class\",\n \"slug\": \"pseudo-class\"\n },\n {\n \"depth\": 3,\n \"title\": \"第一个元素/最后一个元素\",\n \"slug\": \"第一个元素最后一个元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"奇数/偶数 /特定次序\",\n \"slug\": \"奇数偶数-特定次序\"\n },\n {\n \"depth\": 3,\n \"title\": \"多种元素时\",\n \"slug\": \"多种元素时\"\n },\n {\n \"depth\": 3,\n \"title\": \"Style hyperlinks\",\n \"slug\": \"style-hyperlinks\"\n },\n {\n \"depth\": 4,\n \"title\": \"link\",\n \"slug\": \"link\"\n },\n {\n \"depth\": 4,\n \"title\": \"visited\",\n \"slug\": \"visited\"\n },\n {\n \"depth\": 4,\n \"title\": \"hover\",\n \"slug\": \"hover\"\n },\n {\n \"depth\": 4,\n \"title\": \"active\",\n \"slug\": \"active\"\n },\n {\n \"depth\": 2,\n \"title\": \"Pseudo Elements\",\n \"slug\": \"pseudo-elements\"\n },\n {\n \"depth\": 3,\n \"title\": \"adjacent sibiling selector\",\n \"slug\": \"adjacent-sibiling-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"after\",\n \"slug\": \"after\"\n },\n {\n \"depth\": 3,\n \"title\": \"before\",\n \"slug\": \"before\"\n },\n {\n \"depth\": 2,\n \"title\": \"Box Model\",\n \"slug\": \"box-model\"\n },\n {\n \"depth\": 3,\n \"title\": \"Type of boxes:\",\n \"slug\": \"type-of-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"inline boxes\",\n \"slug\": \"inline-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"block-level boxes\",\n \"slug\": \"block-level-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"inline-block boxes\",\n \"slug\": \"inline-block-boxes\"\n },\n {\n \"depth\": 3,\n \"title\": \"padding\",\n \"slug\": \"padding\"\n },\n {\n \"depth\": 4,\n \"title\": \"reset margin ane padding\",\n \"slug\": \"reset-margin-ane-padding\"\n },\n {\n \"depth\": 3,\n \"title\": \"margin\",\n \"slug\": \"margin\"\n },\n {\n \"depth\": 4,\n \"title\": \"collapsing margins\",\n \"slug\": \"collapsing-margins\"\n },\n {\n \"depth\": 3,\n \"title\": \"Dimensions\",\n \"slug\": \"dimensions\"\n },\n {\n \"depth\": 4,\n \"title\": \"width\",\n \"slug\": \"width\"\n },\n {\n \"depth\": 2,\n \"title\": \"position\",\n \"slug\": \"position\"\n },\n {\n \"depth\": 3,\n \"title\": \"Normal Flow\",\n \"slug\": \"normal-flow\"\n },\n {\n \"depth\": 3,\n \"title\": \"Absolute Position\",\n \"slug\": \"absolute-position\"\n },\n {\n \"depth\": 3,\n \"title\": \"centering page\",\n \"slug\": \"centering-page\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本操作\",\n \"slug\": \"基本操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"CSS 注释\",\n \"slug\": \"css-注释\"\n },\n {\n \"depth\": 3,\n \"title\": \"Fix bugs\",\n \"slug\": \"fix-bugs\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:56.359Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"HTML · 基础笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"slug\": \"/html-basis.md\",\n \"tags\": [\n \"HTML\"\n ],\n \"lastmod\": \"2022-05-07T05:30:47.655Z\",\n \"path\": \"/html-basis\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"HTML 是什么\",\n \"slug\": \"html-是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本组成\",\n \"slug\": \"基本组成\"\n },\n {\n \"depth\": 2,\n \"title\": \"框架\",\n \"slug\": \"框架\"\n },\n {\n \"depth\": 2,\n \"title\": \"attributes\",\n \"slug\": \"attributes\"\n },\n {\n \"depth\": 2,\n \"title\": \"tags\",\n \"slug\": \"tags\"\n },\n {\n \"depth\": 2,\n \"title\": \"HTML entity\",\n \"slug\": \"html-entity\"\n },\n {\n \"depth\": 2,\n \"title\": \"semantic HTML\",\n \"slug\": \"semantic-html\"\n },\n {\n \"depth\": 2,\n \"title\": \"空格\",\n \"slug\": \"空格\"\n },\n {\n \"depth\": 2,\n \"title\": \"当 div 中用 css 设置了图片时\",\n \"slug\": \"当-div-中用-css-设置了图片时\"\n },\n {\n \"depth\": 2,\n \"title\": \"随堂练习\",\n \"slug\": \"随堂练习\"\n },\n {\n \"depth\": 3,\n \"title\": \"商品卡片\",\n \"slug\": \"商品卡片\"\n },\n {\n \"depth\": 3,\n \"title\": \"分页器 pagination\",\n \"slug\": \"分页器-pagination\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:44.906Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 认识这些要素\",\n \"summary\": \"第二章笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"《用户体验要素》\"\n ],\n \"tags\": [\n \"读书笔记\",\n \"《用户体验要素》\"\n ],\n \"hidden\": false,\n \"draft\": false,\n \"slug\": \"/用户体验要素2.md\",\n \"lastmod\": \"2022-04-16T12:55:45.413Z\",\n \"path\": \"/用户体验要素2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"五个层面\",\n \"slug\": \"五个层面\"\n },\n {\n \"depth\": 2,\n \"title\": \"表现层 (surface)\",\n \"slug\": \"表现层-surface\"\n },\n {\n \"depth\": 2,\n \"title\": \"框架层 (skeleton)\",\n \"slug\": \"框架层-skeleton\"\n },\n {\n \"depth\": 2,\n \"title\": \"结构层（structure）\",\n \"slug\": \"结构层structure\"\n },\n {\n \"depth\": 2,\n \"title\": \"范围层 （scope）\",\n \"slug\": \"范围层-scope\"\n },\n {\n \"depth\": 2,\n \"title\": \"战略层 （strategy）\",\n \"slug\": \"战略层-strategy\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何建设这五个层面？\",\n \"slug\": \"如何建设这五个层面\"\n },\n {\n \"depth\": 3,\n \"title\": \"自下而上地建设\",\n \"slug\": \"自下而上地建设\"\n },\n {\n \"depth\": 3,\n \"title\": \"在上一层完成之前开始下一层\",\n \"slug\": \"在上一层完成之前开始下一层\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本的双重性\",\n \"slug\": \"基本的双重性\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是网页基本的双重性质？\",\n \"slug\": \"什么是网页基本的双重性质\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是信息型的媒介类产品？\",\n \"slug\": \"什么是信息型的媒介类产品\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是功能型的平台类产品\",\n \"slug\": \"什么是功能型的平台类产品\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验的基本要素是什么？（五个层次、两种类别的产品）\",\n \"slug\": \"用户体验的基本要素是什么五个层次两种类别的产品\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:05.032Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 用户体验为何如此重要\",\n \"summary\": \"第一章笔记\",\n \"created\": \"2021-11-29T03:06:10.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"《用户体验要素》\"\n ],\n \"tags\": [\n \"读书笔记\",\n \"《用户体验要素》\"\n ],\n \"hidden\": false,\n \"draft\": false,\n \"slug\": \"/用户体验要素1.md\",\n \"lastmod\": \"2022-04-16T12:55:42.468Z\",\n \"path\": \"/用户体验要素1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"什么是用户体验\",\n \"slug\": \"什么是用户体验\"\n },\n {\n \"depth\": 2,\n \"title\": \"为体验而设计：使用第一\",\n \"slug\": \"为体验而设计使用第一\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么小而美的产品,更容易成功？\",\n \"slug\": \"为什么小而美的产品更容易成功\"\n },\n {\n \"depth\": 2,\n \"title\": \"用户体验和商机\",\n \"slug\": \"用户体验和商机\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么在网站上，用户体验比别的产品更重要？\",\n \"slug\": \"为什么在网站上用户体验比别的产品更重要\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么用户体验很重要？有什么作用吗\",\n \"slug\": \"为什么用户体验很重要有什么作用吗\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是转化率？有什么用？\",\n \"slug\": \"什么是转化率有什么用\"\n },\n {\n \"depth\": 3,\n \"title\": \"改善用户体验，是为了什么？通过什么方式达到？\",\n \"slug\": \"改善用户体验是为了什么通过什么方式达到\"\n },\n {\n \"depth\": 2,\n \"title\": \"以用户为中心的设计\",\n \"slug\": \"以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是“以用户为中心”的设计？\",\n \"slug\": \"什么是以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"怎么做？\",\n \"slug\": \"怎么做\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:06.494Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Evaluation\",\n \"summary\": \"Introduction to User Experience Design｜Week5\",\n \"created\": \"2021-11-18T14:09:49.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-18-ux5/index.md\",\n \"path\": \"/2021-11-18-ux5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"评估\",\n \"slug\": \"评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"分类\",\n \"slug\": \"分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"形成性评估\",\n \"slug\": \"形成性评估\"\n },\n {\n \"depth\": 3,\n \"title\": \"总结性评估\",\n \"slug\": \"总结性评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何评估\",\n \"slug\": \"如何评估\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据收集\",\n \"slug\": \"数据收集\"\n },\n {\n \"depth\": 3,\n \"title\": \"衡量\",\n \"slug\": \"衡量\"\n },\n {\n \"depth\": 3,\n \"title\": \"可学习性\",\n \"slug\": \"可学习性\"\n },\n {\n \"depth\": 3,\n \"title\": \"可记忆性\",\n \"slug\": \"可记忆性\"\n },\n {\n \"depth\": 3,\n \"title\": \"主观情感评估\",\n \"slug\": \"主观情感评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n },\n {\n \"depth\": 2,\n \"title\": \"推荐教材\",\n \"slug\": \"推荐教材\"\n },\n {\n \"depth\": 3,\n \"title\": \"Trade Book\",\n \"slug\": \"trade-book\"\n },\n {\n \"depth\": 3,\n \"title\": \"Text Books\",\n \"slug\": \"text-books\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考网站\",\n \"slug\": \"参考网站\"\n }\n ],\n \"updated\": \"2022-08-06T10:47:38.841Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Prototyping\",\n \"summary\": \"Introduction to User Experience Design｜Week4\",\n \"created\": \"2021-11-18T13:26:41.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-18-ux4/index.md\",\n \"path\": \"/2021-11-18-ux4\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关于 Prototyping\",\n \"slug\": \"关于-prototyping\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是原型开发\",\n \"slug\": \"什么是原型开发\"\n },\n {\n \"depth\": 3,\n \"title\": \"原型开发的作用\",\n \"slug\": \"原型开发的作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"水平原型\",\n \"slug\": \"水平原型\"\n },\n {\n \"depth\": 3,\n \"title\": \"垂直原型\",\n \"slug\": \"垂直原型\"\n },\n {\n \"depth\": 2,\n \"title\": \"低保真 Lofi Prototype\",\n \"slug\": \"低保真-lofi-prototype\"\n },\n {\n \"depth\": 3,\n \"title\": \"低保真和高保真的区别\",\n \"slug\": \"低保真和高保真的区别\"\n },\n {\n \"depth\": 3,\n \"title\": \"注意事项\",\n \"slug\": \"注意事项\"\n },\n {\n \"depth\": 3,\n \"title\": \"三种形式\",\n \"slug\": \"三种形式\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 草图\",\n \"slug\": \"1-草图\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 故事版\",\n \"slug\": \"2-故事版\"\n },\n {\n \"depth\": 4,\n \"title\": \"3.卡片原型\",\n \"slug\": \"3卡片原型\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他原型方式\",\n \"slug\": \"其他原型方式\"\n },\n {\n \"depth\": 3,\n \"title\": \"绿野仙踪/奥茨法师\",\n \"slug\": \"绿野仙踪奥茨法师\"\n },\n {\n \"depth\": 3,\n \"title\": \"概念验证视频\",\n \"slug\": \"概念验证视频\"\n },\n {\n \"depth\": 3,\n \"title\": \"隐喻技术\",\n \"slug\": \"隐喻技术\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n },\n {\n \"depth\": 3,\n \"title\": \"Resources and Tools for Protoyping 1\",\n \"slug\": \"resources-and-tools-for-protoyping-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Tools\",\n \"slug\": \"tools\"\n },\n {\n \"depth\": 3,\n \"title\": \"Resources for Prototyping 2\",\n \"slug\": \"resources-for-prototyping-2\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:10.016Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Design Alternatives\",\n \"summary\": \"Introduction to User Experience Design｜Week3\",\n \"created\": \"2021-11-14T03:18:45.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"lastmod\": \"2022-04-16T12:56:27.924Z\",\n \"slug\": \"/2021-11-14-ux3/index.md\",\n \"path\": \"/2021-11-14-ux3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Review of Design Goals 审查设计目标\",\n \"slug\": \"review-of-design-goals-审查设计目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验的核心目标\",\n \"slug\": \"用户体验的核心目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的定义\",\n \"slug\": \"设计的定义\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的目标\",\n \"slug\": \"设计的目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计时，需考虑的三个方面\",\n \"slug\": \"设计时需考虑的三个方面\"\n },\n {\n \"depth\": 2,\n \"title\": \"Design Alternatives 设计替代方案\",\n \"slug\": \"design-alternatives-设计替代方案\"\n },\n {\n \"depth\": 3,\n \"title\": \"目标\",\n \"slug\": \"目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"关键\",\n \"slug\": \"关键\"\n },\n {\n \"depth\": 3,\n \"title\": \"Road map 路线\",\n \"slug\": \"road-map-路线\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:15.281Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Requirement Gathering\",\n \"summary\": \"Introduction to User Experience Design｜Week2\",\n \"created\": \"2021-11-09T14:26:49.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-09-ux2/index.md\",\n \"path\": \"/2021-11-09-ux2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Overview\",\n \"slug\": \"overview\"\n },\n {\n \"depth\": 2,\n \"title\": \"Types of Users and Types of Data\",\n \"slug\": \"types-of-users-and-types-of-data\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据类型\",\n \"slug\": \"数据类型\"\n },\n {\n \"depth\": 4,\n \"title\": \"定量\",\n \"slug\": \"定量\"\n },\n {\n \"depth\": 4,\n \"title\": \"定性\",\n \"slug\": \"定性\"\n },\n {\n \"depth\": 3,\n \"title\": \"将用户视为利益相关者的三个类型\",\n \"slug\": \"将用户视为利益相关者的三个类型\"\n },\n {\n \"depth\": 3,\n \"title\": \"了解利益相关者的意义\",\n \"slug\": \"了解利益相关者的意义\"\n },\n {\n \"depth\": 2,\n \"title\": \"Discovery Technique Overview\",\n \"slug\": \"discovery-technique-overview\"\n },\n {\n \"depth\": 3,\n \"title\": \"四种调研方法\",\n \"slug\": \"四种调研方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"交互程度\",\n \"slug\": \"交互程度\"\n },\n {\n \"depth\": 3,\n \"title\": \"进行的场景\",\n \"slug\": \"进行的场景\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计周期中迭代\",\n \"slug\": \"在设计周期中迭代\"\n },\n {\n \"depth\": 2,\n \"title\": \"Naturalistic Observation 自然观察\",\n \"slug\": \"naturalistic-observation-自然观察\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点\"\n },\n {\n \"depth\": 3,\n \"title\": \"道德局限\",\n \"slug\": \"道德局限\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中\"\n },\n {\n \"depth\": 2,\n \"title\": \"Survey 问卷\",\n \"slug\": \"survey-问卷\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-1\"\n },\n {\n \"depth\": 4,\n \"title\": \"1.定性-封闭性问题\",\n \"slug\": \"1定性-封闭性问题\"\n },\n {\n \"depth\": 4,\n \"title\": \"2.定量-开放性问题\",\n \"slug\": \"2定量-开放性问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Focus group 焦点小组\",\n \"slug\": \"focus-group-焦点小组\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-2\"\n },\n {\n \"depth\": 4,\n \"title\": \"组成\",\n \"slug\": \"组成\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-2\"\n },\n {\n \"depth\": 2,\n \"title\": \"Interviews\",\n \"slug\": \"interviews\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-3\"\n },\n {\n \"depth\": 2,\n \"title\": \"User Results 用户数据处理\",\n \"slug\": \"user-results-用户数据处理\"\n },\n {\n \"depth\": 3,\n \"title\": \"描述性统计信息\",\n \"slug\": \"描述性统计信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户特征表\",\n \"slug\": \"用户特征表\"\n },\n {\n \"depth\": 3,\n \"title\": \"人物画像 Persona\",\n \"slug\": \"人物画像-persona\"\n },\n {\n \"depth\": 2,\n \"title\": \"Presenting Task Findings\",\n \"slug\": \"presenting-task-findings\"\n },\n {\n \"depth\": 3,\n \"title\": \"Scenario\",\n \"slug\": \"scenario\"\n },\n {\n \"depth\": 4,\n \"title\": \"是什么\",\n \"slug\": \"是什么-4\"\n },\n {\n \"depth\": 4,\n \"title\": \"作用\",\n \"slug\": \"作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"Essential Case Study\",\n \"slug\": \"essential-case-study\"\n },\n {\n \"depth\": 4,\n \"title\": \"三个要素\",\n \"slug\": \"三个要素\"\n },\n {\n \"depth\": 3,\n \"title\": \"Hierarchical Task Analysis\",\n \"slug\": \"hierarchical-task-analysis\"\n },\n {\n \"depth\": 3,\n \"title\": \"Current UI Critique\",\n \"slug\": \"current-ui-critique\"\n },\n {\n \"depth\": 4,\n \"title\": \"步骤\",\n \"slug\": \"步骤\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:17.439Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Overview of User Experience Design\",\n \"summary\": \"Introduction to User Experience Design｜Week1\",\n \"created\": \"2021-11-08T02:54:40.000Z\",\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-08-ux1/index.md\",\n \"path\": \"/2021-11-08-ux1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"课程简介\",\n \"slug\": \"课程简介\"\n },\n {\n \"depth\": 2,\n \"title\": \"Week 1 笔记\",\n \"slug\": \"week-1-笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是 ux？\",\n \"slug\": \"什么是-ux\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验设计的核心概念\",\n \"slug\": \"用户体验设计的核心概念\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是用户\",\n \"slug\": \"什么是用户\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是界面\",\n \"slug\": \"什么是界面\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验设计的目标\",\n \"slug\": \"用户体验设计的目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"界面设计环 (四个步骤)\",\n \"slug\": \"界面设计环-四个步骤\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step1：Requirements Gathering 收集需求\",\n \"slug\": \"step1requirements-gathering-收集需求\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 2：Design Alternatives 设计方案\",\n \"slug\": \"step-2design-alternatives-设计方案\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 3：Prototyping 原型\",\n \"slug\": \"step-3prototyping-原型\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 4：Evaluation 评估测试\",\n \"slug\": \"step-4evaluation-评估测试\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么样的界面是“实用”的？\",\n \"slug\": \"什么样的界面是实用的\"\n },\n {\n \"depth\": 3,\n \"title\": \"好设计的三个特征\",\n \"slug\": \"好设计的三个特征\"\n },\n {\n \"depth\": 4,\n \"title\": \"1 - Affordance (示能)\",\n \"slug\": \"1---affordance-示能\"\n },\n {\n \"depth\": 4,\n \"title\": \"2 - Signifiers (意符)\",\n \"slug\": \"2---signifiers-意符\"\n },\n {\n \"depth\": 4,\n \"title\": \"3 - Feedback (反馈)\",\n \"slug\": \"3---feedback-反馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何与“用户”接洽\",\n \"slug\": \"如何与用户接洽\"\n },\n {\n \"depth\": 4,\n \"title\": \"三个步骤\",\n \"slug\": \"三个步骤\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:20.887Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"全球商业化中的设计\",\n \"summary\": \"《设计心理学 1》第七章——本书的总结\",\n \"created\": \"2021-11-03T03:59:18.000Z\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"slug\": \"/设计心理学1-7.md\",\n \"lastmod\": \"2022-04-16T12:55:38.967Z\",\n \"path\": \"/设计心理学1-7\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.竞争压力\",\n \"slug\": \"1竞争压力\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.新技术推动变革\",\n \"slug\": \"2新技术推动变革\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.新产品上市需要多长时间\",\n \"slug\": \"3新产品上市需要多长时间\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.创新的两种形式：渐进式和颠覆式\",\n \"slug\": \"4创新的两种形式渐进式和颠覆式\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 设计心理学：1988 ～ 2038\",\n \"slug\": \"5-设计心理学1988--2038\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.书籍的未来\",\n \"slug\": \"6书籍的未来\"\n },\n {\n \"depth\": 2,\n \"title\": \"7. 设计的道义和责任\",\n \"slug\": \"7-设计的道义和责任\"\n },\n {\n \"depth\": 2,\n \"title\": \"8. 设计思维和思考设计\",\n \"slug\": \"8-设计思维和思考设计\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:07.505Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"设计思维\",\n \"created\": \"2021-11-03T03:49:10.353Z\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"draft\": false,\n \"summary\": \"《设计心理学 1》第六章——设计需要探究问题的来源，而不只是停留在表面\",\n \"lastmod\": \"2022-05-07T05:31:58.650Z\",\n \"slug\": \"/设计心理学1-6.md\",\n \"path\": \"/设计心理学1-6\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 解决正确的问题\",\n \"slug\": \"1-解决正确的问题\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 双钻设计模式\",\n \"slug\": \"2-双钻设计模式\"\n },\n {\n \"depth\": 3,\n \"title\": \"四个步骤（发散->聚焦）\",\n \"slug\": \"四个步骤发散-聚焦\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 以人为本的设计流程\",\n \"slug\": \"3-以人为本的设计流程\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.观察\",\n \"slug\": \"1观察\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 激发创意（构思）\",\n \"slug\": \"2-激发创意构思\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.打样（原型）\",\n \"slug\": \"3打样原型\"\n },\n {\n \"depth\": 4,\n \"title\": \"4.测试\",\n \"slug\": \"4测试\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.我刚告诉你什么？那根本行不通\",\n \"slug\": \"4我刚告诉你什么那根本行不通\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.设计的挑战\",\n \"slug\": \"5设计的挑战\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. 复杂是好事，混乱惹麻烦\",\n \"slug\": \"6-复杂是好事混乱惹麻烦\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.标准化和技术\",\n \"slug\": \"7标准化和技术\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.故意制作困难\",\n \"slug\": \"8故意制作困难\"\n },\n {\n \"depth\": 2,\n \"title\": \"9. 设计：为了人类发展科技\",\n \"slug\": \"9-设计为了人类发展科技\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:08.975Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"人为差错？不，拙劣的设计\",\n \"summary\": \"《设计心理学 1》第五章——设计师经常严重误解人心理的局限性，要求人像机器一样工作\",\n \"created\": \"2021-10-27T12:22:17.000Z\",\n \"math\": \"falase\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"draft\": false,\n \"lastmod\": \"2022-04-16T12:55:20.101Z\",\n \"slug\": \"/设计心理学1-5.md\",\n \"path\": \"/设计心理学1-5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.何以出错\",\n \"slug\": \"1何以出错\"\n },\n {\n \"depth\": 3,\n \"title\": \"出错的原因\",\n \"slug\": \"出错的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"解决错误的方法\",\n \"slug\": \"解决错误的方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错之外：故意犯错\",\n \"slug\": \"差错之外故意犯错\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.差错的两种类型：失误和错误\",\n \"slug\": \"2差错的两种类型失误和错误\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错\",\n \"slug\": \"差错\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错和行动的七个阶段\",\n \"slug\": \"差错和行动的七个阶段\"\n },\n {\n \"depth\": 3,\n \"title\": \"失误\",\n \"slug\": \"失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"行动失误\",\n \"slug\": \"行动失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"1. 撷取性失误\",\n \"slug\": \"1-撷取性失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"2. 描述相似性失误\",\n \"slug\": \"2-描述相似性失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"3. 功能状态失误\",\n \"slug\": \"3-功能状态失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"记忆失误\",\n \"slug\": \"记忆失误\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.错误的分类\",\n \"slug\": \"3错误的分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"错误\",\n \"slug\": \"错误\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 基于规则的错误（违反规则）\",\n \"slug\": \"1-基于规则的错误违反规则\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 基于知识的错误（缺乏知识）\",\n \"slug\": \"2-基于知识的错误缺乏知识\"\n },\n {\n \"depth\": 4,\n \"title\": \"3. 记忆失效的错误\",\n \"slug\": \"3-记忆失效的错误\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.社会和习俗压力\",\n \"slug\": \"4社会和习俗压力\"\n },\n {\n \"depth\": 3,\n \"title\": \"压力\",\n \"slug\": \"压力\"\n },\n {\n \"depth\": 3,\n \"title\": \"检查清单\",\n \"slug\": \"检查清单\"\n },\n {\n \"depth\": 2,\n \"title\": \"5、差错报告\",\n \"slug\": \"5差错报告\"\n },\n {\n \"depth\": 3,\n \"title\": \"自动化（JIDOKA）\",\n \"slug\": \"自动化jidoka\"\n },\n {\n \"depth\": 3,\n \"title\": \"防呆（POKA-YOKE）\",\n \"slug\": \"防呆poka-yoke\"\n },\n {\n \"depth\": 3,\n \"title\": \"航空安全报告体系\",\n \"slug\": \"航空安全报告体系\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.甄别差错\",\n \"slug\": \"6甄别差错\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么甄别差错是困难的\",\n \"slug\": \"为什么甄别差错是困难的\"\n },\n {\n \"depth\": 4,\n \"title\": \"甄别失误\",\n \"slug\": \"甄别失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"甄别错误\",\n \"slug\": \"甄别错误\"\n },\n {\n \"depth\": 4,\n \"title\": \"记忆失效性（失误/错误）\",\n \"slug\": \"记忆失效性失误错误\"\n },\n {\n \"depth\": 3,\n \"title\": \"为错误辩解\",\n \"slug\": \"为错误辩解\"\n },\n {\n \"depth\": 3,\n \"title\": \"事故分析要置身于真实情境\",\n \"slug\": \"事故分析要置身于真实情境\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故发生时\",\n \"slug\": \"事故发生时\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故发生后\",\n \"slug\": \"事故发生后\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故分析应\",\n \"slug\": \"事故分析应\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.为差错设计\",\n \"slug\": \"7为差错设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"基本原则\",\n \"slug\": \"基本原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"记忆中断\",\n \"slug\": \"记忆中断\"\n },\n {\n \"depth\": 3,\n \"title\": \"警示信号存在的问题\",\n \"slug\": \"警示信号存在的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"为差错设计的方法\",\n \"slug\": \"为差错设计的方法\"\n },\n {\n \"depth\": 4,\n \"title\": \"研究差错\",\n \"slug\": \"研究差错\"\n },\n {\n \"depth\": 4,\n \"title\": \"增加约束\",\n \"slug\": \"增加约束\"\n },\n {\n \"depth\": 4,\n \"title\": \"撤销\",\n \"slug\": \"撤销\"\n },\n {\n \"depth\": 4,\n \"title\": \"差错信息确认\",\n \"slug\": \"差错信息确认\"\n },\n {\n \"depth\": 4,\n \"title\": \"合理性检查\",\n \"slug\": \"合理性检查\"\n },\n {\n \"depth\": 4,\n \"title\": \"减小失误\",\n \"slug\": \"减小失误\"\n },\n {\n \"depth\": 3,\n \"title\": \"从差错到事故——瑞士奶酪模型\",\n \"slug\": \"从差错到事故瑞士奶酪模型\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.良好的设计还不够\",\n \"slug\": \"8良好的设计还不够\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.修补回复工程\",\n \"slug\": \"9修补回复工程\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做\"\n },\n {\n \"depth\": 2,\n \"title\": \"10.自动化的悖论\",\n \"slug\": \"10自动化的悖论\"\n },\n {\n \"depth\": 3,\n \"title\": \"故障时结果难以估计\",\n \"slug\": \"故障时结果难以估计\"\n },\n {\n \"depth\": 3,\n \"title\": \"悖论\",\n \"slug\": \"悖论\"\n },\n {\n \"depth\": 2,\n \"title\": \"11.应对差错的设计原则\",\n \"slug\": \"11应对差错的设计原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"人和机器协同应工作\",\n \"slug\": \"人和机器协同应工作\"\n },\n {\n \"depth\": 3,\n \"title\": \"关键设计原则\",\n \"slug\": \"关键设计原则\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:11.112Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"知晓：约束、可视性和反馈\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-22T20:21:44.000Z\",\n \"summary\": \"《设计心理学 1》第四章——遇到一个新的设备或状况，设计师应如何提供重要信息，以便人们知道如何操作\",\n \"lastmod\": \"2022-04-16T12:55:16.673Z\",\n \"slug\": \"/设计心理学1-4.md\",\n \"path\": \"/设计心理学1-4\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"章前\",\n \"slug\": \"章前\"\n },\n {\n \"depth\": 3,\n \"title\": \"外界的知识：\",\n \"slug\": \"外界的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"头脑中的知识\",\n \"slug\": \"头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"1. 四种约束因素：物理、文化、语义和逻辑\",\n \"slug\": \"1-四种约束因素物理文化语义和逻辑\"\n },\n {\n \"depth\": 3,\n \"title\": \"物理约束\",\n \"slug\": \"物理约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"文化约束\",\n \"slug\": \"文化约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"语义约束\",\n \"slug\": \"语义约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"逻辑约束\",\n \"slug\": \"逻辑约束\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 示能、意符和约束在日常用品设计中的应用\",\n \"slug\": \"2-示能意符和约束在日常用品设计中的应用\"\n },\n {\n \"depth\": 3,\n \"title\": \"门的问题\",\n \"slug\": \"门的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"开关的问题\",\n \"slug\": \"开关的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"任务分析\",\n \"slug\": \"任务分析\"\n },\n {\n \"depth\": 3,\n \"title\": \"以用户为中心的设计\",\n \"slug\": \"以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"以活动为中心的控制\",\n \"slug\": \"以活动为中心的控制\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 引导行为的约束力\",\n \"slug\": \"3-引导行为的约束力\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"作用\",\n \"slug\": \"作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"例子\",\n \"slug\": \"例子\"\n },\n {\n \"depth\": 3,\n \"title\": \"三种强制方式\",\n \"slug\": \"三种强制方式\"\n },\n {\n \"depth\": 4,\n \"title\": \"互锁\",\n \"slug\": \"互锁\"\n },\n {\n \"depth\": 4,\n \"title\": \"自锁\",\n \"slug\": \"自锁\"\n },\n {\n \"depth\": 4,\n \"title\": \"反锁\",\n \"slug\": \"反锁\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 惯例、约束和示能\",\n \"slug\": \"4-惯例约束和示能\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 水龙头：关于设计的历史案例\",\n \"slug\": \"5-水龙头关于设计的历史案例\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. 利用声音作为意符\",\n \"slug\": \"6-利用声音作为意符\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么\",\n \"slug\": \"为什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"应提供什么信息：\",\n \"slug\": \"应提供什么信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何提供\",\n \"slug\": \"如何提供\"\n },\n {\n \"depth\": 3,\n \"title\": \"例子\",\n \"slug\": \"例子-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"“拟真”(skeuomorphic)\",\n \"slug\": \"拟真skeuomorphic\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:12.946Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"draft\": false,\n \"title\": \"头脑中的知识和外界知识\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-20T17:08:47.371Z\",\n \"summary\": \"《设计心理学 1》第三章——并非精确行为需要的所有知识都得储存在头脑里\",\n \"lastmod\": \"2022-04-16T12:55:13.235Z\",\n \"slug\": \"/设计心理学1-3.md\",\n \"path\": \"/设计心理学1-3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 含糊的知识引导精确的行为\",\n \"slug\": \"1-含糊的知识引导精确的行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"人们不需要完全精确的知识来支撑引导他们的行为。\",\n \"slug\": \"人们不需要完全精确的知识来支撑引导他们的行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"两种类型的知识：\",\n \"slug\": \"两种类型的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 记忆是储存在头脑中的知识\",\n \"slug\": \"2-记忆是储存在头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 记忆的结构\",\n \"slug\": \"3-记忆的结构\"\n },\n {\n \"depth\": 3,\n \"title\": \"两种记忆类型\",\n \"slug\": \"两种记忆类型\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 短时记忆（工作记忆）\",\n \"slug\": \"1-短时记忆工作记忆\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 长时记忆（LTM /long-term memory)\",\n \"slug\": \"2-长时记忆ltm-long-term-memory\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.近似模型：现实世界里的记忆\",\n \"slug\": \"4近似模型现实世界里的记忆\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.头脑中的知识\",\n \"slug\": \"5头脑中的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"前瞻记忆\",\n \"slug\": \"前瞻记忆\"\n },\n {\n \"depth\": 3,\n \"title\": \"未来记忆\",\n \"slug\": \"未来记忆\"\n },\n {\n \"depth\": 3,\n \"title\": \"提醒的两个层面：\",\n \"slug\": \"提醒的两个层面\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.外界知识和头脑中知识的此消彼长\",\n \"slug\": \"6外界知识和头脑中知识的此消彼长\"\n },\n {\n \"depth\": 3,\n \"title\": \"外界的知识\",\n \"slug\": \"外界的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"头脑中的知识\",\n \"slug\": \"头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.多个大脑里和多个设备中的记忆\",\n \"slug\": \"7多个大脑里和多个设备中的记忆\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.自然映射\",\n \"slug\": \"8自然映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是自然映射\",\n \"slug\": \"什么是自然映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"三个层次的映射\",\n \"slug\": \"三个层次的映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"糟糕的映射 VS 好的映射\",\n \"slug\": \"糟糕的映射-vs-好的映射\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.文化与设计：自然映射随文化而异\",\n \"slug\": \"9文化与设计自然映射随文化而异\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:14.322Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"日常行为心理学\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"draft\": false,\n \"created\": \"2021-10-20T16:14:47.371Z\",\n \"summary\": \"《设计心理学 1》第二章——人们如何做事？当事情出错了怎么办？怎么知道要做什么？\",\n \"lastmod\": \"2022-04-16T12:55:05.400Z\",\n \"slug\": \"/设计心理学1-2.md\",\n \"path\": \"/设计心理学1-2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.人们如何做事：执行与评估的鸿沟\",\n \"slug\": \"1人们如何做事执行与评估的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"执行的鸿沟：\",\n \"slug\": \"执行的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"评估的鸿沟：\",\n \"slug\": \"评估的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何消除这两个心理鸿沟：\",\n \"slug\": \"如何消除这两个心理鸿沟\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.行动的七个阶段\",\n \"slug\": \"2行动的七个阶段\"\n },\n {\n \"depth\": 3,\n \"title\": \"行动的两个步骤\",\n \"slug\": \"行动的两个步骤\"\n },\n {\n \"depth\": 3,\n \"title\": \"七个阶段：\",\n \"slug\": \"七个阶段\"\n },\n {\n \"depth\": 4,\n \"title\": \"执行桥 （目标->外部世界）\",\n \"slug\": \"执行桥-目标-外部世界\"\n },\n {\n \"depth\": 4,\n \"title\": \"评估桥（外部世界->目标）\",\n \"slug\": \"评估桥外部世界-目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"行动的分类：\",\n \"slug\": \"行动的分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"“根本原因分析”\",\n \"slug\": \"根本原因分析\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.人的思想：潜意识主导\",\n \"slug\": \"3人的思想潜意识主导\"\n },\n {\n \"depth\": 3,\n \"title\": \"潜意识\",\n \"slug\": \"潜意识\"\n },\n {\n \"depth\": 3,\n \"title\": \"有意识的思维\",\n \"slug\": \"有意识的思维\"\n },\n {\n \"depth\": 3,\n \"title\": \"认知和情感\",\n \"slug\": \"认知和情感\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.人的认知和情感\",\n \"slug\": \"4人的认知和情感\"\n },\n {\n \"depth\": 3,\n \"title\": \"本能层\",\n \"slug\": \"本能层\"\n },\n {\n \"depth\": 3,\n \"title\": \"行为层\",\n \"slug\": \"行为层\"\n },\n {\n \"depth\": 3,\n \"title\": \"反思层\",\n \"slug\": \"反思层\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.行动的七个阶段和大脑的三个层次\",\n \"slug\": \"5行动的七个阶段和大脑的三个层次\"\n },\n {\n \"depth\": 3,\n \"title\": \"心流\",\n \"slug\": \"心流\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.自说自话\",\n \"slug\": \"6自说自话\"\n },\n {\n \"depth\": 3,\n \"title\": \"概念模式\",\n \"slug\": \"概念模式\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.责备错误之事\",\n \"slug\": \"7责备错误之事\"\n },\n {\n \"depth\": 3,\n \"title\": \"给用户有保留的预测：\",\n \"slug\": \"给用户有保留的预测\"\n },\n {\n \"depth\": 3,\n \"title\": \"习得性无助（自责循环）\",\n \"slug\": \"习得性无助自责循环\"\n },\n {\n \"depth\": 3,\n \"title\": \"积极心理学\",\n \"slug\": \"积极心理学\"\n },\n {\n \"depth\": 3,\n \"title\": \"tips：\",\n \"slug\": \"tips\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.不当的自责\",\n \"slug\": \"8不当的自责\"\n },\n {\n \"depth\": 3,\n \"title\": \"自责的原因\",\n \"slug\": \"自责的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计师应如何\",\n \"slug\": \"设计师应如何\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.行动的七个阶段：七个基本设计原则\",\n \"slug\": \"9行动的七个阶段七个基本设计原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"前馈\",\n \"slug\": \"前馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"反馈\",\n \"slug\": \"反馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的七个基本原则\",\n \"slug\": \"设计的七个基本原则\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:15.315Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"日用品心理学\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-20T12:28:00.000Z\",\n \"summary\": \"《设计心理学 1》第一章——好设计有两个特征可视性和易通性\",\n \"lastmod\": \"2022-04-16T12:55:08.323Z\",\n \"slug\": \"/设计心理学1-1.md\",\n \"path\": \"/设计心理学1-1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.复杂的现代设备\",\n \"slug\": \"1复杂的现代设备\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.以人为本的设计\",\n \"slug\": \"2以人为本的设计\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.交互设计的基本原则\",\n \"slug\": \"3交互设计的基本原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"示能\",\n \"slug\": \"示能\"\n },\n {\n \"depth\": 3,\n \"title\": \"意符\",\n \"slug\": \"意符\"\n },\n {\n \"depth\": 3,\n \"title\": \"约束\",\n \"slug\": \"约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"映射\",\n \"slug\": \"映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"反馈\",\n \"slug\": \"反馈\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.系统映像\",\n \"slug\": \"4系统映像\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.科技的悖论\",\n \"slug\": \"5科技的悖论\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.设计的挑战\",\n \"slug\": \"6设计的挑战\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:16.843Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"什么是设计洞察 · What is Insight\",\n \"created\": \"2021-10-15T15:07:14.533Z\",\n \"tags\": [\n \"Design Thinking\",\n \"翻译\"\n ],\n \"keywords\": [\n \"insight\"\n ],\n \"slug\": \"/insight.md\",\n \"path\": \"/insight\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"insight 不是什么\",\n \"slug\": \"insight-不是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"五大要素\",\n \"slug\": \"五大要素\"\n },\n {\n \"depth\": 2,\n \"title\": \"定义 Insight 的步骤\",\n \"slug\": \"定义-insight-的步骤\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.设定语境/场景\",\n \"slug\": \"1设定语境场景\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.沟通困境\",\n \"slug\": \"2沟通困境\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 阐明原因\",\n \"slug\": \"3-阐明原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 捕捉动机\",\n \"slug\": \"4-捕捉动机\"\n },\n {\n \"depth\": 3,\n \"title\": \"5.构想理想\",\n \"slug\": \"5构想理想\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何表达\",\n \"slug\": \"如何表达\"\n },\n {\n \"depth\": 3,\n \"title\": \"第一句话——描述现状和用户行为。\",\n \"slug\": \"第一句话描述现状和用户行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"第二句话——描述用户的困境，并说明造成困境的原因。\",\n \"slug\": \"第二句话描述用户的困境并说明造成困境的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"第三句话——描述用户期望的最终理想状况。\",\n \"slug\": \"第三句话描述用户期望的最终理想状况\"\n },\n {\n \"depth\": 3,\n \"title\": \"Tips\",\n \"slug\": \"tips\"\n },\n {\n \"depth\": 2,\n \"title\": \"什么是一个好的’Insight’\",\n \"slug\": \"什么是一个好的insight\"\n },\n {\n \"depth\": 2,\n \"title\": \"Insight->How Might We?\",\n \"slug\": \"insight-how-might-we\"\n },\n {\n \"depth\": 2,\n \"title\": \"后记\",\n \"slug\": \"后记\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:42.689Z\",\n \"type\": \"article\",\n \"html\": \"\"\n }\n]"}</script>
|
||
</body>
|
||
</html>
|