時(shí)間：2023-05-31 04:57:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-05-31 04:57:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
怎樣花兩天時(shí)間設(shè)計(jì)和開發(fā)一個(gè)設(shè)計(jì)導(dǎo)航站？：放假期間花兩天時(shí)間做了一個(gè)小網(wǎng)站，設(shè)計(jì)師網(wǎng)址導(dǎo)航。網(wǎng)站收錄了全網(wǎng)絕大多數(shù)互聯(lián)網(wǎng)設(shè)計(jì)相關(guān)的資源（目前大部分都是國(guó)外的資源），本文是對(duì)此項(xiàng)目的一個(gè)簡(jiǎn)單總結(jié)。
在線咨詢
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...分別對(duì)應(yīng)了 YAML 文件中寫好的那些數(shù)據(jù)，我們只需要根據(jù)官方給出的語(yǔ)法，把它們 query 出來(lái)就好了。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> )}這段代碼非常簡(jiǎn)單，基本上就是把 UI 組件拼起來(lái)，再通過參數(shù)把剛才 query 到的數(shù)據(jù)傳進(jìn)來(lái)。createPages 的功能，接下來(lái)打開根目錄下面 gatsby-node.js 這個(gè)文件輸入如下代碼：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, }, }) }) })至此已經(jīng)寫好了每個(gè)分類頁(yè)面的代碼了，接下來(lái)完成首頁(yè)的部分。同樣通過 GraphQL 把數(shù)據(jù)抓取過來(lái)，只不過這一次我們需要抓取所有的數(shù)據(jù)，所以剛才的 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 } } } } } } } }首頁(yè)這部分基本和 list 頁(yè)面一樣，唯一不同的是，分類 list 頁(yè)面只需要每一個(gè)分類下的所有數(shù)據(jù)，所以遍歷一次就夠了，而首頁(yè)是把所有分類的所有數(shù)據(jù)全部展示出來(lái)，所以在 Card 標(biāo)簽外，我們還需要在 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> )}如果首頁(yè)展示所有內(nèi)容，會(huì)導(dǎo)致加載時(shí)間過長(zhǎng)，而且很多分類內(nèi)容過多也會(huì)讓頁(yè)面太長(zhǎng)不美觀，所以我在遍歷第二次的時(shí)候加上了 slice(0, 24)，它讓每一個(gè)分類的內(nèi)容最多只顯示 24 條，超過則隱藏。而最后一句 {(items.length >=24) ? <Viewall /to/={url} /> : null}和剛才那個(gè) location 的條件判斷類似，如果分類內(nèi)容 ≥ 24 條，則在下面加上 view all 的鏈接，點(diǎn)擊后跳轉(zhuǎn)到每一個(gè)對(duì)應(yīng)的分類頁(yè)面，如果不足 24 條，則不顯示 view all （只能通過左邊導(dǎo)航欄進(jìn)入）。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;}關(guān)鍵詞：設(shè)計(jì),導(dǎo)航,怎樣
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
