ant.design pro中后台平台学习之路（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>
    </>
  )
}

七：隐藏头部搜索和帮助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>

欢迎光临我的博客站 大鹏博客

如若转载，请注明出处：https://www.qzroc.com/index.php/archives/29/