展开

文章目录

修改历史

历史修改版本

  1. 2021-06-10 15:04:51
  2. 2021-06-10 15:04:24
  3. 2021-06-10 15:03:56

flask-githubcard简单使用介绍

2021-06-10 15:02:54 Python 367

简介

最近有小伙伴问我侧边栏的github卡片是如何实现的,简单的解释了一下,就萌生了把这个功能做成一个flask扩展,本文简单介绍一下flask-githubcard扩展如何去使用。

安装依赖

跟其他的python第三方库一样,通过pip的方式就可以自动将其安装在自己的项目环境中,flask-githubcard依赖于flask、requests,在安装过程中会自动进行依赖安装。

pip install flask-githubcard

简单使用

新建app.py文件,添加下面的代码

from flask import Flask, render_template
from flask_githubcard import GithubCard

app = Flask(__name__)
app.config['GITHUB_USERNAME'] = 'weijiang1994'
app.config['GITHUB_REPO'] = 'Blogin'
githubcard = GithubCard(app)

在上面的代码清单中,我们主要是实例化了一个flask实例,同时给其配置了GITHUB_USERNAME 以及 GITHUB_REPO 两个参数,此两个参数就是你要显示目标仓库卡片的相关信息,flask-githubcard支持配置的参数就只有此两个参数,在配置完成后就通过初始化了flask-githubcard实例了。

之后我们在templates目录中新建一个index.html文件,将下面的代码填入到文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample-default theme</title>
    {{ githubcard.init_css() }}
    {{ githubcard.init_js() }}
</head>
<body>
<div class="container mt-2">
    <h4><b>Flask-GithubCard extension sample.</b></h4>
    <hr>
    <a href="/default/">default</a>
    <a href="/darkly/">darkly</a>
    <div class="container mt-2">
        <div class="row ">
            <div class="col-4">{{ githubcard.generate_card() }}</div>
        </div>
    </div>
</div>
</body>
</html>

在上面的代码中,首先在head section中通过init_css()以及init_js()初始化了依赖文件,flask-githubcard的主要依赖bootstrap4jQuery以及fontawesome,然后在body section中通过generate_card()函数来完成了github card的渲染。

回到app.py文件,添加视图函数

@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

运行app.py文件,访问http://127.0.0.1:5000既可以看到如下图所示的效果

参数配置

在第二节中程序示例都采用的是默认的参数,我们可以根据需要配置自己的参数。

配置css、js依赖

默认的css、js依赖是使用的flask-githubcard static下的静态文件,fontawesome使用的jsdelivr的cdn,如果 你想更换的话,可以通过下面的方式来修改

<head>
    {{githubcard.init_css(bootstrap='path/cdn_url', fontawesome='path/cdn_url')}}
    {{githubcard.init_js(jquery='path/cdn_url', bootstrap='path/cdn_url')}}
</head>

配置主题模式

flask-githubcard提供了两种主题模式,分别是default、darkly,可以通过下面的方式来指定

<head>
    {{githubcard.init_css(theme='darkly')}}
</head>
<div>
    {{githubcard.generate_card(theme='darkly')}}
</div>

darkly主题模式效果如下图

注意事项

  1. 由于使用了github的api在没有进行授权的情况下,唯一IP在每小时内限制的访问次数为60次,超过60次则会报403, 如果访问频率过高,请前往github上授权账号;

  2. 在国内访问github会出现超时的现象,可能会导致网页一直无法打开!

当前共有0条评论