博客开发记录0x04——外链优化
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','#');
});
};
实现效果
大功告成!😁