準(zhǔn)備工作：最好之前有一些 html 、css 以及 js 的基礎(chǔ)。" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 二、前端開發(fā)—搭建靜態(tài)網(wǎng)站（

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

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

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

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

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

本節(jié)主要的工作就是 搭建React 環(huán)境，以及配置一些常用的庫，并且通過 react 搭建網(wǎng)站的頂部導(dǎo)航欄。


準(zhǔn)備工作：

最好之前有一些 html 、css 以及 js 的基礎(chǔ)。同時(shí)學(xué)習(xí)一些 React 的基礎(chǔ)語法。（推薦B站上尚硅谷的React 視頻）

開始

使用 create-react-app 創(chuàng)建 react 應(yīng)用：

# 1.首先使用 npm 在全局安裝 create-react-appnpm install -g create-react-app# 2.在指定目錄中創(chuàng)建一個(gè) react 項(xiàng)目工程create-react-app my-blog# my-blog 是自己設(shè)置的項(xiàng)目名稱# 3.進(jìn)入到指定的項(xiàng)目文件，啟動(dòng)項(xiàng)目cd my-blognpm run start # 啟動(dòng)項(xiàng)目

項(xiàng)目框架

my-blog├── node_modules : 存放 npm 安裝的工具包 或 模塊├── public : 一些靜態(tài)文件，一般不需要修改，除了網(wǎng)站標(biāo)題和icon，或者要添加一些特定的東西|── src : 項(xiàng)目的源代碼及資源| ├── api : 連接后端接口的 js 代碼| ├── assets : 存放公共資源| ├── component : 存放項(xiàng)目共用的組件(不會(huì)修改其他組件狀態(tài))| ├── containers : 存放項(xiàng)目共用的組件(將會(huì)修改其他組件狀態(tài)的組件)| ├── redux : 存放狀態(tài)管理組件的 js 代碼| └── index.js : js 的入口文件└── package.json : 項(xiàng)目的配置文件

引入 antd 組件

React 是基于組件化的編程的，我們可以很方便的使用其他人寫好的組件，博客中將大量使用 Ant Design 設(shè)計(jì)體系的 React UI 組件庫 所以首先引入 antd 組件庫

yarn add antd


bash yarn add @craco/yarn add craco-less /* package.json */ "scripts": {- "start": "react-scripts start",- "build": "react-scripts build",- "test": "react-scripts test",+ "start": "craco start",+ "build": "craco build",+ "test": "craco test", } const CracoLessPlugin = require('craco-less');module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ],};

構(gòu)建靜態(tài)博客框架

首先修改my-blog/src/index.js 入口文件：

import React from 'react'import ReactDom from 'react-dom'import Main from "./components/main/main";import 'antd/dist/antd.less'; // 導(dǎo)入 antd 組件樣式ReactDom.render(<Main />, document.getElementById('root'))在 my-blog/src/components/main/ 中新建 main.jsx 文件：

import React, {Component} from "react";import {Layout} from 'antd' const { Header, Footer, Content } = Layout;export default class Main extends Component{ render() { return ( <Layout> <Header> 導(dǎo)航欄 </Header> <Content> 內(nèi)容體 </Content> <Footer> 頁腳 </Footer> </Layout> ) }}Layout、Header、Content、Footer 都是 antd 中做好的組件，我們只需要拿來用即可。

編寫靜態(tài)導(dǎo)航欄

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

import React, {Component} from "react";import {MailOutlined,EditFilled,TabletFilled} from '@ant-design/icons'import { Menu } from 'antd';export default class NavTop extends Component{ state = { navList : [ { path: '/index', text: '首頁', icon: <MailOutlined/> }, { path: '/project', text: '項(xiàng)目', icon: <EditFilled /> }, { path: '/diary', text: '日記', icon: <TabletFilled /> }, ] } render() { const {navList} = this.state return ( <div> <Menu theme={"dark"} mode="horizontal"> { navList.map((nav, index) => ( <Menu.Item icon={nav.icon} key={nav.path} selected={true}> {nav.text} </Menu.Item> )) } </Menu> </div> ) }}// Meau 是 antd 的導(dǎo)航菜單組件庫，它提供了許多的 api，theme 可以設(shè)置主題樣式、mode 設(shè)置菜單是橫向排列還是豎向排列。// 有多少個(gè) Menu.Item ，就有多少個(gè)菜單然后在靜態(tài)博客框架 main.js 文件中導(dǎo)入 NavTop :

import React, {Component} from "react";import {Layout} from 'antd'import NavTop from "../nav-top/nav-top";const { Header, Footer, Content } = Layout;export default class Main extends Component{ render() { return ( <Layout> <Header> <NavTop /> </Header> <Content> 內(nèi)容體 </Content> <Footer> 頁腳 </Footer> </Layout> ) }}導(dǎo)航欄的效果就顯示出來了。

但是這和我們之前預(yù)想的導(dǎo)航欄效果不一樣，這是就需要自定義 antd 組件樣式，即覆蓋到 antd 原有的組件樣式。

自定義 antd 導(dǎo)航欄組件樣式

在 my-blog/src/assets/css/ 中新建 index.less 文件：

// 修改導(dǎo)航欄背景樣式.ant-layout-header { background: #f0f2f5;}.ant-menu{ background: #f0f2f5;}// 修改導(dǎo)航欄字體樣式.ant-menu .anticon + span { color: #738192;}.ant-menu .anticon { color: #738192;}.ant-menu .ant-menu-item-selected .anticon + span { color: #20a0ff;}.ant-menu .ant-menu-item-selected .anticon { color: #20a0ff;}在博客項(xiàng)目中導(dǎo)入 index.less:

// my-blog/src/index.js 中導(dǎo)入 index.less...import 'antd/dist/antd.less'; // 導(dǎo)入 antd 組件樣式import './assets/css/index.less'; // 用于覆蓋上面 antd 定義的變量，必須放在 antd.less 下方...在 my-blog/src/components/nav-top/ 中新建 nav-top.less 樣式文件：

.ant-menu { display: inline-block; float: right;}隨后，在 同級(jí)的文件 nav-top.jsx 中引入 nav-top.less 樣式文件：

...import { Menu } from 'antd';import "./nav-top.less" // 引入nav-top.less 樣式文件export default class NavTop extends Component{...注： 為什么要在 src/assets/css/ 中新建一個(gè) index.less 樣式文件之后，還要在 nav-top.jsx 同級(jí)目錄中新建一個(gè) nav-top.less 樣式文件。

原因是，index.less 中的樣式是服務(wù)整個(gè)網(wǎng)站的，而 nav-top.less 是對(duì) nav-top.jsx 中的 html 樣式微調(diào)。nav-top 文件也為組件，包含它的樣式 less 文件以及 jsx 前端代碼。

最后的效果圖：




END

關(guān)鍵詞：靜態(tài)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉