https://lolipopj.github.io/component---src-templates-post-tsx-cont…m-personal-page-mdx-b35e6a5f3c719fe5db2c.js

1"use strict";(self.webpackChunkhomepage=self.webpackChunkhomepage||[]).push([[5866],{4605:function(e,n,a){a.r(n),a.d(n,{Head:function(){return w},default:function(){return v}});var t=a(5676),l=a(758);function s(e){const n=Object.assign({h2:"h2",img:"img",h3:"h3",p:"p",span:"span",strong:"strong",a:"a",ul:"ul",li:"li"},(0,t.R)(),e.components);return l.createElement(l.Fragment,null,l.createElement(n.h2,null,"效果展示"),"\n",l.createElement(n.img,{src:"/static/00af22326303679ad290885d1f80883e/showcase.gif",alt:"showcase"}),"\n",l.createElement(n.h2,null,"教程"),"\n",l.createElement(n.h3,null,"在开始之前"),"\n",l.createElement(n.p,null,"请确保您的 Steam 等级 >= 10 级，否则将无法使用个人资料展柜。"),"\n",l.createElement(n.h3,null,"切割背景图片"),"\n",l.createElement(n.p,null,"基于 Steam Design 实现背景图片的切割，减少繁复劳作。"),"\n",l.createElement(n.p,null,"浏览器打开个人资料主页，按 ",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">F12</code>'}})," 打开控制台，在 ",l.createElement(n.strong,null,"元素（Elements）")," 标签页找到当前使用的背景图的 URL："),"\n",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 624px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/4b4c646211f563a2e213abcfd059828d/5b481/find-artwork-url.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 88.46153846153847%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAADm0lEQVR42nVUWW/bRhjU72hiW5RE8eaSy+UliqKo07JjSbYDH4kTwH0o0KcWbdH4309naaco0PZhsAe5s98xsz0xNlDFEaZRgFZJbIMhFuEYVZpjxr1tZGGZBFglIdYqwEaMcZAmtsLETozQCguFTDH3DDT8r+cPT1DHAeYkWOcZNtMGh9THdWLiVln4IEmYJVhMKtTlDLXKsBQOGn+IiTtA4w2QOkN4g1Oo0H0lTIVAllZQseRmiInTx8I3ULsGppzXzhkj6GPKdeUNUdjcc/sd6ZSkMbN0jBOe9TThKaQzQl0tkMqCxAVmcYg5o6hDGyvpYRl7WHNcxQ5aZhO6DkJ7jGg8IM6QjPuQ5hlSTRiMzqCR+zZqKbFMJVaZxDqNsVICF2WKba66vS2x4PdtkaJNIqxCE1eRiWNi4RiznqxxLySZyy

1h1ejdFiEMW4pj5uM1dfC4cPBY2PnG8z208ELephbvC75oxD0eM2kbLxjXBiH0Q6AmzD43YYoHTBEvevsxinOcR7mcR7hqJB+J+FuOmErieCOxLgVWZYzdRuOHFHwsXF2zkjFn1FrlES4L1JMXT/hI/3hzw/GGJn45LvDxd4dvTHi9fDvjj8bJbv3w94PeHC/z6eMBvnw74xm8vTwf8+fkKX/cb9DTZPGU9ihg/f9zhl7sdnnZzXJ9vcb9p8byt8LypcLtq8LBrOU6xbwoc5zkOTY5jO8H1osJ1W+JyPmENma6GilIUeYvED+AOTuCNDHisrce5VoJLnTnfQYn8c+4a72H33yEJ3FfZxPYQWVJCiZhjhoaSWdExrT/COR3RBiaqwEYhQuShQGIZkFoq1J/Q0rFNBDqov3Xo8edigSxOUNAJDfXXknBO4W5I2JB4TlLdyZrzFbu7JKa+CcWziZCdLlXovDpFiQiKoo48F9WbC2paakm3xNYQUSAQ++wi9yo6o3QMFO6IkY2RhBGEbcEzfmDKb8JOSZjTdpUMUfKWUriEw0fDR6ZTjXyowGFpBhCj01e81T40jQ4ea1lS7B2hDCKkTLelC86p/G1M5fNhmEUu2iLDNFGoCUVCnZqO6LvDNDSxy6Y0ZUZhs7hF3kCpCg2fr2NEgQcWvRtgJhPWadylOOOjUPJVibyA6Yf/JjTeYUZT9ARrlEnezvyVa77CsxC5465ZAbvo85CWiLaoP3jf4X8JkyBAGiUkMZHxgdBjzrql3phrC5KS0ll0BzuC/hv+m/AvSnI92NCFwFQAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="find-artwork-url"\n        title=""\n        src="/static/4b4c646211f563a2e213abcfd059828d/39c09/find-artwork-url.png"\n        srcset="/static/4b4c646211f563a2e213abcfd059828d/680fe/find-artwork-url.png 156w,\n/static/4b4c646211f563a2e213abcfd059828d/17474/find-artwork-url.png 312w,\n/static/4b4c646211f563a2e213abcfd059828d/39c09/find-artwork-url.png 624w,\n/static/4b4c646211f563a2e213abcfd059828d/5b481/find-artwork-url.png 846w"\n        sizes="(max-width: 624px) 100vw, 624px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",l.createElement(n.p,null,"例如，笔者目前的背景图的 URL 为："),"\n",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="plaintext"><pre class="language-plaintext"><code class="language-plaintext">https://media.st.dl.eccdnx.com/steamcommunity/public/images/items/2855140/e2a8428a48f49312a3fe5c45206b998af76910e8.mp4</code></pre></div>'}}),"\n",l.createElement(n.p,null,"由于 Steam Design 站点无法跨域访问 Steam CDN 上的文件，需替换链接地址为 ",l.createElement(n.a,{href:"https://backgrounds.gallery/"},"Backgrounds Gallery")," 的地址，即替换地址中的域名 ",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">media.st.dl.eccdnx.com</code>'}})," 为 ",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">steamcdn-a.akamaihd.net</code>'}}),"。替换后的 URL 形如："),"\n",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="plaintext"><pre class="language-plaintext"><code class="language-plaintext">https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/2855140/e2a8428a48f49312a3fe5c45206b998af76910e8.mp4</code></pre></div>'}}),"\n",l.createElement(n.p,null,"浏览器访问 ",l.createElement(n.a,{href:"https://steam.design/"},"Steam Design"),"，将替换后的 URL 粘贴到左侧输入框："),"\n",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 624px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/1384d125cc7454776977223213d74fc3/19bb3/download-pre-cut-artworks.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 59.61538461538461%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAADYElEQVR42iWSW0zTBxjF/8MsE3u/UnoRKigZbgNBdMNyD/MyWwdWyqV/qMqAUltUoDAQMULipIhcIg5ISxiyuSFLgW3IBmrcFlzioi7bHvZk9rjHPez1t657+pKTfOc753xHyDk7SWnzZxTVfM57hd0MeHsJXuwjYBe54ulErG3BfuQEZSUV5BeUU5VbTE1eGfUZNjxvFOHOyKcvs5zNnDo299UhONSVnLWcxqupp8JaSVXHNXyXhvH6umkL3uaUy8uxw3aK3nVis5VRXHqY948Xc6bSjttZjbPCSVfnFUZH7jBvP4+glGkw6k1o5Gp2Wd+i0T+G3z+A6PYjuhro9TXjOHqcfXkllJYco8blpq3JQ+BcK+1t7ZwRG7ne3snsnQn6GzsRTDoDO41mjDo9ttezmBgcoOfqOWZHe/l7a5F/frnP3NgIkYlpnj34nj9+esLGapQ2X4BAq5cqpwvPyRYuX+igq6MbIcOUwt60PaSbrZQffJufvw4TGHQyeL2bl4+XefF4nT+fP+ev33/l5bMXbG0+YiEyjUd04W+qx1/jxFHeQLA1yOD4aMyyQo1Wl0xKagY5BUcYCi8wfMnHUiTC0/UvefLdN/y29ZQfNjaILt1j5e4Ekzf7qKx18aHjBE35xXhrWrh4vp+p+TCCXKlBrlTzWqKM3Jz9+Dv6Yk8J8WB1LWbxIY/WvmVjZZH1aJgv7s6wvPQJQ7EI6twizYdKyc88iMvtZSryMaPTIwg7pAo02iRe3S4hLzubh8tfsbmyxuL8AhvRT/nxfoTV6AyXx4e4OjVJNHqPubkIotjAgcKjVJyqpjvYQ2h0jAuD/f8TqjV6JDIlSpUWT51IR1cPI0N9saw+YvjWDbpCNwiOjxGauU14dprQzWFEz2lOivU4Yra9fj+1HzRRUFqGoFDIkEgSkcmkbE9MRBAEEhJeQaFUIVXqkat0qFSxapkspKamYTCnYDDuRG8wo0+2oNUbkUiVbEvYFt8Vsg44yH6ngjybE4s1Kw5KZGoS5f+pViFT6pAoDOxQGjBZM7GY05HKtXFcqohNlT5+WJ9kiglJQLBXX6Ou+Rbu1kly8yvjhBazgUN5u8neX0iycQ97d0kpTJdjS1OQ/GYaaRmpmJKTsMYqZ9Tq2J1uJtWaElf4L88I5/4sPMnDAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="download-pre-cut-artworks"\n        title=""\n        src="/static/1384d125cc7454776977223213d74fc3/39c09/download-pre-cut-artworks.png"\n        srcset="/static/1384d125cc7454776977223213d74fc3/680fe/download-pre-cut-artworks.png 156w,\n/static/1384d125cc7454776977223213d74fc3/17474/download-pre-cut-artworks.png 312w,\n/static/1384d125cc7454776977223213d74fc3/39c09/download-pre-cut-artworks.png 624w,\n/static/1384d125cc7454776977223213d74fc3/6d2da/download-pre-cut-artworks.png 936w,\n/static/1384d125cc7454776977223213d74fc3/5a791/download-pre-cut-artworks.png 1248w,\n/static/1384d125cc7454776977223213d74fc3/19bb3/download-pre-cut-artworks.png 2066w"\n        sizes="(max-width: 624px) 100vw, 624px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}

1),"\n",l.createElement(n.p,null,"便有了实时预览效果！点击左上方的 ",l.createElement(n.strong,null,"Download ZIP")," 按钮，下载切割后的文件即可。"),"\n",l.createElement(n.p,null,"对于动态背景，由于 Steam 艺术作品不支持 ",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.mp4</code>'}})," 格式，因此需要手动转为 ",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.gif</code>'}})," 文件。笔者使用了 ",l.createElement(n.a,{href:"https://www.screentogif.com/"},"ScreenToGif")," 工具转换，此处不表。"),"\n",l.createElement(n.h3,null,"上传艺术作品"),"\n",l.createElement(n.p,null,"浏览器打开 Steam ",l.createElement(n.a,{href:"https://steamcommunity.com/sharedfiles/edititem/767/3/"},"上传艺术作品"),"页面。"),"\n",l.createElement(n.p,null,"给艺术作品取一个名字。可以使用特殊字符来隐藏显示，例如复制下面的内容："),"\n",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="plaintext"><pre class="language-plaintext"><code class="language-plaintext">󠀡󠀡</code></pre></div>'}}),"\n",l.createElement(n.p,null,"选择刚刚的艺术作品。"),"\n",l.createElement(n.p,null,"打开控制台，在 ",l.createElement(n.strong,null,"控制台（Console）")," 标签页输入如下代码（返回值如果为 0 的话，请等待艺术作品上传成功或重新选择艺术作品）："),"\n",l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token comment">// 这段代码修改了上传的艺术作品的高度和宽度，避免在展柜里错误的显示效果</span>\n<span class="token keyword">const</span> num <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token string">"image_width"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>\ndocument<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token string">"image_height"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>\ndocument<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token string">"image_width"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">=</span> num <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",l.createElement(n.p,null,"描述无需填写。"),"\n",l.createElement(n.p,null,"设置可见性为 ",l.createElement(n.strong,null,"公开"),"。"),"\n",l.createElement(n.p,null,"保证艺术作品是你创作的。好吧，勾选它吧。"),"\n",l.createElement(n.p,null,"最后提交即可！重复上述步骤，上传另一张艺术作品。"),"\n",l.createElement(n.h3,null,"设置展柜"),"\n",l.createElement(n.p,null,"前往 ",l.createElement(n.strong,null,"编辑个人资料 - 已展示的展柜")," 页面，将第一个展柜选择为 ",l.createElement(n.strong,null,"艺术作品展柜"),"。"),"\n",l.createElement(n.p,null,"等待艺术作品审核通过，选择刚刚上传的两张艺术作品即可。"),"\n",l.createElement(n.h2,null,"参考教程"),"\n",l.createElement(n.ul,null,"\n",l.createElement(n.li,null,l.createElement(n.a,{href:"https://blog.csdn.net/qq_44275286/article/details/107031450"},"【小教程】steam长展柜制作")),"\n",l.createElement(n.li,null,l.createElement(n.a,{href:"https://blog.yuki.sh/posts/daf9288c81ba"},"手把手教你如何美化 Steam 主页")),"\n"))}var c=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,t.R)(),e.components);return n?l.createElement(n,e,l.createElement(s,e)):s(e)},r=a(5643),o=a(9182),i=a.n(o),p=a(2838),m=a.n(p),u=a(4579),d=a.n(u),g=a(2030),h=a(7531),f=a(1099),b=a(4490),E=a(3625),k=a(5672),y=a(1579);i().extend(d()),i().extend(m());const A={a:e=>{let{href:n="",children:a}=e;const t=!(null!=n&&n.startsWith("#")),s=t?n:`#${encodeURIComponent(n.slice(1))}`;return l.createElement("a",{href:s,target:t?"_blank":void 0,rel:"noreferrer"},a)},img:e=>{const{alt:n="The author is too lazy to give an alt",src:a,...t}=e;return l.createElement("a",{href:a,"data-fancybox":"gallery","data-caption":n},l.createElement("img",Object.assign({src:a,alt:n},t)))},Card:h.A,Link:g.Link,HintText:f.A},x=e=>{var n;let{children:a,data:s}=e;const{mdx:{fields:{isDraft:c},frontmatter:{title:o,date:p,updated:m,categories:u,tags:d,timeliness:h}}}=s,f=l.useRef(null),b=i().utc(p).tz("Asia/Shanghai"),x=m?i().utc(m).tz("Asia/Shanghai"):b,[w,v]=l.useState(null),T=null!==w?w.diff(x,"days"):null,S="number"==typeof h?h:365,j=null!==T&&S>=0&&T>=S;return l.useEffect(()=>{l.startTransition(()=>v(i()().tz("Asia/Shanghai")))},[]),l.useEffect(()=>{var e;const n=null===(e=f.current)||void 0===e?void 0:e.querySelectorAll("a.gatsby-resp-image-link");

1return null==n||n.forEach(e=>{const n=e.children.item(1);e.setAttribute("data-fancybox","gallery"),e.setAttribute("data-caption",n.alt)}),r.lX.bind("[data-fancybox]",{on:{initLayout:e=>{var n,a;null===(n=e.getContainer())||void 0===n||n.setAttribute("theme",null!==(a=document.documentElement.dataset.theme)&&void 0!==a?a:"light")}}}),()=>r.lX.unbind("[data-fancybox]")},[]),(0,y.A)(f),l.createElement("div",{className:"mx-auto flex max-w-xl flex-col gap-y-12"},l.createElement("div",{className:"flex flex-col gap-4"},(null==u?void 0:u.length)&&l.createElement(g.Link,{to:`/categories/${encodeURIComponent(u[0])}`,className:"w-fit rounded bg-background-lighter px-3 py-2 leading-normal transition-opacity hover:opacity-75"},l.createElement("span",{className:`cursor-pointer bg-gradient-to-tr from-0% via-40% to-90% bg-clip-text text-lg font-bold leading-none text-transparent ${null!==(n=k.Y[u[0]])&&void 0!==n?n:""}`},u[0])),l.createElement("h1",{className:"text-3xl font-bold"},o),l.createElement("div",{className:"item-secondary flex flex-col gap-2 lg:flex-row"},p&&l.createElement("span",{title:`首次发布于：${b.format("YYYY-MM-DD HH:mm:ss [UTC+8]")}\n最后更新于：${x.format("YYYY-MM-DD HH:mm:ss [UTC+8]")}`},b.format("MM 月 DD 日 YYYY 年")),(null==d?void 0:d.length)&&l.createElement("div",{className:"flex flex-1 flex-wrap gap-2 lg:before:content-['•']"},d.map(e=>l.createElement(E.A,{key:e,name:e,className:"item-secondary item-selectable"}))))),l.createElement("article",{ref:f,className:"heti post-entry"},c&&l.createElement("blockquote",{className:"!border-red-400"},"这是一篇",l.createElement("strong",null,"尚未正式发布"),"的博客，内容可能暂不完善或存在纰漏，建议您仔细评估文章的可靠性。"),j&&null!==T&&l.createElement("blockquote",{className:"!border-orange-400"},"这是一篇",l.createElement("strong",null,"最后更新于 ",T," 天前"),"的博客，内容可能随着时间的推移而变得不再适用，建议您仔细评估文章的有效性。"),l.createElement(t.x,{components:A},a)))},w=e=>{let{data:n}=e;return l.createElement(b.A,{title:String(n.mdx.frontmatter.title)})};function v(e){return l.createElement(x,e,l.createElement(c,e))}}}]);
2//# sourceMappingURL=component---src-templates-post-tsx-content-file-path-blog-drafts-beatify-steam-personal-page-mdx-b35e6a5f3c719fe5db2c.js.map