身为一只程序员，博客里当然要准备几个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);

插件效果

有插件

无插件