ant.design pro中后台平台学习之路(2)

Admin 2019-09-27 PM 5402℃ 2条

ant.design pro中后台平台学习之路(2)

六. 修改模板题头,版权信息等

1.首先修改logo文件,上传logo.svg文件到src —> assets 文件夹中,替换原来的logo图片即可

2.找到src —> layouts —> UserLayout.tsx, 46行, 修改为如下信息:

          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo} />
                <span className={styles.title}>大鹏博客</span>
              </Link>
            </div>
            <div className={styles.desc}>菜鸟前端的爬坑之路</div>
          </div>

3.找到src —> layouts —> BasicLayout.tsx , 49行 ,

const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
  if (!isAntDesignPro()) {
    return defaultDom;
  }
  return (
    <>
      {defaultDom}
      <div
        style={{
          padding: '0px 24px 24px',
          textAlign: 'center',
        }}
      >
        <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
          <img
            src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
            width="82px"
            alt="netlify logo"
          />
        </a>
      </div>
    </>
  );
};

修改为

const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
  
  return (
    <>
      <div
        style={{
          padding: '0px 24px 24px',
          textAlign: 'center',
        }}
      >
        <a href="https://www.qzroc.com" target="_blank" rel="noopener noreferrer">
          大鹏博客
        </a>
      </div>
    </>
  );
};

4.找到src —> layouts —> UserLayout.tsx , 在import 下增加 内容

const DefaultFooter: any = () => {
  return (
    <>
      <div
        style={{
          padding: '0px 24px 24px',
          textAlign: 'center',
        }}
      >
        <a href="https://qzroc.com/" target="_blank" rel="noopener noreferrer">
         大鹏博客
        </a>
      </div>
    </>
  )
}

ant.design pro中后台平台学习之路(2)

ant.design pro中后台平台学习之路(2)

七:隐藏头部搜索和帮助icon

找到src —> components —> GlobalHeader —> RightContent.tsx , 第 28行 开始,将内容删除或者注释

<HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder={formatMessage({
          id: 'component.globalHeader.search',
        })}
        dataSource={[
          formatMessage({
            id: 'component.globalHeader.search.example1',
          }),
          formatMessage({
            id: 'component.globalHeader.search.example2',
          }),
          formatMessage({
            id: 'component.globalHeader.search.example3',
          }),
        ]}
        onSearch={value => {
          console.log('input', value);
        }}
        onPressEnter={value => {
          console.log('enter', value);
        }}
      />
      <Tooltip
        title={formatMessage({
          id: 'component.globalHeader.help',
        })}
      >
        <a
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <Icon type="question-circle-o" />
        </a>
      </Tooltip>
标签: antd, antd pro

非特殊说明,本博所有文章均为博主原创。

评论啦~


选择表情

已有 2 条评论


  1. 无情的奥利奥
    无情的奥利奥

    大佬这种点一下一个表情的网页是怎么做的? icon_mrgreen.png

    回复 2019-10-25 15:22
    1. Admin
      Admin 博主

      这片文章有详细的步骤, icon_biggrin.png

      https://www.qzroc.com/index.php/archives/35/
      点睛之笔,让你的网站变得与众不同

      回复 2019-10-26 11:20