四、前端開發(fā)—搭建靜態(tài)網(wǎng)站（3）

時(shí)間：2023-09-16 20:48:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-16 20:48:02 來源：網(wǎng)站運(yùn)營

四、前端開發(fā)—搭建靜態(tài)網(wǎng)站（3）：

四、前端開發(fā)—搭建靜態(tài)網(wǎng)站（3）

之前，我們搭建了網(wǎng)站首頁的導(dǎo)航欄 以及 輪播圖，接下來，開始搭建博客文章列表組件

搭建文章列表組件

在上一節(jié)，我們分析網(wǎng)頁架構(gòu)時(shí)，也說過，文章列表和個(gè)人資料展示共占一行。大概計(jì)算下來 文章列表要占24份中的19份，個(gè)人資料占24份中的5份。

首先分別在 my-blog/src/components/show-posts-list/show-posts-list.jsx 和 my-blog/src/components/show-sider/show-sider.jsx 這兩處地方新建文件。

show-posts-list.jsx 將會(huì)寫 文章列表的組件；show-sider.jsx 將會(huì)寫 個(gè)人資料側(cè)邊欄的組件。

修改 my-blog/src/components/show/show.jsx 中的部分文件，導(dǎo)入這兩個(gè)空白組件。

...import ShowPostsLists from "../../containers/show-posts-lists/show-posts-lists";import ShowSider from "../../containers/show-sider/show-sider";......return ( <> <Row style={{"marginBottom": 20}}> <Col span={24}> <Swiper /> </Col> </Row> <Row > <Col span={19} > <ShowPostsLists /> </Col> <Col span={5}> <ShowSider/> </Col> </Row> </>...接下來，所有的重心就是在 my-blog/src/components/show-posts-list/show-posts-list.jsx 文件中詳細(xì)編寫文章列表組件。

import React, {Component} from "react";import {Col, Row} from "antd";export default class ShowPostsList extends Component{ render() { return ( <Row> <Col span={24}> 博客類別導(dǎo)航欄 </Col> {/* 文章列表 */} <Col span={6}> <div> <span> 文章標(biāo)題 </span> <span> 文章摘要 </span> <span> 文章類別 </span> <span> 文章標(biāo)簽 </span> </div> </Col> </Row> ) }}上面的代碼頁很容易理解，從之前的網(wǎng)頁中文章列表結(jié)構(gòu)中我們可以看到，它是由一個(gè) 博客類別導(dǎo)航欄 和 一個(gè)文章列表 組成的。 同時(shí) 博客類別導(dǎo)航欄 獨(dú)占一行，為了方便起見我是用 Col 組件，將 span 屬性設(shè)置為 24 ，當(dāng)然我們也可以繼續(xù)嵌套 Row 組件。

文章列表中，我們想讓它一行顯示 4 個(gè)文章信息，所以 Col 中的 span 屬性是 6 。有人可能會(huì)問，文章列表是由好幾行組成的，為什么這里只使用一個(gè) Col 就完成了呢？ 原因很簡單，之前說過，Col 會(huì)將 Row 的一行分為了 24 份。但是呢，當(dāng) Row 中的 Col 的 span 屬性值之和大于 24 時(shí)，它就會(huì)自動(dòng)換行。

所以，我們可以嘗試多復(fù)制幾份 <Col span={6}> ... </Col> 這個(gè)標(biāo)簽的內(nèi)容，運(yùn)行一下，查看效果演示。

拆分出其他組件

我們繼續(xù)思考，假如我們繼續(xù)在show-posts-list.jsx 中完善代碼以及樣式，那么所有的代碼就會(huì)雜糅到一起，那和不使用 react 還有區(qū)別么。所以我們要使用 react 中組件化思想，盡量將能拆分出的組件就拆分出來。我們可以看到，show-posts-list.jsx 可以拆分成兩個(gè)組件 博客類別導(dǎo)航欄組件，以及文章列表中每一個(gè)文章信息的卡片組件。

搭建博客類別導(dǎo)航欄組件

在 my-blog/src/components/nav-posts/ 中新建 nav-posts.jsx 文件，寫入：

import React, {Component} from "react";import "./nav-posts.less"export default class NavPosts extends Component{ render() { return ( <div className={"categoryNav"}> {/* 不包含子菜單欄 */} <div className={`dropdown active`} style={{marginLeft:0}}> <a><span>最新撰寫</span></a> </div> {/* 包含子菜單欄 */} <div className={`dropdown`}> <span>編程語言</span> <div className={"dropdown-content"}> <p><a>gradle</a></p> <p><a>react</a></p> </div> </div> </div> ) }}上面的 html 代碼也很簡單，編寫了兩個(gè)分類導(dǎo)航欄，其中一個(gè)不包含子菜單欄，另一個(gè)可以包含多個(gè)子菜單欄。這樣就可以根據(jù)自己的需求定制特定的網(wǎng)頁。

其中引入的類樣式 import "./nav-posts.less" 是在同級目錄下新建 nav-post.less 文件，并寫入：

.categoryNav{ float:left; width: calc(100%); position: relative; height: 56px;}.dropdown { position: relative; display: inline-block; cursor: pointer; line-height: 44px; margin-left: 5px;}.categoryNav>.dropdown.active { background: #20a0ff; border-radius: 10px; -webkit-box-shadow: 0 8px 10px rgba(32,160,255,.3); box-shadow: 0 8px 10px rgba(32,160,255,.3);}.categoryNav>.dropdown.active > a > span { color: #fff;}.categoryNav>.dropdown.active > span { color: #fff;}.dropdown span { transition: .25s; font-size: 14px; padding: 0 15px; color: #738192;}.dropdown-content { left: -32px; width: 138px; border-radius: 5px; display: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 5px 5px; z-index: 999;}.dropdown-content p { text-align: center; margin-bottom: 0px;}.dropdown-content p.active { color: white; background: #4fb2fb; border-radius: 5px 5px 5px 5px;}.dropdown:hover .dropdown-content { display: block;}.dropdown:hover { background: #20a0ff3b; border-radius: 10px; -webkit-box-shadow: 0 8px 10px rgba(32, 160, 255, .3); box-shadow: 0 8px 10px rgba(32, 160, 255, .3);}.dropdown-content p{ text-align: center; margin-bottom: 0px;}.dropdown-content p:hover{ color: white; background: #20a0ff3b; border-radius: 5px 5px 5px 5px;}.dropdown-content p:hover a{ color: white;}.dropdown-content a{ text-decoration: none; color: #738192;}最后將我們寫好的靜態(tài)的博客文章類別導(dǎo)航欄組件導(dǎo)入到 show-posts-list.jsx 中，即 修改 my-blog/src/components/show-posts-list/show-posts-list.jsx 中部分代碼：

...import NavPosts from "../nav-posts/nav-posts"; // 導(dǎo)入組件...... <Row> <Col span={24}> <NavPosts /> </Col> {/*引入組件*/} <Col span={6}> <div> <span> 文章標(biāo)題 </span> <span> 文章摘要 </span> <span> 文章類別 </span> <span> 文章標(biāo)簽 </span> </div> </Col> </Row>...啟動(dòng)運(yùn)行博客項(xiàng)目，就可看到相應(yīng)的界面效果了。

數(shù)據(jù)與 html 樣式相分離

在 my-blog/src/components/nav-posts/nav-posts.jsx 文件中，不難發(fā)現(xiàn)，導(dǎo)航欄分類的數(shù)據(jù)都和 html 代碼雜糅到一起。

當(dāng)我們想要修改數(shù)據(jù)時(shí)，那就需要一處一處的代碼去修改，像我們這么懶的人，這可能么？當(dāng)然不可能去做。

所以，需要將數(shù)據(jù)與 html 代碼相分離。之后，我們只需要添加、刪除數(shù)據(jù)，html 就會(huì)最相應(yīng)的渲染。省時(shí)省力，完美?。?！

修改my-blog/src/components/nav-posts/nav-posts.jsx 文件中的代碼如下：

import React, {Component} from "react";import "./nav-posts.less"export default class NavPosts extends Component{ state = { current: 3, sub_current: -1, categories_data:[ { id: 3, name:"最新撰寫" }, { id: 7, name:"編程語言", cub_cate:[ { name:"gradle", id: 3, }, { name:"React", id: 7, } ] } ] } handleClick = (id, sub_id) => { console.log(id) this.setState({ current: id,sub_current: sub_id }); }; render() { const {categories_data,current,sub_current} = this.state return ( <div className={"categoryNav"}> { categories_data.map((category,index) => ( <div className={`dropdown ${current === category.id ? 'active' : null }`} onClick={category.cub_cate === undefined && current !== category.id ? this.handleClick.bind(this,category.id) : null } style={{marginLeft:0}} key={index} > <span>{category.name}</span> { category.cub_cate === undefined ? null : ( <div className={"dropdown-content"}> { category.cub_cate.map((cate, index) => ( <p className={sub_current === cate.id ? 'active' : null } onClick={sub_current !== cate.id ? this.handleClick.bind(this, category.id, cate.id):null} key={index} >{cate.name}</p> ) ) } </div> ) } </div> )) } </div> ) }}看著可能有些復(fù)雜，但是仔細(xì)研究一下的話，是非常簡單的，如果又不懂的話，我將在下一段簡單的介紹一下其中用到的語法，如果已經(jīng)了解了的話，請?zhí)^下面一段話，進(jìn)入下一階段吧！

首先 state 我們之前也用到過，它稱為組件狀態(tài)，它保管著我們組件的數(shù)據(jù)以及狀態(tài)。其中，我設(shè)計(jì)了三個(gè)狀態(tài)，current 、sub_current、categories_data。

current 代表著已經(jīng)被選中的菜單的 id；當(dāng)菜單中存在 子菜單欄時(shí)，sub_current 代表著已經(jīng)被選中的子菜單的 id；categories_data 代表著存放的數(shù)據(jù)，未來動(dòng)態(tài)數(shù)據(jù)就將存放于此。current 和 sub_current 的作用就是判斷菜單是否被選中，同時(shí)選中菜單的樣式將會(huì)發(fā)生變化。

const {categories_data,current,sub_current} = this.state 這行代碼之前也用到過，它是將上方 state 中的三個(gè)對象引入進(jìn)來，方便下方代碼使用。

在 html 代碼中有兩個(gè)語法在頻繁的使用，未來它們使用的次數(shù)也非常的高，就是一下倆種，是很常用的 js 語法：

{ 數(shù)組對象.map((aaa,index) => ( 此處寫循環(huán)代碼 ) ) } 這個(gè)已經(jīng)寫的很清楚了，這是一個(gè)循環(huán)數(shù)組的方法，其中 aaa 為每個(gè)循環(huán)時(shí)數(shù)組對象中的每個(gè)一對象，index 為 循環(huán)次數(shù)，它們兩個(gè)使用范圍僅在 循環(huán)體中使用

{ 判斷條件 ? 條件為真時(shí)執(zhí)行的代碼 : 條件為假時(shí)執(zhí)行的代碼 } 這個(gè)已經(jīng)也寫的很清楚了，就是一個(gè)簡單的判斷語句。

OnClick 屬性，顧名思義，指的就是當(dāng)用戶點(diǎn)擊時(shí)執(zhí)行的函數(shù)。

效果圖

編寫卡片組件

在之前分析時(shí)，我們就聊到，文章列表在當(dāng)前網(wǎng)頁是以一張紙卡片排列而成，所以我們需要一個(gè)卡片組件來展示文章信息。盡管antd 中有現(xiàn)成的卡片組件，但是它不符合我們的需求，所以需要專門定制化一個(gè)卡片組件。

首先，新建卡片組件文件，即在 my-blg/src/components/card/ 中創(chuàng)建 card.jsx 文件，并寫入：

import React, {Component} from "react";import "./card.less"export default class Card extends Component{ render() { return ( <div className={"card"}> <a> <div className={"card-image"}> <img src={"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4166449390,244951508&fm=26&gp=0.jpg"} /> <span className={"card-title"}>標(biāo)題</span> <span className={"posts-date"}> 2020年1月30日 </span> </div> </a> <div className={"card-content article-content"}> <div className={"summary"}> 文章摘要。。。。 </div> </div> <div className={"card-action article-tags"}> <a><span className={"chip tag-color"}>標(biāo)簽-1</span> </a> <a><span className={"chip tag-color"}>標(biāo)簽-2</span> </a> </div> </div> ) }}上面的代碼也很簡單，對樣式的制作，主要是通過百度搜索，以及其他相關(guān)網(wǎng)站代碼的"借鑒"，（假如大家都不知道如何借鑒的話，以后有機(jī)會(huì)分享一下）。

同樣，為了達(dá)到相應(yīng)的效果，我們在同級目錄新建樣式文件 card.less ，寫入樣式：

.card{ border-radius: 8px; overflow: hidden; background-color: #fff; padding-bottom: 5px; transition: all 250ms cubic-bezier(.02, .01, .47, 1);}.card a { margin-right: 0 !important; color: #525f7f; text-transform: none !important;}.card .card-content { padding: 15px 15px 12px 18px; border-radius: 0 0 2px 2px;}.card .card-action:last-child { border-radius: 0 0 2px 2px;}.card .card-image { transition: 1s; position: relative; background: #000;}.card .card-image img { opacity: 0.5; transition: 1s;}.card:hover { box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); transform: translate(0,-5px); transition-delay: 0s !important; border-color: transparent;}.card:hover img { opacity: 1;}.card:hover .card-image { background: #fff;}.card .card-image img { width: 100%; border-radius: 8px 8px 0 0;}.card .card-image .card-title { color: #fff; position: absolute; bottom: 0; left: 0; max-width: 100%; padding: 24px;}.card .card-image .posts-date { color: #cacaca; font-size: 12px; position: absolute; bottom: 30px; left: 0px; max-width: 100%; padding: 24px;}.card .card-title { font-size: 24px; font-weight: 300;}.card .article-content .summary { padding-bottom: 2px; padding-left: 0; margin-bottom: 6px; word-break: break-all;}.summary { overflow: hidden; position: relative; line-height: 1.5em; max-height: 4.5em; text-align: justify; margin-right: -1em; padding-right: 1em;}.summary:before { content: '...'; position: absolute; right: 15px; bottom: 0;}.summary:after { content: ''; position: absolute; right: 15px; width: 1em; height: 1.5em; margin-top: 0.2em; background: white;}.article-content .post-category { float: right; padding-left: 5px;}.tag-color { background-image: linear-gradient(to left, #00c9ff 0%, #66a6ff 100%);}.chip { display: inline-block; height: 32px; font-size: 13px; font-weight: 500; color: rgba(0,0,0,0.6); line-height: 32px; padding: 0 12px; border-radius: 16px; background-color: #e4e4e4; margin-bottom: 5px; margin-right: 5px;}.card .article-tags .chip { margin: 2px; font-size: 0.8rem; font-weight: 400; height: 22px; line-height: 22px; color: #fff; border-radius: 10px;}.article-tags{ padding-left: 14px;}其中，文章列表有一個(gè)小優(yōu)化，即在鼠標(biāo)未懸浮時(shí)，圖片會(huì)有一個(gè)黑色的蒙版。當(dāng)鼠標(biāo)懸浮時(shí)，就會(huì)消失。這個(gè)為圖片添加蒙版的效果有一個(gè)參考，地址如下: https://blog.csdn.net/yunsiwl5/article/details/80365956

數(shù)據(jù)與 html 樣式相分離

原因如之前所言，都是為了給之后的動(dòng)態(tài)數(shù)據(jù)提供基礎(chǔ)，card.jsx 的代碼修改如下：

import React, {Component} from "react";import "./card.less"export default class Card extends Component{ state = { img_src:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4166449390,244951508&fm=26&gp=0.jpg", title:"", abstract:"文章摘要。。。。", create_time:"2020年1月30日", category:"gradle", tags:[{ id:0, name:"標(biāo)簽-1", },{ id:2, name:"標(biāo)簽 - 2", },], } render() { const {img_src,tags,title,abstract,category,create_time} = this.state return ( <div className={"card"}> <a> <div className={"card-image"}> <img src={img_src} /> <span className={"card-title"}>{title}</span> <span className={"posts-date"}> {create_time}&nbsp;&nbsp;·&nbsp;&nbsp;{category} </span> </div> </a> <div className={"card-content article-content"}> <div className={"summary"}> {abstract} </div> </div> <div className={"card-action article-tags"}> {tags.map((tag,index) => ( <a key={index}> <span className={"chip tag-color"}> {tag.name} </span> </a> ))} </div> </div> ) }}最后同樣將我們寫好的靜態(tài)的卡片組件導(dǎo)入到 show-posts-list.jsx 中，即 修改 my-blog/src/components/show-posts-list/show-posts-list.jsx 中部分代碼：

下面代碼中，我們只插入了3張文章卡片，這個(gè)是可以根據(jù)需求添加無數(shù)個(gè)卡片的。

import React, {Component} from "react";import {Col, Row} from "antd";import NavPosts from "../nav-posts/nav-posts";import Card from "../card/card"; // 導(dǎo)入卡片組件export default class ShowPostsList extends Component{ render() { return ( <Row gutter={[32, 24]}> <Col span={24}> <NavPosts /> </Col> {/* 導(dǎo)入三張文章卡片 */} <Col span={6}> <Card /> </Col> <Col span={6}> <Card /> </Col> <Col span={6}> <Card /> </Col> </Row> ) }}這樣，靜態(tài)網(wǎng)站的第二小模塊就算搭建完成了，趕緊運(yùn)行查看一下吧！ 哦哦，對了，細(xì)心的小伙伴會(huì)發(fā)現(xiàn) Row 中出現(xiàn)了 gutter={[32, 24]} 這個(gè)屬性，我們可以嘗試刪除它，運(yùn)行一遍，看有什么差異，或者查詢 antd 文檔，看一下它們有什么作用吧！

最后的效果圖：

再然后微調(diào)一下間距，展示一下最后的效果圖吧：