身为一只程序员,博客里当然要准备几个GitHub模板啦~😉
开发准备
插件框架还是用在上一篇里写的。
同时,这次要用到一个开源项目 anuraghazra/github-readme-stats。
插件实现
插件主体
// src/plugins/Git.tsx
import { PostPlugin, PostPluginVariable } from '@/plugins/Plugin';
import { PropsWithChildren } from 'react';
export class GithubStatPlugin extends PostPlugin {
getNamespace(): String {
return 'com.github.stat';
}
getVariables(): Array<PostPluginVariable> {
return [
{
title: '用户名',
dataIndex: 'username',
required: true
},
];
}
getComponent(): Function {
return (props:PropsWithChildren<any>)=>{
return (
<div>
<img src={`https://github-readme-stats.vercel.app/api?username=${props?.username}&locale=cn`}/>
</div>
);
};
}
}
export class GithubRepoPlugin extends PostPlugin {
getNamespace(): String {
return 'com.github.repo';
}
getVariables(): Array<PostPluginVariable> {
return [
{
title: '用户名',
dataIndex: 'username',
required: true
},
{
title: '仓库',
dataIndex: 'repo',
required: true
},
];
}
getComponent(): Function {
return (props:PropsWithChildren<any>)=>{
return (
<div>
<img src={`https://github-readme-stats.vercel.app/api/pin/?username=${props?.username}&repo=${props?.repo}&locale=cn`}/>
</div>
);
};
}
}
export class GithubLangPlugin extends PostPlugin {
getNamespace(): String {
return 'com.github.lang';
}
getVariables(): Array<PostPluginVariable> {
return [
{
title: '用户名',
dataIndex: 'username',
required: true
},
];
}
getComponent(): Function {
return (props:PropsWithChildren<any>)=>{
return (
<div>
<img src={`https://github-readme-stats.vercel.app/api/top-langs/?username=${props?.username}&layout=compact&locale=cn`}/>
</div>
);
};
}
}
注册插件
Plugins.regPlugin(GithubStatPlugin);
Plugins.regPlugin(GithubRepoPlugin);
Plugins.regPlugin(GithubLangPlugin);
谢谢,很有帮助
谢谢,很有帮助
大神!!!