博客开发记录0x04——外链优化
发布于 2 年前 作者 na73 794 次浏览 来自 分享

SEO优化有一步是减少外链,可以通过加入一个跳转页面解决。

跳转页面

5秒后自动跳转。

import { Helmet } from '../.umi/plugin-helmet/exports';
import { useTimeout } from 'ahooks';
import CryptoJS from 'crypto-js';

export default props=> {
  useTimeout(()=>{
    window.location.href = CryptoJS.enc.Base64.parse(decodeURIComponent(props.match.params?.path)).toString(CryptoJS.enc.Utf8);
  },5000);

  return (
    <div>
      <Helmet>
        <title>{`liziyi0914的博客`}</title>
      </Helmet>
      <div className="p-7 lg:rounded-3xl bg-black bg-opacity-10 shadow-md z-10 fixed left-0 lg:left-5 right-0 lg:right-5" style={{backdropFilter: 'blur(2rem)'}}>
        <div className="text-white text-center text-4xl tracking-wide font-bold text-shadow-md">liziyi0914 的博客</div>
      </div>
      <div className="pt-28 pb-8 overflow-y-scroll">
        <div className="rounded-3xl bg-white bg-opacity-50 p-8 text-center backdrop-filter backdrop-blur-lg select-none">
          <div
            className="m-6 text-4xl font-bold text-white text-shadow-md"
          >正在跳转,请稍后...</div>
        </div>
      </div>
    </div>
  );
}

链接渲染器

将每一个a标签的href参数替换为#,并加入一个跳转函数。

export const LinkRender = ()=>{
  $('a',$('.post')).each(function(){
    let $$ = $(this);
    const href = $$.attr('href');
    $$.on('click',()=>{
      history.push(`/link/${encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(href)))}`);
    });
    $$.attr('href','#');
  });
};

实现效果

大功告成!😁

1 回复
回到顶部