怎样花两天时间设计和开发一个设计导航站？

时间：2023-05-31 04:57:01 | 来源：网站运营

时间：2023-05-31 04:57:01 来源：网站运营

怎样花两天时间设计和开发一个设计导航站？：放假期间花两天时间做了一个小网站，设计师网址导航。网站收录了全网绝大多数互联网设计相关的资源（目前大部分都是国外的资源），本文是对此项目的一个简单总结。

设计

界面上没太多可说的，采用的很传统的两栏布局。不敢和常规流程不同的是，我并没有用任何设计软件先进行设计，而是在脑海中有了大概样子后，直接在浏览器中用 CSS 直接设计的。这样比在设计软件里设计好再动手更节省时间。

DEX.List - The Index page for digital designers.

开发

开发选用的技术栈主要就是 React，当然你也可以选择再国内更流行的 Vue，不过我个人认为 React 无论是在核心理念、代码友好度、后期可扩展性、社区支持等方便都比后者要好。

目前快速开发 React 项目的框架有很多很多，最流行的有 Create React App，Gatsby，Next.js 等，为了更方便我在这里选择了 Gatsby，Gatsby 并不仅仅只是一个静态网站生成器，因为本身就支持 React 的所有功能，它其实可以看做是一个 React 开发框架。使用 Gatsby 的另一个好处是，你不需要做什么就可以制作一个 PWA （Progressive Web App ）的网站，也就是说这是个渐进式的网页应用程序，并且通过 Google Lighthouse 测试可以得到很高的评分。

先说明一下 Gatsby 的原理：最底层的数据，通过 GraphQL 连接，再通过 React 编辑业务逻辑，最后生成静态页面。

项目的目录结构如下图所示，这里可以看到其实现在的设计软件和代码的理念很类似了，都是组件化的，我们需要做的就是把设计稿还原成代码，并且拆分成一个个最小可用的组件，再组装起来。

视觉的部分和写静态的网页没太大区别，都是通过 HTML 和 CSS 编写样式，只不过会用到部分 React 特有的 JSX 语法，以及部分逻辑代码。为了更快速的完成这个项目，我还用到了 Rebass（Rebass）这个库，它可以让你快速搭建组件而不需要从头写那些基础的样式。它是基于 styled-system 这个 React UI 框架的，目前很多大公司的 design system 都是基于它，比如 Github 的 Primer Primer Design System。

关于 CSS 的部分，现有的成熟框架有很多，比如最流行的 bootstrap，tachyons 和目前公认最好用的 Tailwind，但是初学者建议不使用任何框架，直接手写，这样对学习基本语法有好处。下图代表了各个框架的使用体验示意图：

要定义每一个链接条目最外面容器，也就是那个白色的圆角矩形，我们可以从 Rebass 引入 Card，则得到了一个默认的矩形。

当然你不想要默认的样式，那么我们可以通过它提供的参数更改设置，比如 px={2} 就代表设置 padding 的上下边距，1 代表 4px，2 代表 8px，3 代表 16px，以此类推。于是 px={2} 就等于写了 padding-left: 16px; padding-right: 16px；对于官方没有定义的值，也可以直接用你想要的数值，比如下面那个 py = “12px”。

除了官方提供的快捷操作参数，还有很多 CSS 属性比较复杂，Rebass 并没有直接提供，我们可以通过 CSS in JS 方式补充。如上图，把它保存为 Card.js 放到 components 目录，我们就完成了一个 UI 组件的代码。当然大部分人都不喜欢 CSS in JS 这样的书写方式，这里可以搭配 styled-components 或 emotion ，把 CSS 分离出来。

数据存储和绑定

UI 组件写好了，我们还需要最底层的数据。Gatsby 支持多种数据存储方式，可以直接绑定其他第三方 CMS 如 Contentful，通过 API 调用，也就是现在特别火的一个概念 Headless CMS；也可以通过存到本地 YAML 或 JSON 文件，通过 GraphQL 调用。考虑到这个网站的数据主要是文本而不是富文本，为了更方便管理，我采用了本地 YAML 文件的数据存储方式。

每一个 id 对应了一个分类，展开后，每一个第一级数组 的 item 里面，又包含了二级数组：name logo location price slogan link 等。（如果你用 VSCode，可以通过插件直接在左侧预览 logo 中的图片数据。）

数据搞定了，怎么使用呢？Gatsby 的数据处理采用了同样来自于 Facebook 的一个项目 GraphQL，简单来说 GraphQL 是一个可以用来查询 API 的数据库工具（值得一提的是：GraphQL 的核心开发设计者之一，现在是 Figma 的设计总监）

安装 gatsby-transformer-yaml 插件，通过 GraphQL 我们可以把刚才的 YAML 数据抓取过来：

query($id: String!) { listPage: listYaml(id: { eq: $id }) { id title item { name slogan price location link logo { childImageSharp { fixed( width: 32 height: 32 ) { ...GatsbyImageSharpFixed_tracedSVG } } } } } }其中 id, title, item, name...分别对应了 YAML 文件中写好的那些数据，我们只需要根据官方给出的语法，把它们 query 出来就好了。

你肯定注意到了，logo 里面和其他地方不一样，多出来一大坨东西，那些是 Gatsby 提供的一套图片处理的函数，它可以帮你自动化处理图片预加载、响应式处理、支持 Webp 图片格式等操作。

因为我们的 logo 图片上固定尺寸的，所以这里用到了 GatsbyImageSharpFixed_tracedSVG 这个函数，tracedSVG 代表预加载图片之前给它一个默认的占位图，并且是用 SVG 画的。通过 Gatsby 你不需要再关心这一切背后复杂的处理逻辑，只要一行代码就够了。

效果如下图：

在终端输入 gatsby develop，打开本地测试环境，如果编译成功你会看到两个链接，第一个是网站的链接，第二个 http://localhost:8000/___graphql 是它自带的 GraphQL 测试工具，把你写好的 GraphQL 代码贴进去，如果右边显示无误，则说明你刚才写的代码是没有问题的。可以看到我们需要的数据已经通过 GraphQL 获取到了。

模板和动态创建页面

接下来创建页面模板文件。在 templates 目录新建 list.js， 这个模板的作用是自动生成每一个分类页面，也就是类似 https://dexlist.page/agency 这样的二级页面。下图是模板文件的逻辑部分，你还需要把上面的那段 GraphQL 代码加到这个文件里，当然还有 CSS 样式部分的代码。

const ListPage = ({data}) => { const page = data.listPage return ( <Layout> <SEO title={page.title} /> <Section> <Topic>{page.title}</Topic> {page.item.map(props => ( <Card key={props.link} href={props.link} title={props.name} > <Item> <Flex> <Avatar> <Img fixed={props.logo.childImageSharp.fixed} /> </Avatar> <Box pl={2}> <Name> {props.name} {props.location ? <Location>{props.location}</Location> : <Price>{props.price}</Price> } </Name> <Slogan>{props.slogan}</Slogan> </Box> </Flex> </Item> </Card> ))} </Section> </Layout> )}这段代码非常简单，基本上就是把 UI 组件拼起来，再通过参数把刚才 query 到的数据传进来。

另外有一个地方需要说明的是，我在 Name 标签里面用到了条件运算符，也就是语法为 ::条件表达式 ? 真值 : 假值:: 的东西，如果你看首页也会注意到有些标题（只有 agency 有）后面有国家的 emoji，有些标题（如软件）后面则是跟着价格，它的意思是：如果数据中存在 location 这个值，则显示 location 也就是国家的 emoji，如果没有，则默认显示 price 也就是价格。为了方便说明我把这段代码和刚才 YAML 文件的代码放在一起：

到此我们已经写好了 list.js 这个模板，既然是通过程序自动生成 list 页面，自然还要写生成页面的逻辑。Gatsby 提供了一个 createPages 的功能，接下来打开根目录下面 gatsby-node.js 这个文件输入如下代码：

exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return graphql( ` { allListYaml { edges { node { id } } } } ` ).then(result => { if (result.errors) { throw result.errors } const listTemplate = path.resolve(`src/templates/list.js`) const Lists = result.data.allListYaml.edges _.each(Lists, edge => { createPage({ path: edge.node.id, component: listTemplate, context: { id: edge.node.id, }, }) }) })至此已经写好了每个分类页面的代码了，接下来完成首页的部分。同样通过 GraphQL 把数据抓取过来，只不过这一次我们需要抓取所有的数据，所以刚才的 listYaml 变成了 allListYaml ：

query IndexPage { allListYaml( sort: { order: ASC, fields: [id] } ) { edges { node { id title item { name slogan price location link logo { childImageSharp { fixed( width: 32 height: 32 ) { ...GatsbyImageSharpFixed_tracedSVG } } } } } } } }首页这部分基本和 list 页面一样，唯一不同的是，分类 list 页面只需要每一个分类下的所有数据，所以遍历一次就够了，而首页是把所有分类的所有数据全部展示出来，所以在 Card 标签外，我们还需要在 Section 外再遍历一次所有分类。也就是 cards.map 遍历一遍 id（分类）items.map 再遍历一遍 分类里面的 item（链接条目）。

const IndexPage = ({ data }) => { const cards = data.allListYaml.edges return ( <Layout> <SEO title='' keywords={[`bookmarks`, `design`, `all-in-one`]} /> {cards.map(({ node }) => { const items = node.item const shuffledItems = shuffle(items) const url = `/${node.id}` return ( <Section key={node.id}> <Topic>{node.title}</Topic> {shuffledItems.slice(0, 24).map(item => { return ( <Card key={item.link} href={item.link} title={item.name} > <Item> <Flex> <Avatar> <Img fixed={item.logo.childImageSharp.fixed} /> </Avatar> <Box pl={2}> <Name> {item.name} {item.location ? <Location>{item.location}</Location> : <Price>{item.price}</Price> } </Name> <Slogan>{item.slogan}</Slogan> </Box> </Flex> </Item> </Card> ) })} {(items.length >=24) ? <Viewall to={url} /> : null} </Section> ) })} </Layout> )}如果首页展示所有内容，会导致加载时间过长，而且很多分类内容过多也会让页面太长不美观，所以我在遍历第二次的时候加上了 slice(0, 24)，它让每一个分类的内容最多只显示 24 条，超过则隐藏。而最后一句 {(items.length >=24) ? <Viewall /to/={url} /> : null}和刚才那个 location 的条件判断类似，如果分类内容 ≥ 24 条，则在下面加上 view all 的链接，点击后跳转到每一个对应的分类页面，如果不足 24 条，则不显示 view all （只能通过左边导航栏进入）。

还有一个问题是，如果首页每次都是默认的顺序显示内容，那么超过 24 条的分类，被隐藏的链接就永远不会在首页显示，也就永远没有展示机会了。于是我又加上了一个随机函数，让它随机显示 items，并把它的结果定义成 shuffledItems，这样首页每次打开都会随机展示不同的内容，而不会局限于默认的前 24 条了。

function shuffle(array) { let i = array.length - 1; for (; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const temp = array[i]; array[i] = array[j]; array[j] = temp; } return array;}

编译运行和上线发布

前面提到了终端输入 gatsby develop 是本地测试环境，现在输入 gatsby build 就可以编译并打包成可上线的版本了。

目前比较好用的云端平台有 Zeit 和 Netify，两者都是免费的。他们可以让你绑定 Github，直接把你的仓库 push 到他们的网站上。这里我选择了 Netify。

首先需要把项目 push 到 Github，Git 的具体操作就不再这里写了。接下来在 Netlify 账户右上角点击 New Site from Git，如下图。当然除了 Github 你也可以选择其他 Git 托管平台。

选好了仓库就会看到下面这个界面，默认指定了 master 分支，并且 Netlify 可以根据你的项目自动识别 Build 命令和发布的文件夹。

点击上传，等待一会网站就上线了。它可以免费绑定你自己的域名，同时还有很多丰富的设置选项。

上传后，把 Auto publishing 功能打开，这样以后每次更新了内容，只要你的 Github 仓库更新了，被它检测到就会自动帮你发布新版本了。

本文只是简单介绍了一些基本思路和流程，还有很多设计细节和 React 基础知识就不讨论了，网站的逻辑代码也比较简单，比较适合初学者或设计师。

如果设计师对 React 感兴趣想学代码，Framer 创始人写的 React 简易教程是很好的资料。