1. Введение
Всем привет, добро пожаловать в мой блог! В этой статье я подробно расскажу, как использовать Streamlit, мощный инструмент, для создания личного блога. Если вы интересуетесь визуализацией данных, интерактивными приложениями и написанием блогов, то эта статья определенно вам очень поможет.
1.1 Изучение Streamlit: простое создание интерактивных приложений
Для начала познакомимся со Streamlit. Streamlit — это библиотека Python с открытым исходным кодом для специалистов по данным и разработчиков, которая позволяет легко создавать интерактивные и настраиваемые приложения для работы с данными. Без утомительной разработки внешнего интерфейса вам нужно использовать Python только для написания кода, и вы можете быстро создавать интерактивные приложения для визуализации данных. Streamlit предоставляет множество компонентов и вариантов компоновки, позволяющих легко отображать данные, взаимодействовать с пользователями и делиться своими результатами.
1.2 Самая полная колонка обучающих материалов Streamlit
В моей колонке « Самое полное руководство по Streamlit » я поделился серией руководств по Streamlit, которые помогут вам освоить этот инструмент с нуля. Если вы еще не знакомы с Streamlit, я предлагаю вам сначала прочитать следующие статьи, чтобы лучше понять, что будет объяснено в этой статье:
Колонка пояснений Streamlit (1): Установка и начальное применение
Streamlit Колонка пояснений (2): Построение сначала Применение
Streamlit Объяснение Столбец (3): Два решения для создания многостраничного
Streamlit Объяснение Столбец (5): Изучение мощной и гибкой функции st.write()
Объяснение Streamlit Столбец (6): Демонстрация магии текста
Объяснение Streamlit Колонка (8): магия изображений, аудио и видео.
2 Мой личный блог-сайт онлайн!
Мой личный блог-сайт успешно запущен! Вы можете посетить мой блог по следующей ссылке: Ссылка на сайт
2.1 Веб-сайт блога, интегрированный с интеллектуальной диагностикой языка ТКМ - колонка китайской электронной диагностики
Этот сайт блога является местом, где собраны все мои статьи в колонке Smart TCM Tongue Diagnosis - Zhonge Diagnosis . Здесь вы можете легко просматривать, читать каждый столбец и просматривать изображения и контент в каждой статье. Создание этого веб-сайта основано на технологии Streamlit, которая позволяет мне создавать этот интерактивный веб-сайт блога простым способом, не требуя слишком большой предварительной разработки.
2.2 Ранние приготовления
Здесь вам нужно экспортировать свой пост в блоге, интимный CSDN предоставляет нам функцию экспорта!
Нажмите «Экспорт» на странице редактирования блога → нажмите «Экспортировать как файл MarkDown».
PS: это также можно использовать в качестве резервного метода для вашего блога.
После экспорта всех ваших блогов организуйте их в папку, и предварительная подготовка окончена!
2.3 Работа с Streamlit Cloud
Я развернул этот сайт блога в облаке Streamlit, который является официальным сервисом, предоставляемым Streamlit. Благодаря Streamlit Cloud я могу развернуть свое приложение прямо в облаке и поделиться им со всеми. Если вы хотите узнать больше о том, как использовать Streamlit Cloud для запуска и развертывания приложений, я подробно объясню в самой полной колонке Streamlit Tutorial , так что следите за обновлениями!
Я действительно с нетерпением жду каждого, кто посетит мой личный сайт блога и испытает интерактивность и богатый и разнообразный контент. Если вы интересуетесь Streamlit, визуализацией данных и интерактивными приложениями, то этот блог-сайт определенно принесет вам много пользы.
3 очка знаний объяснение
3.1 Реализация нескольких страниц: два варианта
На моем личном блог-сайте я применил два разных метода реализации многостраничной функции, чтобы читатели могли более удобно просматривать и читать разные сообщения блога. Ниже я кратко представлю вам эти два решения.Если вы хотите узнать больше о деталях реализации каждого решения, вы можете перейти к моей статье: Streamlit Explanation Column (3) : Два решения для построения нескольких страниц .
Первое решение: использование состояния сеанса для достижения многостраничного взаимодействия
. В этом решении я использую функцию состояния сеанса Streamlit для реализации многостраничного взаимодействия через общее состояние. Каждая страница соответствует своему состоянию, поэтому я могу переключаться между разными страницами в соответствии с выбором и операцией пользователя и поддерживать согласованность состояния страницы. Этот метод подходит для относительно простых многостраничных приложений, и его относительно просто реализовать без дополнительных настроек маршрутизации URL.
Второе решение: встроенная многостраничная функция Streamlit
Другой способ заключается в использовании встроенной многостраничной функции Streamlit. Последняя версия Streamlit уже поддерживает создание нескольких страниц и навигацию по различным кнопкам или ссылкам. Я реализовал многостраничное переключение, написав разные функции для каждой страницы, а затем вызывая соответствующие функции, когда пользователь нажимает на разные ссылки. Такой подход очень удобен для более сложных многостраничных приложений, он позволяет более гибко организовать структуру приложения и предоставляет больше возможностей для настройки.
Если вы заинтересованы в этих двух схемах, я настоятельно рекомендую вам прочитать мою статью: Streamlit Explanation Column (3): Две схемы создают несколько страниц , в которой я подробно рассказываю об этапах реализации и мерах предосторожности каждой схемы. Независимо от того, являетесь ли вы новичком или опытным разработчиком, эта статья даст вам полезные советы и вдохновение.
3.2 Объяснение кода
Ниже приведена реализация кода использования Streamlit для создания личного веб-сайта блога. Во-первых, давайте посмотрим на общую структуру кода:
# 导入所需的库
import streamlit as st
import os
import re
import requests
from PIL import Image
from io import BytesIO
# 获取当前路径
current_path = os.getcwd()
# ...（略去了其他导入和定义函数的部分）
# 主应用程序
def main():
# 在侧边栏添加标题
st.sidebar.title("博文选择")
# 设置博文文件夹路径（相对于当前路径）
markdown_folder = current_path + '/blog/' # 修改为你的文件夹路径
markdown_files = [file for file in os.listdir(markdown_folder) if file.endswith('.md')]
# 创建博文选择的下拉列表
selected_file = st.sidebar.selectbox("选择要阅读的博文", markdown_files)
# 构建博文的完整文件路径
file_path = os.path.join(markdown_folder, selected_file)
# 调用创建博文页面函数
blog_page(file_path)
if __name__ == "__main__":
main()
Далее давайте подробно объясним точки знаний Streamlit, связанные с кодом, блок за блоком.
Импорт необходимых библиотек
Сначала мы импортировали библиотеки, которые будем использовать в коде, в том числе Streamlit, os, re, request, PIL (для обработки изображений), BytesIO (для обработки байтовых потоков).
Получение текущего пути
Мы используем функцию os.getcwd() для получения текущего рабочего пути, который поможет нам определить путь к папке блога.
Чтение содержимого файла Markdown
Эта часть кода определяет функцию read_markdown_file(file_path), которая используется для чтения содержимого файла Markdown. Мы используем с open(), чтобы открыть файл, прочитать содержимое и вернуться.
Разделение содержимого Markdown по ссылке на изображение
Эта часть кода определяет функцию split_markdown_by_images(markdown_content), которая используется для разделения содержимого Markdown на несколько частей по ссылке на изображение. Мы используем регулярные выражения и манипуляции со строками для достижения сегментации.
Создание страницы сообщения в блоге
Эта часть кода определяет функцию blog_page(file_path), которая используется для создания отдельной страницы сообщения в блоге. Во-первых, мы устанавливаем заголовок страницы с помощью st.title(). Затем мы берем имя файла и используем st.write() для вставки заголовка сообщения.
Затем мы вызываем ранее определенную функцию для чтения и отображения содержимого Markdown. Мы разделяем контент на части, определяя, содержит ли строка ссылку на изображение. Если это ссылка на изображение, мы используем библиотеку запросов для получения изображения и используем st.image() для отображения изображения на странице, в противном случае мы используем st.markdown() для отображения текстового содержимого в формате Markdown.
Основное приложение
В основном приложении мы начинаем с добавления заголовка на боковую панель. Затем мы устанавливаем путь к папке сообщения в блоге и перечисляем все файлы Markdown в папке. Используя st.sidebar.selectbox(), мы создаем выпадающий список, который позволяет пользователю выбрать сообщение в блоге для чтения.
Наконец, мы создаем полный путь к файлу сообщения в блоге и вызываем ранее определенную функцию blog_page() для создания страницы сообщения в блоге.
3.3 Этапы реализации
Шаг 1: Установите Streamlit
Прежде чем приступить к работе, убедитесь, что у вас установлен Streamlit. Если он не установлен, вы можете ввести следующую команду в командной строке:
pip install streamlit
Шаг 2: Подготовьте статьи Markdown
Во-первых, вам нужно подготовить статьи Markdown, которые станут содержанием вашего блога. Вы можете поместить эти статьи Markdown в папку, например, в папку «блог».
Шаг 3: Напишите приложение Streamlit
Теперь давайте шаг за шагом напишем приложение Streamlit, чтобы создать персональный блог-сайт.
Сначала импортируйте необходимые библиотеки:
import streamlit as st
import os
import re
import requests
from PIL import Image
from io import BytesIO
Далее получаем текущий путь:
current_path = os.getcwd()
Определите функцию для чтения содержимого файла Markdown:
def read_markdown_file(file_path):
with open(file_path, 'r', encoding='utf-8') as file:
content = file.read()
return content
Реализуйте функцию разделения содержимого Markdown по ссылкам на изображения:
def split_markdown_by_images(markdown_content):
parts = []
current_part = ""
lines = markdown_content.splitlines()
for line in lines:
if re.match(r'\!\[.*\]\(http[s]?://.*\)', line):
if current_part:
parts.append(current_part)
parts.append(line)
current_part = ""
else:
current_part += line + "\n"
if current_part:
parts.append(current_part)
return parts
Функция для создания страницы поста в блоге:
def blog_page(file_path):
st.title("蓝色是天的中医舌诊博客网站")
# 获取博文标题
markdown_title = os.path.splitext(os.path.basename(file_path))[0]
st.write(f"## {
markdown_title}") # 插入博文标题
# 读取并显示Markdown内容
markdown_content = read_markdown_file(file_path)
# 将Markdown内容按图片链接分割
content_parts = split_markdown_by_images(markdown_content)
for part in content_parts:
if re.match(r'\!\[.*\]\(http[s]?://.*\)', part):
image_url = re.search(r'\((http[s]?://.*)\)', part).group(1)
response = requests.get(image_url)
response = response.content
bytes_io_obj = BytesIO()
bytes_io_obj.write(response)
img = Image.open(bytes_io_obj)
st.image(img, use_column_width=True)
else:
st.markdown(part)
Наконец, создайте основное приложение:
def main():
st.sidebar.title("博文选择")
markdown_folder = current_path + '/blog/' # 修改为你的文件夹路径
markdown_files = [file for file in os.listdir(markdown_folder) if file.endswith('.md')]
selected_file = st.sidebar.selectbox("选择要阅读的博文", markdown_files)
file_path = os.path.join(markdown_folder, selected_file)
blog_page(file_path)
if __name__ == "__main__":
main()
Шаг 4: Запустите приложение Streamlit
Запустите в терминале следующую команду, чтобы запустить приложение Streamlit:
streamlit run your_app_name.py
Замените «your_app_name.py» на имя файла, в котором вы сохранили свой код. Это запустит локальный сервер и отобразит ваш личный сайт блога в браузере.
Шаг 5: Публикация веб-сайта
Вы можете использовать Streamlit Cloud для публикации веб-сайта блога в Интернете. Streamlit Cloud — это платформа, которая позволяет вам делиться и распространять приложения Streamlit. Для конкретных шагов публикации вы можете найти дополнительную информацию в моей колонке.
Это полный процесс использования Streamlit для создания личного блога. С помощью этого простого приложения вы можете отображать записи и изображения блога Markdown в красивом интерактивном интерфейсе, чтобы читателям было более приятно читать ваш контент. Кроме того, Streamlit также предлагает дополнительные параметры настройки, которые помогут вам улучшить свой блог-сайт.
Я надеюсь, что эта статья окажется полезной для тех из вас, кто хочет использовать Streamlit для создания личного веб-сайта для ведения блога. Добро пожаловать, чтобы изучить больше возможностей Streamlit и создать потрясающие интерактивные приложения для работы с данными!
3.4 Полный код
import streamlit as st
import os
import re
import requests
from PIL import Image
from io import BytesIO
# 获取当前路径
current_path = os.getcwd()
# 读取Markdown文件内容
def read_markdown_file(file_path):
with open(file_path, 'r', encoding='utf-8') as file:
content = file.read()
return content
# 将Markdown内容按图片链接分割
def split_markdown_by_images(markdown_content):
parts = []
current_part = ""
lines = markdown_content.splitlines()
for line in lines:
if re.match(r'\!\[.*\]\(http[s]?://.*\)', line):
if current_part:
parts.append(current_part)
parts.append(line)
current_part = ""
else:
current_part += line + "\n"
if current_part:
parts.append(current_part)
return parts
# 创建博文页面
def blog_page(file_path):
# 设置页面标题
st.title("蓝色是天的中医舌诊博客网站")
# 获取博文标题
markdown_title = os.path.splitext(os.path.basename(file_path))[0]
st.write(f"## {
markdown_title}") # 插入博文标题
# 读取并显示Markdown内容
markdown_content = read_markdown_file(file_path)
# 将Markdown内容按图片链接分割
content_parts = split_markdown_by_images(markdown_content)
for part in content_parts:
if re.match(r'\!\[.*\]\(http[s]?://.*\)', part):
image_url = re.search(r'\((http[s]?://.*)\)', part).group(1)
response = requests.get(image_url)
response = response.content
bytes_io_obj = BytesIO()
bytes_io_obj.write(response)
img = Image.open(bytes_io_obj)
st.image(img, use_column_width=True)
else:
st.markdown(part)
# 主应用程序
def main():
# 在侧边栏添加标题
st.sidebar.title("博文选择")
# 设置博文文件夹路径（相对于当前路径）
markdown_folder = current_path + '/blog/' # 修改为你的文件夹路径
markdown_files = [file for file in os.listdir(markdown_folder) if file.endswith('.md')]
# 创建博文选择的下拉列表
selected_file = st.sidebar.selectbox("选择要阅读的博文", markdown_files)
# 构建博文的完整文件路径
file_path = os.path.join(markdown_folder, selected_file)
# 调用创建博文页面函数
blog_page(file_path)
if __name__ == "__main__":
main()
4 Эпилог
В этой статье мы узнали, как использовать Streamlit, мощный инструмент, для создания личного сайта блога и отображения содержимого и изображений Markdown в интерактивном интерфейсе. Вместо утомительной фронтенд-разработки мы можем сосредоточиться на написании кода на Python, чтобы создать элегантную и многофункциональную платформу для ведения блогов.
Streamlit предоставляет простые в использовании элементы интерфейса, которые позволяют нам быстро создавать интерактивные приложения для работы с данными, чтобы делиться своими знаниями и идеями с нашими читателями. В процессе создания личного блога мы изучили такие точки знаний, как чтение содержимого файлов Markdown, обработка ссылок на изображения и создание многостраничных взаимодействий. В то же время мы также узнали, как опубликовать наш веб-сайт в Интернете через Streamlit Cloud, чтобы поделиться нашим контентом с большим количеством читателей.
Поскольку технологии продолжают развиваться, мы можем взаимодействовать с нашими читателями более инновационными и удобными способами. Используя Streamlit, мы можем не только создавать личные блоги, но и создавать различные интерактивные приложения для работы с данными, чтобы интуитивно представлять сложные данные и идеи общественности.
В наш информационный век наличие персонального блога — отличный способ поделиться знаниями и обменяться опытом. Я призываю всех попробовать Streamlit, представить миру свои идеи и идеи и создать творческую и интерактивную обучающую платформу.
Я надеюсь, что эта статья поможет вам начать работу со Streamlit и получить удовольствие от создания личного блога. Независимо от того, являетесь ли вы специалистом по данным, разработчиком или блоггером, Streamlit может помочь вам создавать потрясающие интерактивные приложения. Давайте оставим свой след в океане технологий и создадим еще больше захватывающих историй!
