评论

博客开发记录0x02——GitHub插件

GitHub插件

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

插件效果

有插件

无插件

点赞 9
收藏
评论

3 个评论

  • 泠羽
    泠羽
    发表于小程序端
    2021-11-23

    谢谢,很有帮助

    2021-11-23
    赞同 1
    回复
  • HYZ
    HYZ
    发表于小程序端
    2021-11-29

    谢谢,很有帮助

    2021-11-29
    赞同
    回复
  • 卷心菜
    卷心菜
    发表于小程序端
    2021-11-24

    大神!!!

    2021-11-24
    赞同
    回复
登录 后发表内容