03.Python Dash网页开发：多页面网站制作

├── app.py
├── pages
│   ├── about.py
│   ├── home.py
│   ├── iris.py
│   └── not_found_404.py
└── static
    ├── about.md
    └── images
        ├── profile.jpg
        └── slide0.jpg

import dash
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import dash_bootstrap_components as dbc

dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.4/dbc.min.css"
app = Dash(__name__, external_stylesheets=[dbc.themes.MINTY, dbc_css], use_pages=True)

navbar = dbc.NavbarSimple(
    [
        dbc.NavItem(dbc.NavLink("Home", href="/")),
        dbc.NavItem(dbc.NavLink("Blog", href="https://www.baidu.com")),
        dbc.NavItem(dbc.NavLink("About", href="/about")),
    ],
    brand="Bioinformatics Quest",
    brand_href="#",
    color="primary",
    dark=True,
)

app.layout = dbc.Container(
    [
        dbc.Row(dbc.Col(navbar,width=8),class_name="d-flex justify-content-center mt-2 mb-2"),
        dbc.Row(
            dbc.Col(
                    dash.page_container,
                    width=8,
                    # style={"height": "85vh"}
                    )
                    ,class_name="mh-100 d-flex justify-content-center"
                ),
        dbc.Row(
            html.Footer("2023 Bioinformatics Quest All Right Reserved.",className="d-flex justify-content-center")
            ,class_name="d-flex justify-content-center"
            )
    ], 
    fluid=True,
    # class_name="grid gap-0 row-gap-3"
)

if __name__ == "__main__":
    app.run_server(debug=True)

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

dash.register_page(__name__, path='/')

carousel = dbc.Carousel(
    items=[
        {
            "key": "1",
            "src": "/static/images/slide1.jpg",
            "header": "With header ",
            "caption": "and caption",
        },
        {
            "key": "2",
            "src": "/static/images/slide1.jpg",
            "header": "With header only",
            "caption": "",
        },
        {
            "key": "3",
            "src": "/static/images/slide1.jpg",
            "header": "",
            "caption": "This slide has a caption only",
        },
    ],
    class_name="vw-30",
    # style={"maxWidth": "600px"},
    ride="carousel"
)

def make_card(txt,img,href):
    _card = dbc.Card(
    [
        # dbc.CardHeader(header, style={'textAlign':'center'}),
        dbc.CardImg(src="/static/images/"+img,className="img-fluid rounded-start col-md-2"),
        dbc.CardBody(
            [
                html.P(txt, style={'textAlign':'center'}),
                dbc.Button("go to analysis", color="primary",href=href, class_name="d-flex justify-content-center p-3"),
            ],
        ),
    ],
    className="border-0 bg-transparent g-col-3",
    # style={"width": "12rem"},
    )
    return _card

layout = dbc.Container(
    [
        dbc.Row(carousel,class_name="h-25"),
        html.Br(),
        dbc.Row(
            dbc.CardGroup(
                [
                    make_card(txt="C. elegans survival analysis",img="slide0.jpg",href='https://bioquest.shinyapps.io/cesa'),
                    make_card(txt="iris",img="slide0.jpg",href="/iris"),
                    make_card(txt="iris",img="slide0.jpg",href="/iris"),
                    make_card(txt="iris",img="slide0.jpg",href="/iris"),
                    
                ],
                class_name = "grid gap-3"
            ),
            # class_name="d-flex justify-content-center"
        ),
        dbc.Row(
            [
            dbc.Col(
                make_card(txt="iris",img="slide0.jpg",href="/iris"),width=3,
            )
            ]
        )
    ],
    ) 

import dash
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.graph_objs as go
from dash import Input, Output, dcc, html, callback
from sklearn import datasets
from sklearn.cluster import KMeans

iris_raw = datasets.load_iris()
iris = pd.DataFrame(iris_raw["data"], columns=iris_raw["feature_names"])

dash.register_page(__name__)
controls = dbc.Card(
    [
        html.Div(
            [
                dbc.Label("X variable"),
                dcc.Dropdown(
                    id="x-variable",
                    options=[
                        {"label": col, "value": col} for col in iris.columns
                    ],
                    value="sepal length (cm)",
                ),
            ]
        ),
        html.Div(
            [
                dbc.Label("Y variable"),
                dcc.Dropdown(
                    id="y-variable",
                    options=[
                        {"label": col, "value": col} for col in iris.columns
                    ],
                    value="sepal width (cm)",
                ),
            ]
        ),
        html.Div(
            [
                dbc.Label("Cluster count"),
                dbc.Input(id="cluster-count", type="number", value=3),
            ]
        ),
    ],
    body=True,
)

layout = dbc.Container(
    [
        html.H1("Iris k-means clustering"),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col(controls, md=4),
                dbc.Col(dcc.Graph(id="cluster-graph"), md=8),
            ],
            align="center",
        ),
    ],
    fluid=True,
)


@callback(
    Output("cluster-graph", "figure"),
    [
        Input("x-variable", "value"),
        Input("y-variable", "value"),
        Input("cluster-count", "value"),
    ],
)
def make_graph(x, y, n_clusters):
    # minimal input validation, make sure there's at least one cluster
    km = KMeans(n_clusters=max(n_clusters, 1))
    df = iris.loc[:, [x, y]]
    km.fit(df.values)
    df["cluster"] = km.labels_

    centers = km.cluster_centers_

    data = [
        go.Scatter(
            x=df.loc[df.cluster == c, x],
            y=df.loc[df.cluster == c, y],
            mode="markers",
            marker={"size": 8},
            name="Cluster {}".format(c),
        )
        for c in range(n_clusters)
    ]

    data.append(
        go.Scatter(
            x=centers[:, 0],
            y=centers[:, 1],
            mode="markers",
            marker={"color": "#000", "size": 12, "symbol": "diamond"},
            name="Cluster centers",
        )
    )

    layout = {"xaxis": {"title": x}, "yaxis": {"title": y}}

    return go.Figure(data=data, layout=layout)


# make sure that x and y values can't be the same variable
def filter_options(v):
    """Disable option v"""
    return [
        {"label": col, "value": col, "disabled": col == v}
        for col in iris.columns
    ]


# functionality is the same for both dropdowns, so we reuse filter_options
callback(Output("x-variable", "options"), [Input("y-variable", "value")])(
    filter_options
)
callback(Output("y-variable", "options"), [Input("x-variable", "value")])(
    filter_options
)

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

dash.register_page(__name__)

card_about = dbc.Card(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.CardImg(
                        src="/static/images/profile.jpg",
                        className="img-fluid rounded-start",
                    ),
                    className="col-md-6 img-thumbnail mx-auto d-block",
                ),
                dbc.Col(
                    dbc.CardBody(
                        [
                            html.P("Chongyang Wang 王重阳"),
                            html.P("TEL&Wechat: +86 18983376561"),
                            html.P("Email: yehior@qq.com"),
                        ],
                        class_name = "font-weight-bold",
                        style={"font-size": "17px"},
                    ),
                    className="col-md-6 d-flex align-items-center",
                ),
            ],
            className="",
            
        )
    ],
    className="mb-3 w-90",
    style={"maxWidth": "600px"},
    outline=True 
)

md_text = open("static/about.md", encoding='utf-8').readlines()

layout = dbc.Container(
    [
        html.Br(),
        card_about,
        dcc.Markdown(md_text)
    ]    
    )

https://github.com/AnnMarieW/dash-multi-page-app-demos
https://dash.plotly.com/urls
https://github.com/ucg8j/awesome-dash
http://dash-bootstrap-components.opensource.faculty.ai/docs/themes/explorer/
https://www.youtube.com/watch?v=pJMZ0r84Rqs
https://www.youtube.com/watch?v=Hc9_-ncr4nU
https://www.youtube.com/watch?v=MtSgh6FOL7I
https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html