跳到主要内容

如何使用盖茨比建立博客网站

Build a blogging site with Gatsby

像React这样的框架只向客户端发送JavaScript,然后用于在屏幕上创建元素。加载到页面上的HTML很少,因为所有内容都是在加载完所有内容后在客户端生成的。

在具有动态数据的项目中,例如博客或商店,JavaScript必须先下载,然后才能获取任何其他数据。即使使用速度提升技术(如代码拆分),如果捆绑包无法下载,整个站点也将停止工作。

静态站点生成器采用动态内容并创建可供服务的预构建页面。如果数据确实发生了变化,则可以重建项目并提供新内容。最终结果是提高了速度,可扩展性以及 - 无需与数据库保持连接 - 安全性。虽然这种方法不适合不断变化的数据,例如滚动新闻网站,但许多项目都可以从中受益。

盖茨比是一个基于React构建的静态站点生成器。通过使用GraphQL和插件,它可以从不同的源获取数据并将它们传递给组件。完成此操作后,它会分析项目并生成HTML文件以供客户端使用,而React和应用程序逻辑将在后台下载。

下载文件本教程。

开始吧

Build a blogging site with Gatsby: Get started

在初始化之后,Gatsby提供了一个示例站点,包括两个基本页面组件

首先,我们可以让Gatsby为我们制定一个基本项目。它提供了一个我们可以使用的开发服务器以及一些有用的开发人员工具。确保Node和npm是最新的并运行Npx Gatsby新盖茨比网站在命令行上,“gatsby-site”是要构建的文件夹。

在该文件夹中,Gatsby提供了一些命令作为初始化过程的一部分。运行这些将使构建网站更容易。跑Npm Run Develop启动开发服务器并在浏览器中自动更新任何更改。

所有内容都位于/ Src文件夹中,任何安装文件都以项目根目录中的“gatsby-”为前缀。一切都通过组件工作,组件不需要任何额外的结构或行为,以便使用Gatsby预先构建。

/ src / pages文件夹的内容很特殊。 Gatsby将获取该文件夹中的任何组件来创建页面。打开index.js并清除组件的内容。请注意,我们保存时页面会在浏览器中更新。

const IndexPage =()=>(  {/ *空* /} 

建立一个页面

每篇博文都需要自己的页面。可以为每个新帖子创建一个页面组件,但这会为那些不习惯React的人创建一个屏障,并且随着设计的变化,将来还需要更多的维护。

Gatsby有一个充满插件的库,可以改变它生成页面的方式,可以在gatsbyjs.org/plugins找到。在那里我们可以找到两种类型的插件 - “源”和“变换器”。

源插件将从源获取数据并将其转换为“节点”,这就是Gatsby处理站点内信息的方式。可以在本地获取数据以获取图像等文件,也可以远程获取外部数据(如数据库)。

然后,变换器插件可以获取这些节点并创建新节点,以便Gatsby更轻松地使用它们。例如,默认情况下无法解析YAML文件,但变换器插件可以将其中的嵌套语法转换为对象以读取组件内部。

Markdown是用于文本的常用格式,因为它功能多样,易于阅读并且可以转换为HTML。源插件“gatsby-source-filesystem”可以在本地获取文件并将它们转换为节点,而转换插件“gatsby-transformer-remark”使用Remark将Markdown转换为我们可以接收并使用GraphQL查询的内容。

初学者项目已经附带了源插件。通过运行安装另一个Npm Install Gatsby-transformer-remark。请注意,可能需要重新启动开发服务器才能将其接收。

设置插件

安装插件后,Gatsby需要被告知如何使用它。所有这些逻辑都保存在开始时生成的“gatsby-config.js”文件中。它配备了几个已经开箱即用的插件,但是我们需要添加我们的插件以便能够拾取和使用Markdown。

没有设置过程的简单插件可以作为字符串添加。由于转换插件只有一个作业,因此不需要设置。但是,必须告诉源插件在哪里找到帖子。将它们添加到plugins数组的底部。

插件:[[...]“gatsby-transformer-remark”,{resolve:`gatsby-source-filesystem`,options:{name:`pages`,path:`$ {_ _ dirname} / src / pages`}}]

因为每个帖子都将成为自己的页面,所以将它们添加到src / Pages文件夹是有意义的。这些设置选项告诉Gatsby查看该文件夹并提取任何文件。

创建一篇博文

Build a blogging site with Gatsby: Create a blog post

头盔可以用来添加每个帖子的元素,例如使用帖子标签作为关键字

有了插件,我们可以创建我们的第一篇文章。创建一个名为“my-first-post”的文件夹,并在其中添加“my-first-post.md”Markdown文件。此约定使我们能够在帖子本身旁边添加任何相关文件(如图像)。

我们需要在此帖子中添加一些Markdown,以便我们知道它正在按预期工作。

---路径:/ post / my-first-post date:2018-12-01 summary:post summary标签:[my,first,post] title:My First Post ---这是我的第一篇帖子!

文件顶部的破折号之间的内容称为“前端内容”。这将包含正在编写的帖子周围的元数据,例如日期和标题。所有这些数据都将由Remark选取,并可在GraphQL中查询。

在这种情况下,关键的前端问题是路径值。这是帖子将存在的地方,并且需要是唯一的。盖茨比将阅读路径并在那里制作新页面。

在我们展示帖子之前,我们需要一个页面组件来显示帖子。它需要能够将值作为道具并将内容显示为HTML块。

在“src / BlogPost.js”创建一个新组件。关于每个帖子的信息将作为一个数据来自GraphQL的道具。

import来自'react'impate {graphql}的'react'导入{graphql}来自'react-helmet'的导入来自'../components/layout'导出的导入const的博客=({data:{markdownRemark}})=> {const {frontmatter,html} = markdownRemark return( 
)}

与Gatsby捆绑在一起的“react-helmet”软件包使我们能够更新通常存在于其中的值一个HTML页面。在这里,我们将帖子的标题设置为 </ HTML></strong>页面本身。它接受了许多其他选项,您可以在其中找到更多信息<a href="https://github.com/nfl/react-helmet" rel="nofollow" target="_blank">github.com/nfl/react-helmet</a>。</p><h2 id="query-for-data">查询数据</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Build a blogging site with Gatsby: Query for data" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/KZ3qNUGmag5G9MyhP8qvxa-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/KZ3qNUGmag5G9MyhP8qvxa-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/KZ3qNUGmag5G9MyhP8qvxa-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/KZ3qNUGmag5G9MyhP8qvxa-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/KZ3qNUGmag5G9MyhP8qvxa.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/KZ3qNUGmag5G9MyhP8qvxa.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">Gatsby附带了GraphQL,可用于帮助测试查询。运行开发服务器并前往localhost:8000 / ___ graphql</span></figcaption></figure><p>此时,Gatsby没有为此页面提供数据的数据。我们需要从Markdown文件中获取数据以填充此信息。为此,我们可以使用GraphQL--一种由Facebook创建的查询语言,可将相关数据导入React组件。简而言之,GraphQL定义了通过使用嵌套对象返回数据的结构。这样,我们只查询我们实际使用的数据。</p><p>Gatsby提供了一个可以解释查询的模板文字函数。它将检测它的任何使用并将其结果作为道具传递到组件中。这意味着我们可以在同一个文件中添加查询并将相关逻辑保持在一起。</p><pre class="line-numbers language-javascript" language="javascript"><code>export const pageQuery = graphql` query($ path:String!){markdownRemark(frontmatter:{path:{eq:$ path}}){html frontmatter {date(formatString:“D MMMM YYYY”)title}}}`</code></pre><p>在这个查询中,我们向Gatsby询问所有Markdown节点的路径是否与我们所在的页面相匹配。如果找到一个,它会将所呈现的HTML,日期和帖子标题传递给组件。</p><p>以这种方式编写查询仅限于页面组件。需要查询节点的任何其他组件必须使用<strong><StaticQuery></strong>然后加载它。此时,开发服务器可能会为此发出警告<strong>博文</strong>组件,但这是因为它不知道它将成为页面组件。让我们改变这一点。</p><h2 id="generate-pages">生成页面</h2><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Build a blogging site with Gatsby: Generate pages" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/w5PmsZSUsM9FELsEFKAsxa-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/w5PmsZSUsM9FELsEFKAsxa-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/w5PmsZSUsM9FELsEFKAsxa-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/w5PmsZSUsM9FELsEFKAsxa-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/w5PmsZSUsM9FELsEFKAsxa.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/w5PmsZSUsM9FELsEFKAsxa.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">如果您看到“getNodesByType不是函数”错误,则已下载过期的Gatsby版本。运行npm update修复了这个问题</span></figcaption></figure><p>默认情况下,Gatsby只为其中的组件创建页面<strong>/ Src目录/页</strong>,这意味着我们需要以其他方式创建页面。</p><p>Gatsby从其构建过程中公开了一些方法来帮助访问数据节点。这些可以通过项目根目录中的“gatsby-node.js”访问。在这种情况下,我们将使用GraphQL来获取所有博客帖子并让它们<strong>CreatePages</strong>回调为每个回调生成一个页面。由于这是一个异步操作,我们需要返回一个Promise,以便Gatsby可以继续构建过程。</p><pre class="line-numbers language-javascript" language="javascript"><code>const path = require('path')exports.createPages =({actions,graphql})=> {return graphql(`{allMarkdownRemark {edges {node {frontmatter {path}}}}}`)}</code></pre><p>回调的第一部分是一个获取每个帖子的路径的查询,因为每个页面将获得自己的数据。 GraphQL调用返回一个包含所有帖子的Promise。我们可以使用其中的数据生成一些页面。</p><pre class="line-numbers language-javascript" language="javascript"><code>.then(result => {if(result.errors){return Promise.reject(result.errors)} const blogPostTemplate = path.resolve('src / components / BlogPost.js')result.data.allMarkdownRemark.edges.forEach (({node})=> {actions.createPage({path:node.frontmatter.path,component:blogPostTemplate,})})})</code></pre><p>如果查询遇到错误,请暂停构建过程以找出原因。如果一切正常,请获取所制作的组件并调用<strong>CreatePage</strong>在提供的路径上生成页面的方法。</p><p>随着页面的生成,现在所需要的只是一种查找它们的方法。我们可以在现有索引页面组件上使用查询来执行此操作。</p><pre class="line-numbers language-javascript" language="javascript"><code>export const pageQuery = graphql` query {allMarkdownRemark(sort:{fields:[frontmatter ___date],order:DESC}){edges {node {frontmatter {path title}}}}}`;</code></pre><p>在此查询中,我们只对帖子的标题和路径感兴趣。我们还将一些参数传递给Remark,以便以相反的顺序获取最新的帖子。特别是这个查询是从每个帖子的前端问题检查日期。每个查询的语法将取决于用于生成它的插件。</p><figure data-bordeaux-image-check="data-bordeaux-image-check"><p class="vanilla-image-block"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Build a blogging site with Gatsby: Styling content" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/bmQzD4WcTYJhpk8Ct7fPxa-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/bmQzD4WcTYJhpk8Ct7fPxa-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/bmQzD4WcTYJhpk8Ct7fPxa-650-80.jpg 650w, https://cdn.mos.cms.futurecdn.net/bmQzD4WcTYJhpk8Ct7fPxa-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/bmQzD4WcTYJhpk8Ct7fPxa.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/bmQzD4WcTYJhpk8Ct7fPxa.jpg" /></p><figcaption itemprop="caption description"><span class="caption-text">有了内容,博客可以使用任何CSS技术设置风格,包括CSS-in-JS解决方案,如样式组件</span></figcaption></figure><p>最后,组件需要更新才能使用数据。 Gatsby提供的“链接”组件使它能够知道它需要哪些组件来呈现该链接,并确保它相应地获取正确的包。</p><pre class="line-numbers language-javascript" language="javascript"><code>const IndexPage =({data})=> {return( <Layout> {data.allMarkdownRemark.edges.map(({node:{frontmatter:{path,title}}})=>( <Link key={path} to={path}> {标题} </Link> ))} </Layout> )}</code></pre><p>有了它,我们的博客就完成了。剩下的就是让它变得聪明起来,让Gatsby建立一个可以投入生产的网站。通过运行<strong>Npm Run Build</strong>它可以删除用于开发的任何增强功能,并生成准备部署的bundle。完成后,可以将“公共”文件夹上载到可以为静态站点提供服务的任何位置。</p><p><em>本文最初发表于314期</em><a href="https://www.n2v.net/net-magazine" target="_blank"><em>净</em></a><em>,这是全球最畅销的网页设计师和开发者杂志。</em><a href="https://www.myfavouritemagazines.co.uk/design/net-magazine-back-issues/net-january-2019-issue-314/" rel="nofollow" target="_blank"><em>在这里购买问题314</em></a><em>要么</em><a href="https://www.myfavouritemagazines.co.uk/design/net-magazine-subscription/" rel="nofollow" target="_blank"><em>订阅这里</em></a><em>。</em></p><p><strong>相关文章:</strong></p><ul><li><a href="https://www.n2v.net/web-design/best-blogging-platforms-121413634" target="_blank">16个最好的免费博客平台</a></li><li><a href="https://www.n2v.net/how-to/use-wordpress-as-a-headless-cms" target="_blank">使用WordPress作为无头CMS</a></li><li><a href="https://www.n2v.net/advice/how-to-code-faster-lighter-javascript" target="_blank">如何编写更快,更轻的JavaScript代码</a></li></ul><iframe width="100%" height="600" data-lazy-priority="low" data-lazy-src="https://future-publishing.msgfocus.com/k/Future-Publishing/net_signup"></iframe> </div> <div class="box"> <a class="block-link full" href="https://www.n2v.net/tag/web-design"><span class="chunk category">请参阅更多Web设计文章</span><div class="block-icon"><span class="icon icon-arrow-right"></span></div></a> </div> <div id="this-will-be-used-for-mpu-2"></div> <div class="box" id="articleTag"> <h3 class="separator-heading">话题</h3> <div class="tag"> <a href="https://www.n2v.net/tag/web-design">网页设计</a> </div> <div class="tag"> <a href="https://www.n2v.net/tag/magcontent">Magcontent</a> </div> <div class="tag"> <a href="https://www.n2v.net/net-magazine">Netmag</a> </div> <div class="tag"> <a href="https://www.n2v.net/tag/web-design">网页设计</a> </div> </div> <div class="box"> <h4 class="separator-heading">相关文章</h4> <ul class="media-list"> <li> <a href="https://www.n2v.net/news/web-design-news-roundup-2019"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Web design news roundup 2019: The stories that defined the year" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/ZgweJYtpFDbo7U7wL6gKvF.jpg" /> <span>网页设计新闻综述2019年:定义一年的故事</span> </a> </li> <li> <a href="https://www.n2v.net/news/kickstart-the-coding-career-of-your-dreams-with-this-master-bundle"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Kickstart the coding career of your dreams with this master web design bundle" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/9sEju7mf5NgBkzXp98BYph.jpg" /> <span>用这个主web设计包启动您梦想中的编码生涯。</span> </a> </li> <li> <a href="https://www.n2v.net/news/github-report-2019"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="GitHub 2019 report reveals the most popular language (for the 6th year running)" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/VLWbnCnxQ4NzqFJC5D88pg.jpg" /> <span>GitHub 2019年报告揭示了最流行的语言(连续第六年)</span> </a> </li> <li> <a href="https://www.n2v.net/features/best-javascript-frameworks"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="13 of the best JavaScript frameworks to try" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/DfEZw8JPPwYnSfjkQUkdhG.jpg" /> <span>13个最好的JavaScript框架</span> </a> </li> </ul> </div> </section> <script> window._taboola = window._taboola || []; var taboola_lists = []; function taboola_is_device(device) { if ((! device) || device === null || (typeof device) === 'undefined') return true if (device === 'amp') return false if (device === 'desktop' && window.screen.width >= 700) return true if (device === 'mobile' && window.screen.width < 700) return true return false } </script> <footer class="van_taboola" id="taboola-below-article-thumbnails"></footer> <script> if (taboola_is_device("")) { taboola_lists.push({ mode: "thumbnails-e", container: "taboola-below-article-thumbnails", placement: "Below Article Thumbnails", target_type: "mix" }); } </script> <footer class="van_taboola" id=""></footer> <script> if (taboola_is_device("amp")) { taboola_lists.push({ mode: "thumbnails-a", container: "", placement: "below-main-column", target_type: "" }); } </script> <script> for(var i = 0; i < taboola_lists.length; i++){ _taboola.push(taboola_lists[i]); } </script> <footer id="comment-jump"> </footer> </article> <aside id="sidebar"> <section class="recommended-content"> <div class="recommendation-container"> <h3>推荐的</h3> <div class="recommendation-articles"> <div class="recommended-article item-1"> <a href="https://www.n2v.net/news/creative-bloqs-job-of-the-week"> <div class="article-image-container item-1"> <div class="article-image item-1"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="(min-width: 900px) 610px,(min-width: 610px) 840px,(min-width: 500px) 610px,(min-width: 320px) 480px" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-480-80.jpg 480w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-610-80.jpg 610w, https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW-840-80.jpg 840w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/8qT2rPnRnC4uQBzSf42EmW.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-1">设计工作:在CreativeBloq中找到你梦寐以求的角色</h4> </a> </div> <div class="recommended-article item-2"> <a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380"> <div class="article-image-container item-2"> <div class="article-image item-2"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="(min-width: 900px) 610px,(min-width: 610px) 840px,(min-width: 500px) 610px,(min-width: 320px) 480px" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-480-80.jpg 480w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-610-80.jpg 610w, https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd-840-80.jpg 840w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/a5UrGBqnq8ARPppz49xpGd.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-2">78款最适合设计师的免费字体</h4> </a> </div> <div class="sponsored-post"><div style="width:100%"></div></div> </div> </div> </section> <section class="box newsletter-signup"> <h3 class="separator-heading"> <span> <i class="icon icon-envelope white"></i><span class="newsletter-title">获取每周提示和灵感</span> </span> </h3> <div class="grey-box"> <p>请在下面注册以获取Creative Bloq的最新信息,以及独家特别优惠,直接到您的收件箱!</p> <iframe style="width:100%" height="100" sandbox="allow-scripts allow-forms" data-lazy-src="//futureplc.slgnt.eu/optiext/optiextension.dll?ID=s6XsWnyjpNGgHmS9IDSe4kGMs9Z0hv5kXjNQUQiRO2tDkDpIITWHetB5caZtol9br5fEOvs9fVr9oPM92i&BRAND=CBQ" data-lazy-priority="low" scrolling="no"> </iframe> <footer> <small>没有垃圾邮件,我们保证。您可以随时取消订阅,未经您的许可,我们绝不会分享您的详细信息。</small> </footer> </div> </section> <section class="popular-box"> <div id="popular-box-wrapper" class="style1"> <div class="most-popular-tab-bar"> <input type="radio" name="popradio" id="popradio-1" checked /> <input type="radio" name="popradio" id="popradio-2" /> <div id="popularcontent"> <div class="flex-row"> <label class="poplabel" id="poplabel-1" for="popradio-1"> <span>最阅读</span> </label> <label class="poplabel" id="poplabel-2" for="popradio-2"> <span>最共享的</span> </label> </div> <ol class="popular-list active" id="poplist-1"> <li class="most-popular-item first-article"> <div style="width:100%"> <a href="https://www.n2v.net/photoshop/free-photoshop-brushes-11121140" aria-label="All the best free Photoshop brushes"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/6YFcevXuUDsFSTMjbhNwGL.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-1">1</span><h4><a href="https://www.n2v.net/photoshop/free-photoshop-brushes-11121140">最好的免费Photoshop刷子</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/software/ipad-apps-make-most-apple-pencil-121518448" aria-label="23 best iPad Pro apps for use with Apple Pencil"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/viiYZh25y4YMVdQYsjn3EH.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-2">2</span><h4><a href="https://www.n2v.net/software/ipad-apps-make-most-apple-pencil-121518448">23款最适合苹果铅笔使用的iPad Pro应用程序</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/the-10-best-christmas-ads-of-all-time" aria-label="The 10 best Christmas ads of all time"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-3">3</span><h4><a href="https://www.n2v.net/features/the-10-best-christmas-ads-of-all-time">十佳圣诞广告</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/best-video-editing-software-for-designers" aria-label="The best video editing software in 2019"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/CcQaxP8oRxyYoKxxWooiFk.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-4">4</span><h4><a href="https://www.n2v.net/features/best-video-editing-software-for-designers">2019年最好的视频编辑软件</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/best-camera-phone" aria-label="The best camera phones in 2019"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Z6qQLRBS6CkqEdXessh7v9.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-5">5</span><h4><a href="https://www.n2v.net/features/best-camera-phone">2019年最好的拍照手机</a></h4> </div> </div> </li> </ol> <ol class="popular-list " id="poplist-2"> <li class="most-popular-item first-article"> <div style="width:100%"> <a href="https://www.n2v.net/news/netflix-brings-out-the-smutty-side-of-brands" aria-label="Netflix brings out the smutty side of brands"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/dT8msuBgVBWnvfnTPznFti.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-1">1</span><h4><a href="https://www.n2v.net/news/netflix-brings-out-the-smutty-side-of-brands">Netflix推出品牌的污点一面</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/levis-new-logo-is-infuriating-typophiles" aria-label="New Levi's logo is infuriating typophiles"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/PAfaj9Yu8GUn35r4XugZAk.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-2">2</span><h4><a href="https://www.n2v.net/news/levis-new-logo-is-infuriating-typophiles">新列维的标志激怒了排字主义者</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/6-christmas-card-designs-that-are-so-bad-theyre-good" aria-label="6 Christmas card designs that are so bad they're good"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/GDpBLg83QN3UshGT5my4PD.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-3">3</span><h4><a href="https://www.n2v.net/features/6-christmas-card-designs-that-are-so-bad-theyre-good">6.圣诞贺卡设计太差了,太好了</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/advice/9-incredibly-useful-things-you-didnt-know-gmail-could-do" aria-label="9 incredibly useful things you didn't know Gmail could do"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/ijmieUbs63RzzQzZNfuacG.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-4">4</span><h4><a href="https://www.n2v.net/advice/9-incredibly-useful-things-you-didnt-know-gmail-could-do">9你不知道Gmail能做的非常有用的事情</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/features/the-10-best-christmas-ads-of-all-time" aria-label="The 10 best Christmas ads of all time"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="if(this.src && this.src.indexOf('missing-image.svg') !== -1){return true;};this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/KmFZqVQDNSyTwJNsDcib7F.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-5">5</span><h4><a href="https://www.n2v.net/features/the-10-best-christmas-ads-of-all-time">十佳圣诞广告</a></h4> </div> </div> </li> </ol> </div> </div> </div> </section> </aside> </div> <script id="hawklinks-script"> function loadHawklinks(src) { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], src); } window.reliableDOMContentLoaded.then(function() { loadHawklinks("https://gizmos.hawk-files.co.uk/hl/hawklinks.js"); }); </script> <link rel="preload" href="https://gizmos.hawk-files.co.uk/hl/hawklinks.js" as="script" /> <!-- SP NOPE --> <script type="text/javascript"> window.vanilla.tiberius = { enabled: false, } </script> <footer id="document-footer" class="container full"> <div id="document-footer-content"> <p>Creative Bloq是Future plc的一部分,Future plc是一家国际媒体集团和领先的数字出版商。<a href="http://www.futureplc.com" target="_blank">访问我们的公司网站</a>。</p> <nav> <ul> <li><a href="https://www.n2v.net/features/about-us" target="_blank">关于我们</a></li> <li><a href="http://www.futureplc.com/terms-conditions/" target="_blank">条款和条件</a></li> <li><a href="http://www.futureplc.com/privacy-policy/" target="_blank">隐私政策</a></li> <li><a href="http://www.futureplc.com/cookies-policy/" target="_blank">Cookies政策</a></li> <li><a href="https://www.n2v.net/advertising" target="_blank">和我们一起做广告</a></li> </ul> </nav> <p>+$ Future Publishing Limited Quay House, The Ambury, Bath BA1 1UA. All rights reserved. England and Wales company registration number 2008885.</p> </div> </footer> <script> window.vanL10N = null; </script><script> if (document.cookie.indexOf("EuConsent") < 0) { if (!window._comscore) { window._comscore = window._comscore || []; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: '' }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); } else { window.reliableConsentGiven.then(function(value) { if (!window._comscore) { window._comscore = window._comscore || []; } var cs_ucfr_value = ''; if (value.consent && value.consent.purposeConsents[5]) { cs_ucfr_value = 1; } else { cs_ucfr_value = 0; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: cs_ucfr_value }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); }); } </script> <script> var dfp_config = { "keystone": "", "ad_unit": "10518929/Design_CreativeBloQ/", "live_ad_unit": "10518929/Design_CreativeBloQ/", "test_ad_unit": "10518929/Design_CreativeBloQ_Test/", "recovery_ad_unit": "", "recovery_test_ad_unit": "", "incremental": true, "gptBeta": "", "max_incremental_ads": 20, "max_incremental_ads_mobile": 20, "max_concurrent_ads": 4, "refresh": true, "site_platform": "vanilla", "tiberius": false, "tiberius_mode": "", "keywords": "van-no-inbody-newsletter,latest,serversidehawk,Web design,netmag,Web Design,magcontent", "article_id": "nnQ5Cn4GCyMg73p6xrUTgK", "vanilla_article_id": "nnQ5Cn4GCyMg73p6xrUTgK", "page_type": "how-to", "product_brand": "", "product_category": "", "product": "", "vertical": "web-design", "source": "netmag", "provertical": "", "single_request": true, "onscroll": { "refresh" : "", "mpu": "" }, "jwplayer": "carousel" } </script> <script> dfp_config.gallery_refresh_interval = 2; </script> <script>window.vanillaComponents = [{"trackable":[{"type":"click","identifier":".menuitems a","name":"Link clicked","countTotal":true}],"name":"Primary Nav","excludeHidden":false,"identifier":".primary-nav"},{"trackable":[{"type":"click","identifier":".feature-block-item-wrapper a","name":"Article clicked","countTotal":false}],"name":"Featured articles","excludeHidden":false,"identifier":".top-featured"},{"trackable":[{"type":"click","identifier":"a","name":"Logo clicked","countTotal":false}],"name":"Site Logo","identifier":".logo"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most read article clicked","countTotal":true}],"name":"Most Popular - Popular","identifier":"#poplist-1"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most shared article clicked","countTotal":true}],"name":"Most Popular - Shared","identifier":"#poplist-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":false}],"name":"Prev/Next","identifier":".next-prev-container"},{"trackable":[{"type":"click","identifier":"a","name":"Number clicked","countTotal":true}],"name":"Paginated Review Numerical pagination - Number","identifier":".pagination-numerical-list"},{"trackable":[{"type":"click","identifier":".prev,.next","name":"Prev/Next clicked","countTotal":false}],"name":"Paginated Review Numerical pagination - Prev/Next","identifier":".navigation-sequential"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Article Tags","identifier":"#articleTag"},{"trackable":[{"type":"click","identifier":".recommended-article a","name":"Link clicked","countTotal":true}],"name":"Recommended article","identifier":".recommendation-articles"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Trending bar","identifier":".trending-items"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-1","identifier":".club-boilerplate-1"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-2","identifier":".club-boilerplate-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-3","identifier":".club-boilerplate-3"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-4","identifier":".club-boilerplate-4"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline links","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Social links","identifier":".socialite-widget"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Avatar","identifier":"#club-login"},{"trackable":[{"type":"click","identifier":".fwd-link","name":"FWD link clicked","countTotal":true}],"name":"Forward Linker","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"div .brands-lead","name":"Extending Trending Bar","countTotal":true}],"name":"Trending Bar Parent","excludeHidden":false,"identifier":"div .trending-bar"},{"trackable":[{"type":"click","identifier":"a[data-event-label=elkInjectedRelatedBlock]","name":"Link clicked","countTotal":true}],"name":"ELK Injected Related Block","identifier":"#article-body"}]</script> <script> var require = {waitSeconds:0}; </script> <!-- Google Tag Manager --> <script></script> <!-- End Google Tag Manager --> <script type="text/javascript"> (function(){ if(typeof window._taboola !== 'undefined' && typeof taboola_lists !== 'undefined' && Array.isArray(taboola_lists) && taboola_lists.length) { function loadTaboola() { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/futureplc-creativebloq/loader.js'); _taboola.push({article: 'auto'}); _taboola.push({flush: true}); } // Can't be in asset loader until we can call custom loader functions (window.Promise ? Promise.all([window.reliablePageLoad, window.reliableConsentGiven]) : window.reliableConsentGiven ).then(function(){ setTimeout(loadTaboola, 6000); }); } })(); </script> <script>window.addEventListener("load",function(){if(!window.askForConsent){var e=document.createElement("script");e.src="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.js",e.onload=function(){var e=window.innerWidth>=700?"bottom":"top";window.cookieconsent.initialise({palette:{popup:{background:"#000"},button:{background:"#666666"}},position:e,content:{message:"We use cookies on this website to deliver content to you, personalise content and ads, provide social media features, and analyse our traffic. Click 'I accept' to consent to the use of cookies. More information on cookies and how to manage them",link:"click here",href:"http://www.futureplc.com/cookies-policy/",dismiss:"I accept"}})},document.body.appendChild(e);var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.css",document.body.appendChild(o);var t=document.createElement("style");t.appendChild(document.createTextNode(".cc-window {z-index:10000000}")),document.body.appendChild(t)}});</script> <!-- document assets - added by the article itself --> <script> window.vanilla.addCss({"href":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.8.4\/themes\/prism.min.css"}) window.vanilla.addJs({"src":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.8.4\/prism.min.js"}, 1000, 1) window.vanilla.addJs({"id":"main-js","src":"\/\/vanilla.futurecdn.net\/creativebloq\/150322\/media\/js\/main.min.js"}, null, 0) window.vanilla.addCss({"href":"\/\/vanilla.futurecdn.net\/creativebloq\/150322\/media\/css\/creativebloq.min.css"}) </script> <script> window.ffte = {"site":"creativebloq","endpoint":"\/\/api.vanilla.futurecdn.net\/article","locale":"GB","gaCode":"UA-48905440-1","debug":[],"serverEnvironment":"live","regionLink":"","isGlobal":false,"properties":{"articleProduct":[],"articleProductHandle":[],"articleType":"how-to","articleTemplate":"standard","articleTagHandle":["web-design","magcontent","netmag","web-design"],"articleTagType":["freeform","freeform","source"],"articleControlTag":["van-no-inbody-newsletter","latest","serversidehawk"],"articleVerticalHandle":["web-design"],"articleCategoryHandle":[],"subSite":"","articleVertical":"web design","id":"nnQ5Cn4GCyMg73p6xrUTgK","legacyId":"nnQ5Cn4GCyMg73p6xrUTgK"}} </script> <script> window.xkeys = ["creativebloq-platform-responsive","creativebloq-core-version-21.12.1","creativebloq-core-ftefrontprod-172-20-9-85","creativebloq-article-nnQ5Cn4GCyMg73p6xrUTgK","creativebloq-articletype-how-to","creativebloq-article-age-ancient","creativebloq-region-GB","creativebloq-language-en","creativebloq-author-teFvMQ9VVtmRE4Z5JbPHoZ","creativebloq-tag-aHbSwk32desfH4WPSXCSdB","creativebloq-tag-RUA5yRchmniuFsnk2BTbRg","creativebloq-tag-TYAFhdjFkzwYHMydsPpRDH"]; window.templateVariables = {}; </script> <div><script>var lang_is_tranlated='快八哥正在翻译';var website_tranlate_plan_id = '1';</script><script src="//sys.fastmyna.com/api/kbg.js?v=1.0"></script></div><div> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u="//ptrack.qifeiye.com/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "50"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script></div></body> <script> window.ftr_request_id = ""; </script> </html> <br><br><div style='font-size:14px;color:#ffffff;background-color:#000000;text-align:center;'>翻译字数超限</div><br><br>