2022年1月，我购买了第一台云服务器，开始了我的建站之路。因为2023年恰好我高三，于是这个兴趣爱好被搁置下来了。直到今年5月，我随着我对Wordpress的了解我又开始建站了，并了解到有个UI框架非常好看，那就是NiceGUI。NiceGUI基于极其高性能的FastAPI，使用了Quasar组件库，并兼容TailWind的特性。我顿时来了兴趣，Python是我最擅长不过的语言了，于是我拿它来开发了很多好玩的东西，比如HeyAuth、DiskNext。后来看到大家都在写一个东西——个人主页，于是今天我花了一个小时的时间也自己写了一个。
演示如下：
采用了响应式设计，手机访问也是很不错的：
需要的可以自取，源码如下：
from nicegui import app, ui
from fastapi import Request
dark_mode = ui.dark_mode(value=True)
with ui.header() \
.classes('items-center duration-300 py-2 px-5 no-wrap') \
.style('box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)'):
ui.button(icon='menu').props('flat color=white round')
ui.button(text="个人主页").classes('text-lg').props('flat color=white no-caps')
with ui.row().classes('w-full items-center justify-center items-stretch mx-auto mx-8 max-w-7xl'):
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-8 bg-gradient-to-br from-blue-400 to-pink-400'):
ui.label('追求').classes('text-white')
ui.label('源于').classes('text-2xl text-bold text-white')
ui.label('热爱而去创造').classes('text-2xl text-bold text-white -mt-3')
ui.label('产品').classes('text-2xl text-bold text-white -mt-3')
ui.space()
with ui.row():
with ui.avatar().classes('w-16 h-16'):
QQ_Code = '2372526808'
ui.image('http://q.qlogo.cn/headimg_dl?dst_uin={QQ_Code}&spec=640&img_type=jpg'.format(QQ_Code=QQ_Code)).classes('w-16 h-16')
ui.badge(color='green').props('floating rounded')
with ui.column():
ui.label('你好，很高兴认识你👋').classes('text-sm -mt-3 text-white')
with ui.row().classes('items-center gap-1 -mt-3'): # 添加 row 来水平排列名字和图标
ui.label("我叫 于小丘").classes('text-lg text-bold text-white')
ui.icon('verified').classes('text-blue-500') # 添加蓝色认证图标
ui.label('是一名 开发者，音乐人').classes('text-sm -mt-3 text-white')
with ui.card().classes('w-full sm:w-1/2 lg:w-1/5 flex-grow max-[768px]:hidden'):
ui.label('我的母校 广东生态工程职业学院').classes('text-lg text-bold')
ui.leaflet(center=(23.196, 113.371), zoom=16)
ui.label('我的作品').classes('w-full text-center text-2xl text-bold p-4')
with ui.row().classes('w-full items-center justify-center items-stretch mx-auto mx-8 max-w-7xl'):
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-4'):
with ui.row().classes('items-center'):
ui.label('DiskNext').classes('text-lg text-bold')
ui.chip('B端程序').classes('text-xs').props('floating')
ui.label('一个基于NiceGUI的网盘系统，性能与Golang媲美').classes('text-sm -mt-3')
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-4'):
with ui.row().classes('items-center'):
ui.label('Findreve').classes('text-lg text-bold')
ui.chip('C端程序').classes('text-xs').props('floating')
ui.label('一个基于NiceGUI的个人主页配合物品丢失找回系统').classes('text-sm -mt-3')
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-4'):
with ui.row().classes('items-center'):
ui.label('HeyAuth').classes('text-lg text-bold')
ui.chip('B端程序').classes('text-xs').props('floating')
ui.button(icon='open_in_new', on_click=lambda: (ui.navigate.to('https://auth.yxqi.cn'))).props('flat fab-mini')
ui.label('一个基于NiceGUI的B+C端多应用授权系统').classes('text-sm -mt-3')
with ui.row().classes('w-full items-center justify-center items-stretch mx-auto mx-8 max-w-7xl'):
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-4'):
with ui.row().classes('items-center'):
ui.label('与枫同奔 Run With Fun').classes('text-lg text-bold')
ui.chip('词曲').classes('text-xs').props('floating')
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-4'):
with ui.row().classes('items-center'):
ui.label('海枫的故事 HeyFun\'s Story').classes('text-lg text-bold')
ui.chip('自设印象曲').classes('text-xs').props('floating')
with ui.card().classes('w-full sm:w-1/3 lg:w-1/5 flex-grow p-4'):
with ui.row().classes('items-center'):
ui.label('2022Ghost 2021Escape 2020Fall').classes('text-lg text-bold')
ui.chip('年度纯音乐').classes('text-xs').props('floating')
# 启动函数 Startup function
def startup():
ui.run(
host='0.0.0.0',
favicon='🚀',
port=8080,
title='Findreve',
native=False,
language='zh-CN',
fastapi_docs=False)
if __name__ in {"__main__", "__mp_main__"}:
startup()需要服务器拥有Python3.8+和NiceGUI。NiceGUI可以通过pip3 install nicegui来安装。
© 版权声明
除非另行声明，文章版权归作者所有，未经允许请勿转载。
THE END
