React markdown发布文章后展示[2]

用户4793865

发布于 2023-02-03 15:34:12

4380

发布于 2023-02-03 15:34:12

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

highlight: a11y-dark theme: channing-cyan

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」

源码地址: https://gitee.com/yang-yiming1234/umi_blog

这篇文章我们实现主要的内容

左侧导航

数组

首先它有一个数组用于遍历，内容有跳转链接、文本内容、图标组件

const menu = [
    {
      link: '/client/markdown',
      title: '创建文章',
      icon: <IconFont type="iconPensyumaobi1" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/markdown',
      title: '创作者信息',
      icon: <IconFont type="iconchuangzuozhezhongxin" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/markdown',
      title: '优秀作者推荐',
      icon: <IconFont type="iconzhengshu" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/markdown',
      title: '我的',
      icon: <IconFont type="iconwode" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/markdown',
      title: '讨论社区',
      icon: <IconFont type="iconshequ4" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/markdown',
      title: '书籍分享',
      icon: <IconFont type="iconwupin-shuji" style={{ fontSize: '20px' }} />,
    },
    {
      link: '/client/markdown',
      title: '签到',
      icon: <IconFont type="iconqiandao" style={{ fontSize: '20px' }} />,
    },
  ];

逻辑代码

用map遍历，使用 <Link> 进行跳转，直接将图标组件放到{}中进行渲染

import { Link, useRequest, useHistory } from 'umi';
<div className={style.middle}>
        <div className={style.nav}>
          {menu.map((item, index) => (
            <div className={style.navbar} key={index}>
              <Link to={item.link} style={{ color: 'white' }}>
                <span style={{ marginRight: '6px' }}>{item.icon}</span>
                {item.title}
              </Link>
            </div>
          ))}
  </div>

样式

主要是 .nav 的位置固定。以及每一个navbar 的悬停效果和动画

.middle {
    width: 100%;
    height: calc(100%);
  }

  .nav {
    width: 20%;
    height: calc(88%);
    border-radius: 20px;
    background-color: #fefefe;
    box-shadow: 0 5px 5px #888;
    padding: 10px;
    padding-top: 20px;
    position: fixed;
    left: 30px;
    top: 70px;
    float: left;
    clear: both;

    .navbar {
      width: 100%;
      margin-top:40px;
      background-color: #4c9eeb;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      //
      transition: all .4s cubic-bezier(.215, .610, .355, 1);
    }
     .navbar:hover {
      width: 115%;
      z-index: 10;
      transition: all .4s cubic-bezier(.215, .610, .355, 1);
      background-color: #1890ff;
      border-top-left-radius: 0; 
      border-bottom-left-radius: 0; 
      margin-left: -10px;
      color: white;
    }
}

中间文章简介

获取数据

页面初始化加载

  const [acticles, setArticles] = useState([]);
  // 这是umi中自定义Hooks 它也是在进入页面就发起请求。
   useRequest(
    async () =>
      await getArticle({}).then(res => {
        const { data } = res;
        setArticles(data);
      })
  );

我们上一篇文章的查询主要就是控制着文章简介的内容展示。所以也用到下面的方法。重新渲染文章简介的内容。

const searchAuthorOrTitle = (search = searchParams) => {
    getArticle(search).then(res => {
      const { data } = res;
      setArticles(data);
    });
  };

渲染数据

   <div className={style.content}>
          {acticles.map((article, index) => (
            <div
              className={style.card}
              onClick={() => {
                goToDetail(article.id);
              }}
            >
              {/* 左上角三个点点的样式 */}
              <div className={style.icon}>
                <div className={style.circle} style={{ background: 'red' }} />
                <div className={style.circle} style={{ background: 'orange', marginLeft: '4px' }} />
                <div className={style.circle} style={{ background: 'green', marginLeft: '4px' }} />
              </div>
              {/* 主要内容 */}
              <div className={style.container}>
                {/* 文章封面 */}
                <div className={style.img_continer}>
                  <img src={article.cover} className={style.img} />
                </div>
                <div className={style.right}>
                  <div className={style.user}>
                    <GithubOutlined /> &amp;nbsp;
                    <span className={style.author}>{article.username}</span>
                  </div>
                  <div className={style.date}>
                    <CalendarOutlined className={style.date_icon} />
                    <span className={style.date}>{article.updatedAt}</span>
                  </div>
                  <div className={style.title}>{article.title}</div>
                  <div className={style.desc}>{article.desc}...</div>
                </div>
              </div>
            </div>
          ))}
        </div>

样式

  .content {
    width: 45%;
    height: 2000px;
    float: left;
    margin-left: 26%;
    margin-top: 70px;
    clear: both;
    border-radius: 20px;

    .card {
      width: 100%;
      height: 240px;
      background-color: #fefefe;
      box-shadow: 0 1px 5px #888;
      margin-bottom: 10px;
      border-radius: 10px;

      .icon {
        width: 100%;
        height: 30px;
        display: flex;
        padding: 6px 0 0 8px;

        .circle {
          width: 10px;
          height: 10px;
          border-radius: 50%; 
        }
      }

      .container {
        width: 95%;
        margin: auto;
        // margin-top: 15px;
        // height: 200px;
        display: flex;

        .img_continer {
          width: 130px;
          height: 170px;

          .img {
            width: 130px;
            height: 170px;
            object-fit: fill; 
            object-fit: contain;
            object-fit: scale-down;
          }
        }

        .right {
          padding-left: 20px;
          margin-left: 20px;
          border-left: 1px solid #e9e6e6;
          width: calc(100%);
          background-color: #fefefe;
          height: 200px;
          padding-top: 10px;

          .user {
            width: 100%;
            font-weight: 400;
            font-size: 18px;
            line-height: 22px;

            .author {
              color: #86909c;
            }
           
          }

          .date_icon {
            font-weight: 400;
            font-size: 18px;
            margin-top: 10px;
            margin-right: 8px;
            color: #000;
          }

          .date {
            color: #86909c;
          }

          .title {
            width: 100%;
            margin-top: 20px;
            font-weight: 700;
            font-size: 16px;
            border-top: 1px dashed #888;
            padding-top: 10px;
          }

          .desc {
            margin-top: 5px;
            line-height: 25px;
            color: rgb(136, 132, 132);
          }
        }
      }
    }
  }

右侧

有一个日历组件，还没有达到我想要的效果。等我实现后，再单独发一篇文章。我们先看一下天气组件

天气组件

我们的服务端调用的是高德地图的天气接口。接口返回的数据格式如下。怎么调用的高德接口请看另一篇文章koa调用高德地图

这里主要是图标的使用和数据的渲染了。

import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
import { Calendar } from 'antd';
import style from './index.less';
import { useRequest } from 'umi';
import { getCityCode } from './service';
import IconFont from '@/components/Icon';

/** 用到
 *  1. useRequest的使用  const {data,error,loading}  解构出 返回数据(需要有键data)、错误信息、加载中
 *  2. 图标的使用 type为iconfont的名称
 *  3. li 不带点
 *  4. 高德 IP获取地址接口 根据城市编码获取天气接口
 */
const Weather: FC<Record<string, any>> = () => {
  // 请求接口
  const { data, error, loading } = useRequest(async () => await getCityCode());

  return (
    <div className={style.container}>
      <div className={style.title}>
        <IconFont type="icontianqi" style={{ width: '25px', height: '25px' }} />
        <div>天气</div>
      </div>
      <div className={style.content}>
        <ul>
          <li>
            <IconFont type="iconchengshijianshe" className={style.icon} />
            {data?.lives[0].city}
          </li>
          <li>
            <IconFont type="icontianqi" className={style.icon} />
            {data?.lives[0].weather}
          </li>
          <li>
            <IconFont type="iconwenduji" className={style.icon} />
            {data?.lives[0].temperature}
          </li>
          <li>
            <IconFont type="iconfengxiangdai" className={style.icon} />
            {data?.lives[0].winddirection}
          </li>
          <li>
            <IconFont type="iconfengche" className={style.icon} />
            {data?.lives[0].windpower}
          </li>
        </ul>
      </div>
    </div>
  );
};
export default Weather;