記事ディレクトリ
1 はじめに
みなさんこんにちは、私のブログへようこそ！この記事では、強力なツールである Streamlit を使用して個人のブログ Web サイトを構築する方法を詳しく紹介します。データの視覚化、インタラクティブなアプリケーション、ブログの執筆に興味がある場合、この記事は間違いなく役立ちます。
1.1 Streamlit の探索: インタラクティブなアプリケーションの簡単な作成
まず、Streamlit について理解しましょう。Streamlit は、データ サイエンティストと開発者向けのオープンソース Python ライブラリで、インタラクティブで高度にカスタマイズ可能なデータ アプリケーションを簡単に構築できます。面倒なフロントエンド開発を必要とせず、Python を使用してコードを記述するだけで、インタラクティブなデータ視覚化アプリケーションを迅速に作成できます。Streamlit は豊富なコンポーネントとレイアウト オプションを提供し、データの表示、ユーザーとの対話、結果の共有を簡単に行うことができます。
1.2 最も完全な Streamlit チュートリアルのコラム
私のコラム:最も完全な Streamlit チュートリアルでは、このツールをゼロからマスターするための Streamlit に関する一連のチュートリアルを共有しました。Streamlit についてまだ学習していない場合は、まず次の記事を読んで、この記事で説明する内容をよりよく理解することをお勧めします。
Streamlit 解説コラム (1): Streamlit のインストールと初期適用
解説コラム (2): Streamlit の構築最初に Streamlit の応用
解説コラム (3): マルチページ
Streamlit を構築する 2 つのソリューション 解説コラム (5): 強力で柔軟な st.write() 関数の探索
Streamlit 解説コラム (6): テキストの魔法を示す
Streamlit 解説コラム(8)：画像・音声・映像のマジック
2 私の個人ブログ サイトがオンラインになりました!
私の個人ブログサイトが無事に立ち上げられました！次のリンクから私のブログ サイトにアクセスできます:ウェブサイトのリンク
2.1 インテリジェント中医舌診断-中国語電子診断コラムを統合したブログサイト
このブログサイトは、スマート中医舌診 - 舌診コラムの私の記事をまとめた場所です。ここでは、各コラムを簡単に閲覧したり、読んだり、各記事の画像やコンテンツを表示したりできます。この Web サイトの構築は Streamlit テクノロジーに基づいており、フロントエンドの開発をあまり必要とせずに、このインタラクティブなブログ Web サイトを簡単な方法で構築できます。
2.2 早期の準備
ここではブログ投稿をエクスポートする必要があります。親密な CSDN はエクスポート機能を提供します。
ブログ編集ページで「エクスポート」をクリック→「MarkDown ファイルとしてエクスポート」をクリック
ps: これはブログのバックアップ方法としても使用できます。
すべてのブログをエクスポートしたら、フォルダーに整理すれば下準備は完了です。
2.3 Streamlit クラウドでの実行
このブログサイトは、Streamlit が提供する公式サービスである Streamlit Cloud 上にデプロイしました。Streamlit Cloud を使用すると、アプリケーションをクラウドに直接デプロイし、全員と共有できます。Streamlit Cloud を使用してアプリケーションを実行およびデプロイする方法について詳しく知りたい場合は、最も完全な Streamlit チュートリアルコラムで詳しく説明しますので、楽しみにしていてください。
皆様が私の個人ブログ サイトにアクセスして、双方向性と豊富で多様なコンテンツを体験していただけることを心より楽しみにしています。Streamlit、データ視覚化、インタラクティブ アプリケーションに興味がある場合は、このブログ サイトが間違いなく多くの情報を提供してくれるでしょう。
3 知識ポイントの説明
3.1 複数ページの実装: 2 つのオプション
私の個人ブログ サイトでは、読者がさまざまなブログ投稿をより便利に閲覧したり読んだりできるように、マルチページ機能を実現するために 2 つの異なる方法を採用しました。以下に、これら 2 つのソリューションを簡単に紹介します。各ソリューションの実装の詳細について詳しく知りたい場合は、記事「Streamlit解説コラム (3): 複数ページを構築する 2 つのソリューション」を参照してください。
最初の解決策: セッション状態を使用して複数ページの対話を実現する
この解決策では、Streamlit のセッション状態機能を使用して、共有状態による複数ページの対話を実現します。各ページは異なる状態に対応しているため、ユーザーの選択や操作に応じて異なるページを切り替えることができ、ページ状態の一貫性を維持できます。この方法は比較的単純なマルチページ アプリケーションに適しており、追加の URL ルーティング設定を必要とせずに実装するのも比較的簡単です。
2 番目の解決策: Streamlit の組み込みマルチページ
もう 1 つの方法は、Streamlit の組み込みマルチページ機能を使用することです。Streamlit の最新バージョンでは、複数のページの作成と、さまざまなボタンやリンク間の移動がすでにサポートされています。ページごとに異なる関数を記述し、ユーザーが異なるリンクをクリックしたときに対応する関数を呼び出すことで、複数ページの切り替えを実装しました。このアプローチは、より複雑なマルチページ アプリケーションにとって非常に実用的で、アプリケーション構造をより柔軟に編成できるようになり、より多くのカスタマイズ オプションが提供されます。
これら 2 つのスキームに興味がある場合は、各スキームの実装手順と注意事項を詳しく紹介した記事「Streamlit 解説コラム (3): 2 つのスキームで複数のページを構築する」を読むことを強くお勧めします。初心者でも経験豊富な開発者でも、この記事は有益なガイダンスとインスピレーションをもたらすでしょう。
3.2 コードの説明
以下は、Streamlit を使用して個人のブログ Web サイトを構築するコードの実装です。まず、コードの全体的な構造を見てみましょう。
# 导入所需的库
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、requests、PIL (画像処理用)、BytesIO (バイト ストリーム処理用) など、コードで使用するライブラリをインポートしました。
現在のパスを取得する
os.getcwd() 関数を使用して現在の作業パスを取得します。これは、ブログ フォルダーへのパスを決定するのに役立ちます。
Markdown ファイルの内容を読み取る
コードのこの部分では、Markdown ファイルの内容を読み取るために使用される関数 read_markdown_file(file_path) を定義します。open() とともに使用して、ファイルを開いて内容を読み取り、戻ります。
画像リンクによる Markdown コンテンツの分割
コードのこの部分では、関数 Split_markdown_by_images(markdown_content) を定義します。この関数は、Markdown コンテンツを画像リンクによって複数の部分に分割するために使用されます。正規表現と文字列操作を使用してセグメンテーションを実現します。
ブログ投稿ページの作成
コードのこの部分では、単一のブログ投稿ページを作成するために使用される関数 blog_page(file_path) を定義します。まず、st.title()を使用してページタイトルを設定します。次に、ファイル名を取得し、st.write() を使用して投稿のタイトルを挿入します。
次に、以前に定義した関数を呼び出して、Markdown コンテンツを読み取って表示します。行に画像リンクが含まれているかどうかを判断して、コンテンツを部分に分割します。画像リンクの場合は、リクエスト ライブラリを使用して画像を取得し、st.image() を使用してページに画像を表示します。それ以外の場合は、st.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: Web サイトを公開する
Streamlit Cloud を使用して、ブログ Web サイトをインターネットに公開できます。Streamlit Cloud は、Streamlit アプリケーションを共有および配布できるプラットフォームです。具体的な公開手順については、私のコラムで詳細をご覧ください。
これは、Streamlit を使用して個人のブログ Web サイトを構築する完全なプロセスです。このシンプルなアプリケーションを使用すると、Markdown ブログ投稿と画像を美しいインタラクティブ インターフェイスで表示できるため、読者はコンテンツをより楽しく読むことができます。それだけでなく、Streamlit はブログ Web サイトをさらに改善できる、より多くのカスタマイズ オプションも提供します。
この記事が、Streamlit を使用して個人のブログ Web サイトを構築したい人にとって役立つことを願っています。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 を通じて Web サイトをインターネットに公開し、より多くの読者とコンテンツを共有する方法も学びました。
テクノロジーが進化し続けるにつれて、私たちはより革新的で便利な方法で読者と対話できるようになりました。Streamlit を使用すると、個人のブログを構築できるだけでなく、さまざまなインタラクティブなデータ アプリケーションを作成して、複雑なデータや洞察を直感的な方法で一般公開することもできます。
この情報化時代において、パーソナライズされたブログ サイトを持つことは、知識を共有し、経験を交換するための優れた方法です。皆さんも Streamlit を試し、アイデアや洞察を世界に発表し、創造的でインタラクティブな学習プラットフォームを作成することをお勧めします。
この記事が、Streamlit を使い始めて、個人のブログ サイトを構築する楽しさを探求するのに役立つことを願っています。データ サイエンティスト、開発者、ブロガーのいずれであっても、Streamlit は魅力的なインタラクティブ アプリの作成に役立ちます。テクノロジーの海に私たち自身の足跡を残して、もっと面白いストーリーを創りましょう！
