{"id":38510,"date":"2023-10-31T03:24:12","date_gmt":"2023-05-01T17:33:34","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/"},"modified":"2024-05-04T06:49:30","modified_gmt":"2024-05-03T22:49:30","slug":"%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/","title":{"rendered":"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66"},"content":{"rendered":"<h1>\u9996\u5148<\/h1>\n<p>\u5f53\u6211\u5728\u89e3\u51b3AtCoder\u7ade\u8d5b\u7684\u95ee\u9898\u65f6\uff0c\u5076\u5c14\u4f1a\u60f3\u8981\u753b\u89e3\u9898\u56fe\u3002\u6211\u66fe\u57282023\u5e7411\u67084\u65e5\u753b\u4e86ABC327-F\u7684\u89e3\u9898\u56fe\uff0c\u5e76\u53d1\u5e03\u5230X\uff08Twitter\uff09\u4e0a\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d351837434c4406c6b385\/2-0.png\" alt=\"abc327-f-640.png\" \/><\/div>\n<p>\u6709\u65f6\u5019\uff0c\u5728\u5236\u4f5c\u5b8c\u56fe\u50cf\u4e4b\u540e\uff0c\u8fd8\u4f1a\u914d\u4e0a\u89e3\u8bf4\u548c\u4ee3\u7801\u793a\u4f8b\uff0c\u6765\u5b8c\u6210\u4e00\u7bc7\u5728Qiita\u4e0a\u7684\u6587\u7ae0\u3002\u6709\u65f6\u5019\uff0c\u4e0d\u613f\u610f\u82b1\u8d39\u90a3\u4e48\u591a\u65f6\u95f4\uff0c\u53ea\u6ee1\u8db3\u4e8e\u5236\u4f5c\u56fe\u50cf\u672c\u8eab\u3002\u8fd9\u6837\u4e00\u6765\uff0c\u5c31\u4e0d\u518d\u4f1a\u6709\u4eba\u6ce8\u610f\u5230\u8fd9\u4e9b\u56fe\u50cf\u4e86\u3002<\/p>\n<p>\u8003\u8651\u5230\u4e0d\u60f3\u5199\u5185\u5bb9\uff0c\u800c\u53ea\u60f3\u7b80\u5355\u6574\u7406\u56fe\u7247\u7684\u65b9\u5f0f\uff0c\u6211\u51b3\u5b9a\u5c1d\u8bd5\u4f7f\u7528\u6d41\u884c\u7684UI\u6837\u672c\u96c6Storybook\u4f5c\u4e3a\u76ee\u5f55\u3002<\/p>\n<ul class=\"post-ul\">Storybook: Frontend workshop for UI development<\/ul>\n<p>\u8fd9\u4e2a\u611f\u89c9\u76f8\u5f53\u4e0d\u9519\u3002\u53ef\u4ee5\u5728\u6811\u5f62\u7ed3\u6784\u4e2d\u5207\u6362\u56fe\u50cf\uff0c\u5e76\u4e14\u53ef\u4ee5\u8f7b\u677e\u5730\u6dfb\u52a0\u95ee\u9898\u548c\u7b54\u6848\u7684\u94fe\u63a5\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d351837434c4406c6b385\/7-0.png\" alt=\"abc327-all-640.png\" \/><\/div>\n<p>\u6211\u4e0d\u4f7f\u7528storybook\u4f5c\u4e3aUI\u76ee\u5f55\u6216\u6d4b\u8bd5\u6846\u67b6\u3002\u867d\u7136\u611f\u89c9\u6211\u5728\u4e3a\u60f3\u8981\u505a\u7684\u4e8b\u60c5\u51c6\u5907\u8fc7\u4e8e\u7e41\u7410\u7684\u5de5\u5177\uff0c\u4f46\u6211\u5c06\u628a\u5b83\u5c1d\u8bd5\u5e76\u5199\u6210\u4e00\u7bc7\u6587\u7ae0\u3002<\/p>\n<h2>\u793a\u5a01\u6d3b\u52a8<\/h2>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30c4\u30ea\u30fc\u3067\u3001\u554f\u984c\u306b\u5bfe\u5fdc\u3059\u308b\u30da\u30fc\u30b8\u3092\u9078\u3079\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u5404\u30da\u30fc\u30b8\u3092\u958b\u304f\u3068\u3001\u4ee5\u4e0b\u3092\u898b\u3089\u308c\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n<p>\u89e3\u8aac\u753b\u50cf: 1600 * 900px, 1\u679a\u4ee5\u4e0a<br \/>\nAtCoder \u554f\u984c\u6587\u3078\u306e\u30ea\u30f3\u30af<br \/>\nAtCoder \u89e3\u7b54\u4f8b\u3078\u306e\u30ea\u30f3\u30af\u3001\u307e\u305f\u306f Qiita \u904e\u53bb\u306b\u6295\u7a3f\u3057\u305f\u89e3\u8aac\u8a18\u4e8b\u3078\u306e\u30ea\u30f3\u30af<\/p>\n<p>\u89e3\u8aac\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u62e1\u5927\u8868\u793a\u3067\u304d\u307e\u3059<\/p>\n<h2>\u672c\u6587\u6240\u8ba8\u8bba\u7684\u4e3b\u9898<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Storybook 7 + React 18 + TypeScript + Vite \u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Storybook \u3067\u30b9\u30e9\u30a4\u30c9\u753b\u50cf\u3092\u8868\u793a\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>\u500b\u3005\u306e\u30b9\u30e9\u30a4\u30c9\u306b\u5bfe\u5fdc\u3059\u308b Docs (MDX) \u3092\u4f5c\u6210\u3059\u308b<br \/>\n\u30b9\u30e9\u30a4\u30c9\u3092\u5171\u901a\u3067\u6271\u3046 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001\u4f7f\u7528\u3059\u308b<\/p>\n<p>Storybook \u3067\u305d\u306e\u4ed6\u8abf\u6574<\/p>\n<p>\u30c4\u30ea\u30fc\u8868\u793a\u9806<br \/>\nOpen Graph protocol \u8a2d\u5b9a<\/p>\n<p>GitHub Pages \u306b GitHub Actions \u3067\u30c7\u30d7\u30ed\u30a4\u3059\u308b<\/p>\n<p>\u8fd9\u91cc\u662f\u6e90\u4ee3\u7801\u3002<\/p>\n<ul class=\"post-ul\">hossy3\/atcoder-slides: \u7af6\u6280\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u89e3\u6cd5\u3092\u56f3\u793a\u3057\u305f\u30b9\u30e9\u30a4\u30c9\u96c6<\/ul>\n<h2>\u60f3\u8981\u8ffd\u6c42\u7684\u53d7\u4f17\u7fa4\u4f53<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">React 18 + TypeScript \u304c\u5206\u304b\u308b\u65b9<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Storybook \u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u30fb\u516c\u958b\u65b9\u6cd5\u3092\u77e5\u308a\u305f\u3044\u65b9<\/ul>\n<h1>\u521b\u5efa\u9879\u76ee<\/h1>\n<h2>\u5f00\u53d1\u73af\u5883<\/h2>\n<p>\u63d0\u524d\u51c6\u5907\u3002<\/p>\n<p>Node.js 18<br \/>\nVisual Studio Code &#8211; Code Editing. Redefined<br \/>\nGitHub Desktop | Simple collaboration from your desktop<\/p>\n<h2>\u786e\u8ba4\u6545\u4e8b\u4e66\u7684\u5b89\u88c5\u65b9\u6cd5<\/h2>\n<p>\u6545\u4e8b\u4e66 \u4e00\u8fb9\u76ef\u7740\u516c\u5f0f\u6587\u6863\u524d\u8fdb\u3002\u8bb8\u591a\u5e93\u4f3c\u4e4e\u53ef\u4ee5\u901a\u8fc7npm\u5b89\u88c5(package)\u6765\u83b7\u5f97\u3002<\/p>\n<ul class=\"post-ul\">Install Storybook<\/ul>\n<blockquote><p>\u5728\u73b0\u6709\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\uff0c\u4f7f\u7528Storybook CLI\u4ee5\u4e00\u4e2a\u7b80\u5355\u7684\u547d\u4ee4\u8fdb\u884c\u5b89\u88c5\u3002<\/p><\/blockquote>\n<p>Storybook \u4e0e\u5176\u8fd9\u6837\u505a\uff0c\u4e0d\u5982\u5c06\u5176\u4f5c\u4e3a\u4e00\u4e2a\u9644\u52a0\u5b89\u88c5\u7684\u65b9\u5f0f\u96c6\u6210\u5230\u73b0\u6709\u9879\u76ee\u4e2d\u3002\u4e00\u822c\u6765\u8bf4\uff0c\u8fd9\u662f\u56e0\u4e3a\u6211\u4eec\u9996\u5148\u5f00\u53d1\u4e86 UI \u7ec4\u4ef6\u7b49\u5185\u5bb9\u3002\u4f8b\u5982\uff0c\u5f53\u8bc6\u522b\u5230\u4e00\u4e2a React \u9879\u76ee\u65f6\uff0c\u80fd\u63d0\u4f9b\u9002\u7528\u4e8e React \u7684 Storybook \u63a8\u8350\u914d\u7f6e\u5e76\u8fdb\u884c\u5b89\u88c5\uff0c\u8fd9\u5c06\u662f\u975e\u5e38\u65b9\u4fbf\u7684\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u4e34\u65f6\u9879\u76ee\u6765\u5b89\u88c5Storybook\u3002\u5728React\u4e2d\u521b\u5efa\u4e00\u4e2a\u9002\u5f53\u7684UI\u7ec4\u4ef6\u3002<\/p>\n<p>\u524d\u5f80\u6b64\u9875\u9762\u5185\u7684 &#8220;Create React App&#8221; \u94fe\u63a5\u9875\u3002<\/p>\n<h2>\u786e\u8ba4React\u7684\u5b89\u88c5\u65b9\u6cd5<\/h2>\n<ul class=\"post-ul\">React \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u59cb\u3081\u308b \u2013 React<\/ul>\n<p>\u6211\u8fdb\u5165\u4e86React\u5b98\u65b9\u7f51\u9875\u3002<\/p>\n<p>\u6700\u8fd1\uff0c\u6709\u5f88\u591a\u5173\u4e8e\u5728 Next.js \u6846\u67b6\u4e2d\u5b89\u88c5 React \u7684\u65b9\u6cd5\u88ab\u4ecb\u7ecd\u51fa\u6765\u3002\u8fc7\u53bb\uff0c\u6211\u4eec\u53ea\u80fd\u9009\u62e9 create-react-app\u3002\u4f46\u5982\u4eca\u65f6\u4ee3\u5df2\u7ecf\u53d8\u4e86\u3002<\/p>\n<p>\u597d\u5427\uff0c\u90a3\u4e48\u95ee\u9898\u662f\u5728\u54ea\u4e2a\u6846\u67b6\u4e0a\u5b89\u88c5 React\u2026\u2026\u3002\u8fd9\u6b21\u6211\u4eec\u60f3\u8981\u505a\u7684\u662f\u4e3a\u5b89\u88c5 Storybook \u6846\u67b6\u505a\u51c6\u5907\u3002\u8bf4\u5b9e\u8bdd\uff0c\u6211\u771f\u7684\u4e0d\u9700\u8981\u6846\u67b6\uff0c\u6211\u60f3\u8981\u7684\u662f\u6700\u7b80\u6d01\u7684\u914d\u7f6e\u3002<\/p>\n<p>\u5728\u5b89\u88c5\u65b9\u6cd5\u4e0b\u65b9\u6709\u4e00\u4e2a\u95ee\u9898\u662f\u201c\u5728\u6ca1\u6709\u6846\u67b6\u7684\u60c5\u51b5\u4e0b\u53ef\u4ee5\u4f7f\u7528 React \u5417\uff1f\u201d<\/p>\n<blockquote><p>\u4f7f\u7528npm\u83b7\u53d6react\u548creact-dom\uff0c\u5e76\u4f7f\u7528\u7c7b\u4f3cVite\u6216Parcel\u7684\u6253\u5305\u5de5\u5177\u6765\u8bbe\u7f6e\u81ea\u5b9a\u4e49\u6784\u5efa\u8fc7\u7a0b\u3002<\/p><\/blockquote>\n<p>\u542c\u8bf4\u4e0d\u592a\u63a8\u8350\uff0c\u4f46\u662fVite\u53ef\u4ee5\u505a\u5230\u3002\u70b9\u51fb\u94fe\u63a5\u4ee5\u7ee7\u7eed\u3002<\/p>\n<h2>\u5feb\u901f\u5b89\u88c5 Vite + React\u3002<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Vite | Next Generation Frontend Tooling<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Getting Started | Vite<\/ul>\n<p>\u6211\u901a\u8fc7 Storybook \u5b98\u65b9\u7f51\u7ad9\u3001React \u5b98\u65b9\u7f51\u7ad9\uff0c\u6700\u540e\u627e\u5230\u4e86 Vite \u5b98\u65b9\u7f51\u7ad9\u3002\u5b98\u7f51\u4e0a\u6709\u5199\u7740\u5b89\u88c5\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>npm create vite@latest my-app <span class=\"nt\">--<\/span> <span class=\"nt\">--template<\/span> react-ts\r\n<\/code><\/pre>\n<p>\u8fd9\u6b63\u662f\u6211\u60f3\u8981\u7684\u4e1c\u897f\u3002<\/p>\n<p>\u8fd0\u884c\u547d\u4ee4\u540e\uff0creact\u548creact-dom\u90fd\u5b89\u88c5\u4e8618.2\u7248\u672c\u3002<\/p>\n<p>\u4f5c\u4e3a\u6a21\u677f\uff0c\u6211\u4eec\u9009\u62e9\u4e86\u6211\u4eec\u719f\u6089\u7684 React + TypeScript \u6784\u5efa\u65b9\u5f0f\u3002\u8fd8\u6709\u5176\u4ed6\u591a\u4e2a\u6a21\u677f\u53ef\u4f9b\u9009\u62e9\u3002<\/p>\n<h3>Vite \u548c React \u7684\u64cd\u4f5c\u786e\u8ba4<\/h3>\n<pre class=\"post-pre\"><code>npm run dev\r\n<\/code><\/pre>\n<p>\u6211\u5df2\u786e\u8ba4\u52a8\u4f5c\u3002<\/p>\n<p>\u8fd9\u4e2a\u9879\u76ee\u53ea\u662f\u4e3a\u4e86\u51c6\u5907 Storybook\u3002\u4e4b\u540e\u5c06\u4e0d\u518d\u4f7f\u7528\u3002\u5c3d\u7ba1\u5982\u6b64\uff0c\u6211\u4eec\u4ecd\u7136\u611f\u5230\u8fdb\u5c55\u987a\u5229\u3002<\/p>\n<h2>\u6545\u4e8b\u4e66\u5b89\u88c5<\/h2>\n<pre class=\"post-pre\"><code>npx storybook@latest init\r\n<\/code><\/pre>\n<p>\u8fd9\u6b21\u6211\u4eec\u6210\u529f\u5730\u5b89\u88c5\u4e86\u5b83\u3002\u606d\u559c\uff01<\/p>\n<h3>\u6545\u4e8b\u66f8\u7684\u884c\u52d5\u9a57\u8b49<\/h3>\n<pre class=\"post-pre\"><code>npm run storybook\r\n<\/code><\/pre>\n<p>\u663e\u793a\u4e86\u7c7b\u4f3c\u4e8eStorybook\u4e2d\u4ecb\u7ecd\u7684\u7f51\u7ad9\u3002<\/p>\n<h1>\u5728\u6545\u4e8b\u4e66\u4e2d\u5c55\u793a\u5e7b\u706f\u7247\u56fe\u50cf<\/h1>\n<h2>\u9879\u76ee\u7ed3\u6784\u548c\u8fdb\u884c\u65b9\u5f0f<\/h2>\n<p>\u6545\u4e8b\u4e66\u5b89\u88c5\u8fc7\u7a0b\u4e2d\u521b\u5efa\u4e86\u4ee5\u4e0b\u7c7b\u578b\u7684\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code>.storybook\/\r\n  main.ts\r\n  preview.ts\r\nsrc\/\r\n  stories\/\r\n    Button.stories.ts\r\n    Button.tsx\r\n    Configure.mdx\r\n    Header.stories.ts\r\n    Header.tsx\r\n    Page.stories.ts\r\n    Page.tsx\r\n    assets\/\r\n      *.png\r\n<\/code><\/pre>\n<p>\u63a5\u4e0b\u6765\u5c06\u9010\u6e10\u66f4\u6362\u4e3a\u89e3\u91ca\u56fe\u50cf\u663e\u793a\u7528\u9014\u3002<\/p>\n<pre class=\"post-pre\"><code>.storybook\/\r\n  main.ts\r\n  preview.ts\r\nsrc\/\r\n  stories\/\r\n    Readme.mdx\r\n    Slide.tsx\r\n    SlideAbc327d.mdx\r\n    SlideAbc327e.mdx\r\n    SlideAbc327f.mdx\r\n    assets\/\r\n      abc327-d.png\r\n      abc327-e.png\r\n      abc327-f.png\r\n<\/code><\/pre>\n<h2>\u5236\u4f5c\u6bcf\u4e2a\u9875\u9762\u7684 MDX<\/h2>\n<ul class=\"post-ul\">MDX<\/ul>\n<p>MDX \u662f\u5bf9 Markdown \u8fdb\u884c\u4e86\u6269\u5c55\uff0c\u4f7f\u5176\u80fd\u591f\u5d4c\u5165 React \u7ec4\u4ef6\u3002<\/p>\n<p>\u6211\u4eec\u5c06\u4f7f\u7528MDX\u683c\u5f0f\u521b\u5efa\u9875\u9762\uff0c\u53ef\u4ee5\u5728React\u7ec4\u4ef6\u4e2d\u663e\u793a\u56fe\u50cf\uff0c\u5e76\u8f7b\u677e\u6dfb\u52a0\u9644\u52a0\u4fe1\u606f\uff0c\u5982\u94fe\u63a5\u7b49\u3002<\/p>\n<pre class=\"post-pre\"><code>import { Meta } from \"@storybook\/blocks\";\r\nimport { Slide } from \".\/Slide\";\r\nimport Png from \".\/assets\/abc327-d.png\";\r\n\r\n<span class=\"nt\">&lt;Meta<\/span> <span class=\"na\">title=<\/span><span class=\"s\">\"ABC327\/ABC327-D\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;Slide<\/span> <span class=\"na\">src=<\/span><span class=\"s\">{Png}<\/span> <span class=\"na\">layout=<\/span><span class=\"s\">\"fullscreen\"<\/span> <span class=\"na\">label=<\/span><span class=\"s\">\"ABC327 D - Good Tuple Problem\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"p\">\r\n-<\/span> <span class=\"p\">[<\/span><span class=\"nv\">D \\- Good Tuple Problem<\/span><span class=\"p\">](<\/span><span class=\"sx\">https:\/\/atcoder.jp\/contests\/abc327\/tasks\/abc327_d<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">-<\/span> <span class=\"p\">[<\/span><span class=\"nv\">\u63d0\u51fa \\#47233850 \\- HHKB\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b3\u30f3\u30c6\u30b9\u30c82023\\(AtCoder Beginner Contest 327\\)<\/span><span class=\"p\">](<\/span><span class=\"sx\">https:\/\/atcoder.jp\/contests\/abc327\/submissions\/47233850<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"sx\">Rust<\/span><span class=\"p\">)<\/span>\r\n<\/code><\/pre>\n<p>\u5143\u7d20\u4e0e\u9875\u9762\u6807\u9898\u76f8\u5bf9\u5e94\u3002<\/p>\n<p>&lt;\u5e7b\u706f\u7247&gt;\u6211\u4eec\u63a5\u4e0b\u6765\u5c06\u5f00\u59cb\u5236\u4f5c\u7ec4\u4ef6\u3002<\/p>\n<h2>\u521b\u5efa\u7528\u4e8e\u56fe\u50cf\u8868\u793a\u7684\u7ec4\u4ef6<\/h2>\n<h3>\u4f7f\u7528\u7ec4\u4ef6\u8fdb\u884c\u56fe\u7247\u663e\u793a<\/h3>\n<p>\u663e\u793a\u4e0b\u9762\u7684 <img \/>\u3002\u53ea\u80fd\u663e\u793a\u51fa\u6765\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">SlideProps<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nl\">src<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"nl\">label<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">Slide<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">src<\/span><span class=\"p\">,<\/span> <span class=\"nx\">label<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">SlideProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">src<\/span><span class=\"si\">}<\/span> <span class=\"na\">aria-label<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">label<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;;<\/span>\r\n<span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<p>\u7136\u800c\u9057\u61be\u7684\u662f\uff0cStorybook \u7684 MDX \u8868\u683c\u7684\u6700\u5927\u5bbd\u5ea6\u88ab\u9650\u5236\u5728\u7ea61000\u50cf\u7d20\u3002\u4ee51600 * 900\u7684\u5c3a\u5bf8\u5236\u4f5c\u7684\u56fe\u50cf\u5c06\u4f1a\u7f29\u5c0f\u53d8\u5f62\u3002\u6211\u4eec\u5e0c\u671b\u80fd\u591f\u8fdb\u884c100%\u5bbd\u5ea6\u663e\u793a\u6216\u7b49\u6bd4\u4f8b\u663e\u793a\u3002<\/p>\n<p>Horizontal 1000px seems to be determined by the style of Storybook itself. By specifying this style externally, the image should be displayed larger. However, it is possible that the method of specifying styles will change with the upgrade of Storybook. I don&#8217;t want to rely too much on it.<br \/>\n\u6a2a\u54111000\u50cf\u7d20\u4f3c\u4e4e\u662f\u7531Storybook\u672c\u8eab\u7684\u6837\u5f0f\u786e\u5b9a\u7684\u3002\u901a\u8fc7\u5728\u5916\u90e8\u6307\u5b9a\u6b64\u6837\u5f0f\uff0c\u56fe\u50cf\u5e94\u663e\u793a\u5f97\u66f4\u5927\u3002\u7136\u800c\uff0c\u968f\u7740Storybook\u5347\u7ea7\uff0c\u6307\u5b9a\u6837\u5f0f\u7684\u65b9\u6cd5\u53ef\u80fd\u4f1a\u53d1\u751f\u53d8\u5316\u3002\u6211\u4e0d\u60f3\u592a\u8fc7\u4f9d\u8d56\u5b83\u3002<\/p>\n<h3>\u4f7f\u7528\u7ec4\u4ef6\u8fdb\u884c\u56fe\u50cf\u5927\u5c0f\u5207\u6362\u3002<\/h3>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u5728React\u7ec4\u4ef6\u4e2d\u5b9e\u73b0\u4e86\u53ef\u4ee5\u5207\u6362\u5927\u5c0f\u7684\u529f\u80fd\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u753b\u50cf\u30af\u30ea\u30c3\u30af\u3067\u300c\u521d\u671f\u30b5\u30a4\u30ba (mode: 0)\u300d\u300c\u6a2a\u5e45100\uff05 (1)\u300d\u300c\u7b49\u500d (2)\u300d\u3092\u5207\u308a\u66ff\u3048\u3089\u308c\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>\u753b\u50cf\u306e\u30b9\u30bf\u30a4\u30eb\u3092 position: fixed \u306b\u3059\u308c\u3070\u3001Storybook \u53f3\u306e <iframe> \u7bc4\u56f2\u5185\u306b\u3064\u3044\u3066\u306f\u5168\u753b\u9762\u8868\u793a\u3067\u304d\u305d\u3046\u5de6\u306e\u30c4\u30ea\u30fc\u90e8\u5206\u306f <iframe> \u306e\u5916\u5074\u3067\u3059\u306e\u3067\u8868\u793a\u3067\u304d\u307e\u305b\u3093<\/p>\n<p>\u30af\u30ea\u30c3\u30af\u3067\u304d\u305d\u3046\u306b\u898b\u305b\u308b\u305f\u3081\u306b\u3001\u753b\u50cf\u30b9\u30bf\u30a4\u30eb\u306b cursor: zoom-in \u3092\u4ed8\u3051\u308b<\/p>\n<p>[Enter] [Esc] \u3067\u3082\u62e1\u5927\u7e2e\u5c0f\u3067\u304d\u308b<\/p>\n<p>\u753b\u50cf\u306b tabIndex \u5c5e\u6027\u3092\u4ed8\u3051\u3066\u3001onKeyDown \u30a4\u30d9\u30f3\u30c8\u3092\u51e6\u7406<br \/>\nStorybook \u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u306a\u30ad\u30fc\u51e6\u7406\u306b\u6d41\u308c\u306a\u3044\u3088\u3046\u306b ev.stopPropagation(); \u3082<\/ul>\n<p>\u8fd9\u6b21\u5199\u7684 React \u662f\u552f\u4e00\u7684\u4e00\u4e2a\u3002\u4e0d\u662f\u672c\u6587\u7684\u4e3b\u9898\uff0c\u6240\u4ee5\u5c06\u5176\u6298\u53e0\u8d77\u6765\u3002\u5982\u679c\u4f60\u6709\u5174\u8da3\uff0c\u8bf7\u770b\u4e00\u4e0b\u3002<\/p>\n<details>Slide.tsx<\/p>\n<p>Slide.tsx<br \/>\nimport { KeyboardEventHandler, useCallback, useState } from &#8220;react&#8221;;<br \/>\nimport &#8220;.\/Slide.css&#8221;;<\/p>\n<p>interface SlideProps {<br \/>\nsrc: string;<br \/>\nlabel?: string;<br \/>\n}<\/p>\n<p>export const Slide = ({ src, label }: SlideProps) => {<br \/>\nconst [zoom, setZoom] = useState<0 | 1 | 2>(0);<br \/>\nconst onKeyDown = useCallback<KeyboardEventHandler>(<br \/>\n(ev) => {<br \/>\nif (ev?.key === &#8220;Enter&#8221;) {<br \/>\nsetZoom(((zoom + 1) % 3) as 0 | 1 | 2);<br \/>\nev.stopPropagation();<br \/>\n} else if (ev?.key === &#8220;Escape&#8221; &#038;&#038; zoom > 0) {<br \/>\nsetZoom(0);<br \/>\nev.stopPropagation();<br \/>\n}<br \/>\n},<br \/>\n[zoom]<br \/>\n);<br \/>\nreturn (<br \/>\n<><br \/>\n<img onClick={() => setZoom(1)}<br \/>\nonKeyDown={onKeyDown}<br \/>\nsrc={src}<br \/>\naria-label={label}<br \/>\ntabIndex={0}<br \/>\n\/><br \/>\n{zoom > 0 &#038;&#038; (<\/p>\n<div onClick={() =>\n<p> setZoom(0)} className=&#8221;modal-overlay&#8221;><\/p>\n<div className=\"modal-content\">\n            {zoom == 1 ? (<br \/>\n<img src={src} aria-label={label} onClick={(ev) => {<br \/>\nsetZoom(2);<br \/>\nev.stopPropagation();<br \/>\n}}<br \/>\nonKeyDown={onKeyDown}<br \/>\ntabIndex={0}<br \/>\n\/><br \/>\n) : (<br \/>\n<img src={src} aria-label={label} className=\"zoom100\" onKeyDown={onKeyDown} tabIndex={0} \/><br \/>\n)}<\/div>\n<\/div>\n<p>)}<br \/>\n<\/><br \/>\n);<br \/>\n};<\/p>\n<p>Slide.tsx<\/p>\n<p>Slide.tsx<br \/>\nimport { KeyboardEventHandler, useCallback, useState } from &#8220;react&#8221;;<br \/>\nimport &#8220;.\/Slide.css&#8221;;<\/p>\n<p>interface SlideProps {<br \/>\nsrc: string;<br \/>\nlabel?: string;<br \/>\n}<\/p>\n<p>export const Slide = ({ src, label }: SlideProps) => {<br \/>\nconst [zoom, setZoom] = useState<0 | 1 | 2>(0);<br \/>\nconst onKeyDown = useCallback<KeyboardEventHandler>(<br \/>\n(ev) => {<br \/>\nif (ev?.key === &#8220;Enter&#8221;) {<br \/>\nsetZoom(((zoom + 1) % 3) as 0 | 1 | 2);<br \/>\nev.stopPropagation();<br \/>\n} else if (ev?.key === &#8220;Escape&#8221; &#038;&#038; zoom > 0) {<br \/>\nsetZoom(0);<br \/>\nev.stopPropagation();<br \/>\n}<br \/>\n},<br \/>\n[zoom]<br \/>\n);<br \/>\nreturn (<br \/>\n<><br \/>\n<img onClick={() => setZoom(1)}<br \/>\nonKeyDown={onKeyDown}<br \/>\nsrc={src}<br \/>\naria-label={label}<br \/>\ntabIndex={0}<br \/>\n\/><br \/>\n{zoom > 0 &#038;&#038; (<\/p>\n<div onClick={() =>\n<p> setZoom(0)} className=&#8221;modal-overlay&#8221;><\/p>\n<div className=\"modal-content\">\n            {zoom == 1 ? (<br \/>\n<img src={src} aria-label={label} onClick={(ev) => {<br \/>\nsetZoom(2);<br \/>\nev.stopPropagation();<br \/>\n}}<br \/>\nonKeyDown={onKeyDown}<br \/>\ntabIndex={0}<br \/>\n\/><br \/>\n) : (<br \/>\n<img src={src} aria-label={label} className=\"zoom100\" onKeyDown={onKeyDown} tabIndex={0} \/><br \/>\n)}<\/div>\n<\/div>\n<p>)}<br \/>\n<\/><br \/>\n);<br \/>\n}<\/details>\n<details>\u8f6e\u64ad.css<\/p>\n<p>\u8f6e\u64ad.tsx<br \/>\n.modal\u906e\u7f69 {<br \/>\n\u5b9a\u4f4d: \u56fa\u5b9a;<br \/>\n\u9876\u90e8: 0;<br \/>\n\u5de6\u4fa7: 0;<br \/>\n\u5bbd\u5ea6: 100%;<br \/>\n\u9ad8\u5ea6: 100%;<br \/>\n\u80cc\u666f\u989c\u8272: rgba(0, 0, 0, 0.5);<br \/>\n\u5c42\u7ea7: 1;<br \/>\n\u5149\u6807: \u653e\u5927;<br \/>\n}<\/p>\n<p>.modal\u5185\u5bb9 {<br \/>\n\u5b9a\u4f4d: \u7edd\u5bf9;<br \/>\n\u9876\u90e8: 0;<br \/>\n\u5de6\u4fa7: 0;<br \/>\n\u5bbd\u5ea6: 100%;<br \/>\n\u9ad8\u5ea6: 100%;<br \/>\n\u6ea2\u51fa: \u81ea\u52a8;<br \/>\n}<\/p>\n<p>.modal\u5185\u5bb9 img.\u653e\u5927100 {<br \/>\n\u6700\u5927\u5bbd\u5ea6: \u53d6\u6d88;<br \/>\n\u5149\u6807: \u653e\u5927;<br \/>\n}<\/p>\n<p>img {<br \/>\n\u5149\u6807: \u7f29\u5c0f;<br \/>\n}<\/details>\n<h1>\u5728\u6545\u4e8b\u4e66\u4e2d\u8fdb\u884c\u5176\u4ed6\u8c03\u6574\u3002<\/h1>\n<p>\u7531\u4e8e\u56fe\u7247\u80fd\u591f\u663e\u793a\uff0c\u6240\u4ee5\u6211\u4eec\u5df2\u7ecf\u8fbe\u5230\u4e86\u76ee\u6807\u3002<\/p>\n<p>\u6211\u4eec\u4ece\u8fd9\u91cc\u5f00\u59cb\uff0c\u53ea\u9700\u5728\u80fd\u591f\u5904\u7406\u7684\u8303\u56f4\u5185\u7a0d\u4f5c\u8c03\u6574\uff0c\u8ba9\u6211\u4eec\u8bd5\u7740\u518d\u8c03\u6574\u4e00\u4e0b\u3002<\/p>\n<h2>\u663e\u793a\u6e90\u4ee3\u7801\uff08\u4e0d\u652f\u6301\uff09<\/h2>\n<p>\u6211\u8ba4\u4e3a\uff0c\u5982\u679c\u80fd\u591f\u5728\u56fe\u7247\u65c1\u8fb9\u4ee5\u6298\u53e0\u663e\u793a\u7684\u65b9\u5f0f\u5c55\u793a\u6e90\u4ee3\u7801\uff0c\u80fd\u591f\u66f4\u597d\u5730\u5c06\u56fe\u50cf\u7684\u610f\u8c61\u4e0e\u5b9e\u73b0\u7ed3\u5408\u5728\u4e00\u8d77\uff0c\u5bf9\u4e8e\u89c2\u770b\u8005\u6765\u8bf4\u4f1a\u66f4\u6709\u5e2e\u52a9\u3002<\/p>\n<p>\u671f\u5f85\u4e2d\u7684\u662f\u5728Markdown\u4ee3\u7801\u5d4c\u5165\u4e2d\uff0c\u53ef\u4ee5\u8fdb\u884c\u8bed\u8a00\u6307\u5b9a\uff0c\u4f8b\u5982 &#8220;&#8220;`rust&#8221;\u3002\u4f46\u662f\uff0c\u5c1d\u8bd5\u8fc7\u540e\u53d1\u73b0\u683c\u5f0f\u6ca1\u6709\u88ab\u6b63\u786e\u663e\u793a\uff0c\u800c\u662f\u548c\u666e\u901a\u6587\u672c\u4e00\u6837\u7684\u663e\u793a\u3002<\/p>\n<p>\u6545\u4e8b\u4e667\u4f3c\u4e4e\u53ea\u652f\u6301\u4e00\u4e9b\u8bed\u8a00\uff0c\u5982JavaScript\u7b49\u3002<\/p>\n<ul class=\"post-ul\">\nFrequently Asked Questions<\/ul>\n<blockquote><p>\u6211\u4e3a\u4ec0\u4e48\u5728Storybook MDX\u4e2d\u7684\u4ee3\u7801\u5757\u6ca1\u6709\u9ad8\u4eae\u663e\u793a\uff1f<br \/>\nStorybook\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u63d0\u4f9b\u5bf9\u4e00\u7ec4\u8bed\u8a00\uff08\u5982Javascript\u3001Markdown\u3001CSS\u3001HTML\u3001Typescript\u3001GraphQL\uff09\u7684\u8bed\u6cd5\u9ad8\u4eae\u652f\u6301\uff0c\u60a8\u53ef\u4ee5\u5728\u4ee3\u7801\u5757\u4e2d\u4f7f\u7528\u8fd9\u4e9b\u8bed\u8a00\u3002\u76ee\u524d\uff0c\u5f53\u60a8\u5c1d\u8bd5\u6ce8\u518c\u81ea\u5b9a\u4e49\u8bed\u8a00\u8fdb\u884c\u8bed\u6cd5\u9ad8\u4eae\u65f6\u5b58\u5728\u5df2\u77e5\u9650\u5236\u3002\u6211\u4eec\u6b63\u5728\u52aa\u529b\u4fee\u590d\u8fd9\u4e2a\u95ee\u9898\uff0c\u4e00\u65e6\u4fee\u590d\u53ef\u7528\uff0c\u6211\u4eec\u5c06\u5728\u672c\u8282\u8fdb\u884c\u66f4\u65b0\u3002<\/p><\/blockquote>\n<p>\u8fd9\u6b21\u6211\u4eec\u6ca1\u6709\u63d0\u4f9b\u6e90\u4ee3\u7801\u663e\u793a\uff0c\u800c\u662f\u63d0\u4f9b\u4e86\u6307\u5411AtCoder\u63d0\u4ea4\u4ee3\u7801\u7684\u94fe\u63a5\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">-<\/span> <span class=\"p\">[<\/span><span class=\"nv\">\u63d0\u51fa \\#47233850 \\- HHKB\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b3\u30f3\u30c6\u30b9\u30c82023\\(AtCoder Beginner Contest 327\\)<\/span><span class=\"p\">](<\/span><span class=\"sx\">https:\/\/atcoder.jp\/contests\/abc327\/submissions\/47233850<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"sx\">Rust<\/span><span class=\"p\">)<\/span>\r\n<\/code><\/pre>\n<p>\u5982\u679c\u8981\u9032\u884c\u76f8\u61c9\u7684\u8a71\uff0c\u4f3c\u4e4e\u6709\u9078\u64c7\u4f7f\u7528Storybook 6\u7cfb\u5217\uff0c\u5728Gist\u7b49\u5730\u653e\u7f6e\u4e26\u5d4c\u5165\u4ee3\u78bc\u7684\u65b9\u6cd5\u3002<\/p>\n<h2>\u91cd\u65b0\u6392\u5217\u6811\u6728<\/h2>\n<p>\u5982\u679c\u6ca1\u6709\u6307\u5b9a\u6811\u7684\u6392\u5e8f\u65b9\u5f0f\uff0c\u9875\u9762\u540d\u79f0\u5c06\u7b80\u5355\u5730\u6309\u5347\u5e8f\u6392\u5e8f\u3002\u65e7\u7684\u6bd4\u8d5b\u4f1a\u6709\u66f4\u5c0f\u7684\u7f16\u53f7\uff0c\u5e76\u51fa\u73b0\u5728\u8f83\u4e0a\u65b9\u3002<\/p>\n<p>\u4e3a\u4e86\u4f7f\u6700\u8fd1\u7684\u6bd4\u8d5b\u9875\u9762\u66f4\u52a0\u663e\u773c\uff0c\u6211\u60f3\u8981\u5bf9\u5176\u8fdb\u884c\u6392\u5e8f\u3002<\/p>\n<div>\n<div class=\"post-table\">\n<thead>\n<tr data-sourcepos=\"369:1-369:103\">\n<th data-sourcepos=\"369:2-369:28\">\u4e26\u3073\u66ff\u3048\u6307\u5b9a\u3057\u306a\u3044<\/th>\n<th data-sourcepos=\"369:30-369:62\">\u30b3\u30f3\u30c6\u30b9\u30c8\u540d\u3067\u4e26\u3073\u66ff\u3048<\/th>\n<th data-sourcepos=\"369:64-369:102\">\u30bd\u30fc\u30c8\u95a2\u6570\u3092\u66f8\u3044\u3066\u4e26\u3073\u66ff\u3048<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr data-sourcepos=\"371:1-371:1186\">\n<td data-sourcepos=\"371:2-371:395\">\u306f\u3058\u3081\u306b<br \/>\nABC308<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-A<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-B<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-C<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-D<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-E<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-Ex<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-F<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-G<br \/>\nABC312<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC312-E<br \/>\nABC327<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-D<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-E<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-F<\/td>\n<td data-sourcepos=\"371:397-371:790\">\u306f\u3058\u3081\u306b<br \/>\nABC327<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-D<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-E<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-F<br \/>\nABC312<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC312-E<br \/>\nABC308<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-A<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-B<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-C<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-D<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-E<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-Ex<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-F<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-G<\/td>\n<td data-sourcepos=\"371:792-371:1185\">\u306f\u3058\u3081\u306b<br \/>\nABC327<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-D<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-E<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC327-F<br \/>\nABC312<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC312-E<br \/>\nABC308<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-A<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-B<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-C<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-D<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-E<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-F<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-G<br \/>\n<img decoding=\"async\" alt=\":page_facing_up:\" class=\"emoji\" height=\"20\" src=\"https:\/\/cdn.qiita.com\/emoji\/twemoji\/unicode\/1f4c4.png\" title=\":page_facing_up:\" width=\"20\" loading=\"lazy\">ABC308-Ex<\/td>\n<\/tr>\n<\/tbody>\n<\/div>\n<\/div>\n<h3>\u6309\u7167\u6bd4\u8d5b\u540d\u79f0\u8fdb\u884c\u6392\u5e8f<\/h3>\n<p>\u547d\u540d\u7ec4\u4ef6\u548c\u5c42\u6b21\u7ed3\u6784<\/p>\n<p>\u5728\u5b98\u65b9\u63d0\u4f9b\u7684\u8cc7\u6599\u4e2d\u6709\u5c0d\u65bc\u91cd\u65b0\u6392\u5e8f\u7684\u65b9\u6cd5\u9032\u884c\u4e86\u8aaa\u660e\u3002\u5c07preview.ts\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u9032\u884c\u64b0\u5beb\uff0c\u53ea\u8981\u898f\u5247\u8f03\u5c11\u5c31\u6703\u8b8a\u5f97\u7c21\u55ae\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">preview<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Preview<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">parameters<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">storySort<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">alphabetical<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">order<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n          <span class=\"dl\">\"<\/span><span class=\"s2\">\u306f\u3058\u3081\u306b<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"dl\">\"<\/span><span class=\"s2\">ABC327<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"dl\">\"<\/span><span class=\"s2\">ABC312<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"dl\">\"<\/span><span class=\"s2\">ABC308<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">],<\/span>\r\n      <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<p>\u7136\u800c\uff0c\u6bcf\u6b21\u6dfb\u52a0\u6bd4\u8d5b\u90fd\u9700\u8981\u66f4\u65b0 preview.ts \u6587\u4ef6\u975e\u5e38\u9ebb\u70e6\u3002\u6211\u5e0c\u671b\u80fd\u66f4\u52a0\u7b80\u4fbf\u4e00\u4e9b\u3002<\/p>\n<h3>\u5199\u4e00\u4e2a\u6392\u5e8f\u51fd\u6570\u6765\u8fdb\u884c\u6392\u5e8f\u3002<\/h3>\n<p>\u5728storySort\u4e2d\uff0c\u4f60\u4e5f\u53ef\u4ee5\u6307\u5b9a\u4e00\u4e2a\u51fd\u6570\u3002\u5982\u679c\u4f60\u60f3\u7279\u6b8a\u5904\u7406\u4ee5&#8221;abc&#8221;\u5f00\u5934\u7684\u6545\u4e8b\u540d\u79f0\uff0c\u53ea\u9700\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u7f16\u5199\u51fd\u6570\uff0c\u5c31\u4e0d\u9700\u8981\u6bcf\u6b21\u8fdb\u884c\u7ef4\u62a4\u5de5\u4f5c\u4e86\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">storySort<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">abc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">abc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">localeCompare<\/span><span class=\"p\">(<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">abc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">abc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">abc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">startsWith<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">abc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">substring<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">substring<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">-ex-<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">-ex-<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">return<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">-ex-<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">-ex-<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">return<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">localeCompare<\/span><span class=\"p\">(<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"o\">-<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">localeCompare<\/span><span class=\"p\">(<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\r\n<span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u8d77\u89c1\uff0c\u6211\u5c06 Ex \u95ee\u9898\u6309\u7167\u96be\u6613\u7a0b\u5ea6\u6392\u5e8f\uff0c\u5e76\u5c06\u5176\u663e\u793a\u5728\u6700\u540e\u4e00\u4e2a\u4f4d\u7f6e\u3002<\/p>\n<h2>\u66f4\u6539\u6807\u9898\uff08\u53ef\u80fd\u65e0\u6cd5\u5b9e\u73b0\uff09<\/h2>\n<p>\u5982\u679c\u8981\u53d1\u5e03\u7f51\u7ad9\uff0c\u6211\u60f3\u8981\u6307\u5b9a\u6807\u9898 <title>\u3002<\/p>\n<p>\u6d4f\u89c8\u5668\u7684\u7a97\u53e3\u6216\u9009\u9879\u5361\u4e2d\u663e\u793a &#8220;ABC327 \/ ABC327-D &#8211; Docs \u22c5 Storybook&#8221;\u3002\u6839\u636e\u8fd9\u4e2a\u663e\u793a\uff0c\u6211\u4eec\u53ef\u4ee5\u77e5\u9053\u8fd9\u662f\u7528 Storybook \u5236\u4f5c\u7684\uff0c\u4f46\u662f\u4e0d\u6e05\u695a\u8fd9\u672c Storybook \u662f\u5173\u4e8e\u4ec0\u4e48\u7684\u3002<\/p>\n<p>\u4f46\u4e0d\u5e78\u7684\u662f\uff0c\u6839\u636e\u6211\u7684\u8c03\u67e5\uff0c\u6211\u65e0\u6cd5\u627e\u5230\u5982\u4f55\u66f4\u6539\u6807\u9898\u7684\u65b9\u6cd5\u3002<\/p>\n<ul class=\"post-ul\">\nFluent UI React Components<\/ul>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u53c2\u8003\uff0c\u6211\u770b\u5230\u4e86 Fluent UI v9 \u7f51\u9875\u4e2d\u7684\u201cConcepts \/ Introduction &#8211; Page \u22c5 Storybook\u201d\uff0c\u4f46\u6807\u9898\u4e2d\u5e76\u6ca1\u6709\u5305\u542b\u201cFluent UI\u201d\u7684\u8bcd\u8bed\u3002\u4e5f\u8bb8\u8fd9\u5c31\u662f\u8fd9\u4e2a\u4f8b\u5b50\u7684\u7279\u70b9\u3002<\/p>\n<h2>Open Graph\u5354\u8b70\u7684\u8a2d\u7f6e<\/h2>\n<p>\u5373\u4f7f\u6807\u9898\u65e0\u6cd5\u66f4\u6539\uff0c\u4e5f\u53ef\u4ee5\u8bbe\u7f6e Open Graph \u534f\u8bae\uff08OGP\uff09\u3002\u8fd9\u5c31\u8db3\u591f\u4e86\u3002<\/p>\n<ul class=\"post-ul\">\nSNS \u306a\u3069\u306b URL \u3092\u8cbc\u308a\u4ed8\u3051\u308b\u3068\u3001\u30bf\u30a4\u30c8\u30eb\u3068\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u3082\u3042\u308b 2<\/p>\n<p>\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u304c\u3001\u4f55\u306b\u5bfe\u3059\u308b Storybook \u304b\u3068\u3044\u3046\u3053\u3068\u3092\u7406\u89e3\u3067\u304d\u308b<\/ul>\n<p>\u4f8b\u5982\uff0c\u5f53\u5728Qiita\u4e0a\u5199\u5165https:\/\/hossy3.github.io\/atcoder-slides\/\u65f6\uff0c\u4f1a\u4ee5\u8fd9\u6837\u7684\u5f62\u5f0f\u663e\u793a\u51fa\u6765\u3002<\/p>\n<p><a><\/a><\/p>\n<p>\u8fd9\u4e2a OGP \u7684\u8bbe\u7f6e\u53ef\u4ee5\u901a\u8fc7\u5728<head><\/head>\u6807\u7b7e\u5185\u5d4c\u5165\u7528\u4e8e OGP \u7684\u6807\u7b7e\u6765\u5b8c\u6210\u3002<\/p>\n<h3>Storybook\u7684\u914d\u7f6e\u65b9\u6cd5<\/h3>\n<ul class=\"post-ul\">\nWrite a preset addon<\/ul>\n<blockquote><p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u9884\u8bbe\u7684\u65b9\u5f0f\u7f16\u7a0b\u4fee\u6539\u9884\u89c8\u7684 head\/body HTML\uff0c\u7c7b\u4f3c\u4e8e\u9884\u89c8-head.html\/\u9884\u89c8-body.html \u53ef\u4ee5\u7528\u4e8e\u914d\u7f6e\u6545\u4e8b\u6e32\u67d3\u7684\u65b9\u5f0f\u3002<br \/>\n\uff08\u4e2d\u7565\uff09<br \/>\n\u540c\u6837\u5730\uff0cmanagerHead \u53ef\u4ee5\u7528\u4e8e\u4fee\u6539\u5468\u56f4\u7684 &#8220;manager&#8221; UI\uff0c\u7c7b\u4f3c\u4e8emanager-head.html\u3002<\/p><\/blockquote>\n<p>\u5efa\u8bae\u4f7f\u7528 manager-head.html \u6765\u5411\u6574\u4e2a\u9875\u9762\u7684\u6807\u9898\u680f\u6dfb\u52a0\u559c\u6b22\u7684\u4fe1\u606f\u3002<\/p>\n<ul class=\"post-ul\">\nfluentui\/apps\/public-docsite-v9\/.storybook\/manager-head.html at d82568581b73996acbfdf78966e55572e0f869f6 \u00b7 microsoft\/fluentui<\/ul>\n<p>\u6211\u53c2\u8003\u4e86Fluent UI v9\u7684\u8bbe\u7f6e\u793a\u4f8b\uff0c\u5199\u6210\u4e86\u4ee5\u4e0b\u8fd9\u6837\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"title\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"\u7af6\u6280\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0 \u304a\u7d75\u63cf\u304d\u5e83\u5834\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span>\r\n  <span class=\"na\">name=<\/span><span class=\"s\">\"description\"<\/span>\r\n  <span class=\"na\">content=<\/span><span class=\"s\">\"\u7af6\u6280\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u89e3\u6cd5\u3092\u3001\u611f\u899a\u7684\u306b\u30a4\u30e1\u30fc\u30b8\u3067\u3068\u3089\u3048\u3089\u308c\u308b\u3088\u3046\u306a\u3082\u306e\u3092\u63cf\u3044\u3066\u3044\u307e\u3059\u3002\u6570\u5f0f\u306f\u63a7\u3048\u3081\u3067\u3059\u3002\"<\/span>\r\n<span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:type\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"website\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:url\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"https:\/\/hossy3.github.io\/atcoder-slides\/\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:title\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"\u7af6\u6280\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0 \u304a\u7d75\u63cf\u304d\u5e83\u5834\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span>\r\n  <span class=\"na\">property=<\/span><span class=\"s\">\"og:description\"<\/span>\r\n  <span class=\"na\">content=<\/span><span class=\"s\">\"\u7af6\u6280\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u89e3\u6cd5\u3092\u3001\u611f\u899a\u7684\u306b\u30a4\u30e1\u30fc\u30b8\u3067\u3068\u3089\u3048\u3089\u308c\u308b\u3088\u3046\u306a\u3082\u306e\u3092\u63cf\u3044\u3066\u3044\u307e\u3059\u3002\u6570\u5f0f\u306f\u63a7\u3048\u3081\u3067\u3059\u3002\"<\/span>\r\n<span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:locale\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"ja_JP\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span>\r\n  <span class=\"na\">property=<\/span><span class=\"s\">\"og:image\"<\/span>\r\n  <span class=\"na\">content=<\/span><span class=\"s\">\"https:\/\/hossy3.github.io\/atcoder-slides\/banner-meta.png\"<\/span>\r\n<span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:image:width\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"1200\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:image:height\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"670\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"og:image:type\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"image\/png\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span>\r\n  <span class=\"na\">property=<\/span><span class=\"s\">\"og:image:alt\"<\/span>\r\n  <span class=\"na\">content=<\/span><span class=\"s\">\"\u7af6\u6280\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0 \u304a\u7d75\u63cf\u304d\u5e83\u5834 \u30d0\u30ca\u30fc\"<\/span>\r\n<span class=\"nt\">\/&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">property=<\/span><span class=\"s\">\"twitter:card\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"summary_large_image\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u6545\u4e8b\u4e66\u4e2d\uff0c\u6bcf\u4e00\u9875\u663e\u793a\u4e0d\u540c\u7684OGP\u4f3c\u4e4e\u5f88\u56f0\u96be\u3002\u6211\u672c\u5e0c\u671b\u628a\u6bcf\u4e2a\u5e7b\u706f\u7247\u7684\u56fe\u50cf\u76f4\u63a5\u653e\u5165og:image\u4e2d\u3002<\/p>\n<p>\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u6211\u4eec\u5bf9\u4e8e\u8c03\u6574\u90e8\u5206\u5c31\u6682\u65f6\u544a\u4e00\u6bb5\u843d\u3002\u8f9b\u82e6\u4e86\u3002<\/p>\n<h1>\u4f7f\u7528GitHub\u52a8\u4f5c\u5728GitHub Pages\u4e0a\u90e8\u7f72<\/h1>\n<p>\u6211\u5c06\u53d1\u5e03\u6211\u521b\u5efa\u7684\u7f51\u7ad9\u3002<\/p>\n<h2>\u5efa\u9020<\/h2>\n<pre class=\"post-pre\"><code>npm run build-storybook\r\n<\/code><\/pre>\n<p>\u6545\u4e8b\u4e66\u5728\u5b89\u88c5\u8fc7\u7a0b\u4e2d\uff0c\u8fd8\u6dfb\u52a0\u4e86\u6784\u5efa\u547d\u4ee4\u3002<\/p>\n<p>\u5f53\u6267\u884c\u65f6\uff0c\u6784\u5efa\u6210\u679c\u7269\u5c06\u653e\u7f6e\u5728storybook_static\u6587\u4ef6\u5939\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code>.storybook\/\r\nsrc\/\r\nstorybook_static\/\r\n  assets\/\r\n    abc*.png\r\n    Slide*.js\r\n  index.html\r\n<\/code><\/pre>\n<p>\u5982\u679c\u628astorybook_static\u7684\u5185\u5bb9\u653e\u5230\u67d0\u4e2a\u7f51\u7edc\u670d\u52a1\u5668\u4e0a\uff0c\u5c31\u5b8c\u6210\u4e86\u516c\u5f00\u3002<\/p>\n<h2>\u5728 gh-pages \u624b\u52a8\u90e8\u7f72 (\u672c\u6b21\u4e0d\u8fdb\u884c)\u3002<\/h2>\n<ul class=\"post-ul\">\nPaint.NET \u306e\u9078\u629e\u7bc4\u56f2\u30c6\u30ad\u30b9\u30c8\u3092\u7de8\u96c6\u3059\u308b Fluent UI React v9 \u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u305f #React &#8211; Qiita<\/ul>\n<p>\u4ee5\u524d\u6211\u53d1\u5e03\u670d\u52a1\u7684\u65f6\u5019\uff0c\u6211\u8ba4\u4e3a\u66f4\u65b0\u9891\u7387\u53ef\u80fd\u4f1a\u5f88\u4f4e\uff0c\u6240\u4ee5\u6211\u901a\u8fc7gh-pages\u5206\u652f\u624b\u52a8\u90e8\u7f72\u3002\u5e94\u8be5\u53ef\u4ee5\u4ee5\u76f8\u540c\u7684\u65b9\u5f0f\u8fdb\u884c\u53d1\u5e03\u3002<\/p>\n<p>\u8fd9\u4e00\u6b21\u6211\u4eec\u5c06\u4f7f\u7528 GitHub Actions \u8fdb\u884c\u90e8\u7f72\uff0c\u4ee5\u4fbf\u66f4\u5bb9\u6613\u8fdb\u884c\u66f4\u65b0\u3002<\/p>\n<h2>\u4f7f\u7528 GitHub Actions \u8fdb\u884c\u90e8\u7f72<\/h2>\n<p>\u53d1\u5e03\u6545\u4e8b\u4e66<\/p>\n<p>\u5728\u516c\u5f0f\u9875\u9762\u4e2d\u63d0\u5230\u4e86\u63a8\u8350\u7684\u8bbe\u7f6e\u65b9\u6cd5\u3002\u5f53\u4e3b\u5206\u652f\u53d1\u751f\u66f4\u6539\u65f6\uff0c\u53ea\u9700\u4fee\u6539\u4e24\u4e2a\u5730\u65b9\uff0c\u5373\u5c06storybook-static\/\u4ee5\u53ca\u5176\u4e0b\u7684\u5185\u5bb9\u8fdb\u884c\u516c\u5f00\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\"># Workflow name<\/span>\r\n<span class=\"na\">name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">Build and Publish Storybook to GitHub Pages<\/span>\r\n\r\n<span class=\"na\">on<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"c1\"># Event for the workflow to run on<\/span>\r\n  <span class=\"na\">push<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">branches<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">main\"<\/span>\r\n\r\n<span class=\"na\">permissions<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">contents<\/span><span class=\"pi\">:<\/span> <span class=\"s\">read<\/span>\r\n  <span class=\"na\">pages<\/span><span class=\"pi\">:<\/span> <span class=\"s\">write<\/span>\r\n  <span class=\"na\">id-token<\/span><span class=\"pi\">:<\/span> <span class=\"s\">write<\/span>\r\n\r\n<span class=\"c1\"># List of jobs<\/span>\r\n<span class=\"na\">jobs<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">deploy<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">runs-on<\/span><span class=\"pi\">:<\/span> <span class=\"s\">ubuntu-latest<\/span>\r\n    <span class=\"c1\"># Job steps<\/span>\r\n    <span class=\"na\">steps<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"c1\"># Manual Checkout<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"na\">uses<\/span><span class=\"pi\">:<\/span> <span class=\"s\">actions\/checkout@v3<\/span>\r\n\r\n      <span class=\"c1\"># Set up Node<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"na\">uses<\/span><span class=\"pi\">:<\/span> <span class=\"s\">actions\/setup-node@v3<\/span>\r\n        <span class=\"na\">with<\/span><span class=\"pi\">:<\/span>\r\n          <span class=\"na\">node-version<\/span><span class=\"pi\">:<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">16.x\"<\/span>\r\n\r\n      <span class=\"c1\">#? Add Storybook build and deploy to GitHub Pages as a step in the workflow<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"na\">uses<\/span><span class=\"pi\">:<\/span> <span class=\"s\">bitovi\/github-actions-storybook-to-github-pages@v1.0.1<\/span>\r\n        <span class=\"na\">with<\/span><span class=\"pi\">:<\/span>\r\n          <span class=\"na\">path<\/span><span class=\"pi\">:<\/span> <span class=\"s\">storybook-static<\/span>\r\n<\/code><\/pre>\n<p>\u53ea\u9700\u5728 GitHub \u4ed3\u5e93\u8bbe\u7f6e\u7684 GitHub Pages \u4e2d\uff0c\u5c06\u6e90\u9009\u62e9\u4e3a GitHub Actions (Beta)\uff0c\u8bbe\u7f6e\u5b8c\u6210\u3002\u4ee5\u540e\u7684\u53d1\u5e03\u64cd\u4f5c\u53ef\u4ee5\u4ea4\u7ed9 GitHub Actions \u5904\u7406\u3002<\/p>\n<h1>\u6700\u540e<\/h1>\n<p>\u4f7f\u7528Storybook\u5bf9\u56fe\u50cf\u8fdb\u884c\u6574\u7406\uff0c\u5e76\u5728GitHub Pages\u4e0a\u516c\u5f00\u3002\u8f9b\u82e6\u4e86\u3002<\/p>\n<p>\u5728\u7cfb\u7edf\u7a33\u5b9a\u8fd0\u884c\u7684\u540c\u65f6\uff0c\u6211\u4f1a\u4e0d\u5b9a\u671f\u5730\u5236\u4f5c\u5e7b\u706f\u7247\u3002\u8bf7\u591a\u591a\u5173\u7167\u3002<\/p>\n<section>ABC318 \u5df2\u7ecf\u7ed3\u675f\u4e86\u3002\u6ca1\u6709\u592a\u591a\u9700\u8981\u52aa\u529b\u7684\u5730\u65b9\u3002<\/p>\n<p>\u5728 Twitter \u4e0a\u4ee5\u524d\u4f1a\u663e\u793a og:title \u7b49\u94fe\u63a5\u4fe1\u606f\uff0c\u4f46\u57282023\u5e7410\u6708\u7684\u89c4\u683c\u66f4\u6539\u4e2d\u88ab\u5220\u9664\u3002\u5373\u4f7f\u8bbe\u7f6e\u4e86\u4fe1\u606f\uff0c\u5982\u4f55\u663e\u793a\u6216\u4e0d\u663e\u793a\u8be5\u4fe1\u606f\u4ecd\u7136\u53d6\u51b3\u4e8e\u5404\u4e2a\u670d\u52a1\u63d0\u4f9b\u5546\u3002<\/section>\n<p><\/iframe><\/p>\n<p><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u5148 \u5f53\u6211\u5728\u89e3\u51b3AtCoder\u7ade\u8d5b\u7684\u95ee\u9898\u65f6\uff0c\u5076\u5c14\u4f1a\u60f3\u8981\u753b\u89e3\u9898\u56fe\u3002\u6211\u66fe\u57282023\u5e7411\u67084\u65e5\u753b\u4e86ABC327-F [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38510","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u56fe\u5728github-pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u5f53\u6211\u5728\u89e3\u51b3AtCoder\u7ade\u8d5b\u7684\u95ee\u9898\u65f6\uff0c\u5076\u5c14\u4f1a\u60f3\u8981\u753b\u89e3\u9898\u56fe\u3002\u6211\u66fe\u57282023\u5e7411\u67084\u65e5\u753b\u4e86ABC327-F [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u56fe\u5728github-pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-01T17:33:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T22:49:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d351837434c4406c6b385\/2-0.png\" \/>\n<meta name=\"author\" content=\"\u6e05, \u626c\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u626c\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/\",\"name\":\"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-05-01T17:33:34+00:00\",\"dateModified\":\"2024-05-03T22:49:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461\",\"name\":\"\u6e05, \u626c\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u626c\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u56fe\u5728github-pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66","og_description":"\u9996\u5148 \u5f53\u6211\u5728\u89e3\u51b3AtCoder\u7ade\u8d5b\u7684\u95ee\u9898\u65f6\uff0c\u5076\u5c14\u4f1a\u60f3\u8981\u753b\u89e3\u9898\u56fe\u3002\u6211\u66fe\u57282023\u5e7411\u67084\u65e5\u753b\u4e86ABC327-F [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u8bd5\u56fe\u5728github-pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-01T17:33:34+00:00","article_modified_time":"2024-05-03T22:49:30+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d351837434c4406c6b385\/2-0.png"}],"author":"\u6e05, \u626c","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u626c","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/","name":"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-05-01T17:33:34+00:00","dateModified":"2024-05-03T22:49:30+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6211\u8bd5\u56fe\u5728GitHub Pages\u4e0a\u6574\u7406\u7f16\u7a0b\u7ade\u8d5b\u7684\u89e3\u8bf4\u56fe\u7247\uff0c\u5f62\u6210\u6545\u4e8b\u4e66"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461","name":"\u6e05, \u626c","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","caption":"\u6e05, \u626c"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e8%af%95%e5%9b%be%e5%9c%a8github-pages%e4%b8%8a%e6%95%b4%e7%90%86%e7%bc%96%e7%a8%8b%e7%ab%9e%e8%b5%9b%e7%9a%84%e8%a7%a3%e8%af%b4%e5%9b%be%e7%89%87%ef%bc%8c%e5%bd%a2%e6%88%90%e6%95%85\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38510"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38510\/revisions"}],"predecessor-version":[{"id":96770,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38510\/revisions\/96770"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}