Flask框架實戰教程：搭建個人博客

面是一個簡單的Flask框架實戰教程，用于指導如何搭建一個基本的個人博客系統。這個教程會覆蓋一些基本的步驟和概念，包括安裝Flask、創建項目結構、添加路由和模板等。

第一步：安裝Flask

首先確保你的環境中已經安裝了Python。然后在命令行中執行以下命令來安裝Flask：

Bash

深色版本

1pip install flask

第二步：創建項目文件夾

創建一個新的文件夾來存放你的博客項目，并在其中創建一個app.py文件：

Bash

深色版本

1mkdir my_blog
2cd my_blog
3touch app.py

第三步：創建基本的Flask應用

打開app.py文件并輸入以下代碼：

Python

深色版本

1from flask import Flask, render_template
2
3app=Flask(__name__)
4
5@app.route('/')
6def home():
7    return render_template('home.html')
8
9if __name__=='__main__':
10    app.run(debug=True)

這里我們定義了一個基本的路由/，它返回渲染后的home.html頁面。

第四步：創建模板文件夾

在項目根目錄下創建一個名為templates的文件夾，并在其中創建一個home.html文件：

Bash

深色版本

1mkdir templates
2touch templates/home.html

然后編輯home.html文件，添加基本的HTML結構：

Html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Home</title>
6</head>
7<body>
8    <h1>Welcome to My Blog!</h1>
9    <p>This is the homepage of my blog.</p>
10</body>
11</html>

第五步：運行應用

回到命令行，確保你在項目根目錄下，然后運行以下命令啟動Flask應用：

Bash

深色版本

1python app.py

瀏覽器中訪問 http://127.0.0.1:5000/ 應該能看到你的主頁。

第六步：添加更多頁面

接下來，我們可以添加更多的頁面，比如文章列表頁面和文章詳情頁面。

文章列表頁面

修改app.py文件，添加一個新的路由/posts：

Python

深色版本

1@app.route('/posts')
2def posts():
3    # 假設這里有從數據庫獲取的文章列表
4    posts=[
5        {'title': 'First Post', 'content': 'This is the content of the first post.'},
6        {'title': 'Second Post', 'content': 'This is the content of the second post.'}
7    ]
8    return render_template('posts.html', posts=posts)

在templates文件夾中創建posts.html文件：

Html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Posts</title>
6</head>
7<body>
8    <h1>My Posts</h1>
9    {% for post in posts %}
10        <div>
11            <h2>{{ post.title }}</h2>
12            <p>{{ post.content }}</p>
13        </div>
14    {% endfor %}
15</body>
16</html>

文章詳情頁面

添加一個新的路由/post/<int:post_id>來顯示單個文章的詳細信息：

Python

深色版本

1@app.route('/post/<int:post_id>')
2def post(post_id):
3    # 假設這里有從數據庫獲取的文章詳細信息
4    post={
5        'id': post_id,
6        'title': f'Post {post_id}',
7        'content': f'This is the content of post {post_id}.'
8    }
9    return render_template('post.html', post=post)

在templates文件夾中創建post.html文件：

Html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>{{ post.title }}</title>
6</head>
7<body>
8    <h1>{{ post.title }}</h1>
9    <p>{{ post.content }}</p>
10</body>
11</html>

現在你可以通過訪問 http://127.0.0.1:5000/posts 和 http://127.0.0.1:5000/post/1 來查看文章列表和具體的文章詳情。

第七步：擴展功能

隨著項目的深入，你可以考慮添加用戶認證、評論系統、上傳圖片等功能。這通常涉及到數據庫的使用，你可以選擇使用SQLAlchemy這樣的ORM來操作數據庫。

以上就是使用Flask框架搭建個人博客的基本步驟。你可以在此基礎上繼續擴展和完善你的博客系統。

文地址：Implement Dark Mode On Your Website.
原文作者：Matthew Marquise
譯者 & 校正：HelloGitHub-小魚干 & 鹵蛋

暗黑模式是網站頗受歡迎的功能，用 HTML、CSS、JS 即可實現。但為什么你沒有在你的個人網站實現暗黑功能呢？只要這簡單的三個步驟，你就可以擁有暗黑模式。實操開始！（譯：并不是所有的人都會 CSS，所以這是為什么我會翻譯本文的原因，它真的超簡單！）

本文目錄

暗黑模式 Step 1
暗黑模式 Step 2
暗黑模式 Step 3
展示效果

暗黑模式 Step 1：

如果你還沒有個人網站，先簡單地創建一個 HTML 文件。

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    ...
  <body>
</html>

有了網站之后，下面來實現 HTML 和 CSS。

暗黑模式 Step 2：

開始往 HTML 里添加我們想要的東西，先來添加鏈接 JS 和 CSS 文件的方法，就像 ADD CSS FILE 和 ADD JS FILE 注釋下的那樣：

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ADD CSS FILE -->
    <link rel="stylesheet" href="main.css">

    <!-- ADD JS FILE -->
    <script src="main.js"></script>
  </head>

  <body>
    ...
  <body>
</html>

現在我們要開始創建 JS 和 CSS 文件了。你可以隨意更改你的 CSS 文件，在這里，我添加了一些代碼：

/* main.css */
body {
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

在 body 模塊，我們設定默認網頁背景色為白色、文本為黑色，而在 dark-mode 模塊，我們將網頁背景色變為黑色、文本則是白色。

好了，我們要創建 main.js 文件了，這是實現暗黑功能的關鍵；

//main.js

function darkmode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
}

function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

成功創建 CSS 和 JS 文件后，你現在只用做最后一件事。

暗黑模式 Step 3：

經過上面 2 個步驟，你可能認為暗黑模式已經實現，但其實不是。來問自己一個問題：如果我的網站有多個頁面要咋整？如何在每個頁面啟用黑暗模式而不是默認的白色背景？答案比你想的要簡單得多。在每個頁面的初始 body tag 中添加：

onload="onload()"

就這么簡單，希望它對你有用，謝謝閱讀本文^^

展示效果

最后，歡迎優秀的你加入 HelloGitHub 的「譯文亦舞」系列，讓你的才華舞動起來！把優秀的文章分享給更多的人。要求：

平時瀏覽 GitHub、開源、編程、程序員等英文資訊和文章
想把自己閱讀到優秀的英文文章分享給更多的人
翻譯準確但不是直翻或機翻
保證每月至少翻譯或校正 1 篇高質量文章
了解 Markdown 和排版規則
聯系我

色模式最近風頭正熱，大家都用上了嗎？本文作者從產品經理的角度出發，對人們為什么喜歡深色模式、深色模式適配現狀以及深色模式的搭配思路進行了分析，與大家分享。

在 Android Q 之后，蘋果也在 iOS13 支持了深色模式，深色模式成了2019下半年的熱門話題，不少產品已經完成了對深色模式的適配，淘寶、微信也先后開始內測，「變黑」似乎已經成為趨勢。

而在適配深色模式之前，設計師需要深入了解它的特性，衡量適配深色模式帶來的價值，以及規劃合適的策略，避免陷入「為黑而黑」的泥潭。

一、為什么人們會喜歡「深色模式/dark mode」？

1. 深色系界面弱化背景，瀏覽內容更專注

影片放映時會關掉所有燈光，只有屏幕亮起吸引觀眾的注意力，同樣的原理下，當產品界面是深色背景時，頁面元素優先級更清晰，用戶更容易注意到關鍵內容。而且相比淺色為主的界面，深色界面對眼睛的視覺壓力更小。

注：至于它的「護眼」作用還尚未明確，長時間盯著屏幕造成的視覺疲勞依然不可避免。

2. 新鮮感

看了太久千篇一律的「白底黑字」，深色模式讓用戶多了一種選擇。人人喜歡新鮮的樣式，哪怕只是短暫的熱情嘗試，都會增加用戶對產品的新鮮感，并且不可否認的是，黑色更容易讓人感覺到酷炫新鮮。

3. 省電- OLED 屏幕顯示深色能耗更低

OLED 屏幕中每個像素都是自主發光，在顯示深色元素時，消耗的電量更少，而在顯示純黑色時，像素點可以徹底關閉。打個不完全嚴謹的比方，手機屏幕就像是排列了幾萬個小燈泡的大燈板，OLED 屏幕顯示黑色時會真的把那塊區域的燈泡關掉，自然會省電。

二、深色模式不等同于夜間模式

很多產品已經存在夜間模式，開啟夜間模式后界面同樣會轉向暗色，而突然被討論的「深色模式」和「夜間模式」有什么區別？

對于用戶而言顯然沒有必要分清楚夜間模式和深色模式的差別，在外觀上，它們真的很像。但是以設計師的角度來說，只有真正區分它們之間的差別和應用場景，才能提供給用戶一套邏輯清晰的選擇方案，讓用戶更方便快捷的選擇自己想要的模式。

開啟夜間模式前后對比

淺色/深色模式下的界面對比

通過這兩張對比圖，可以明顯的感覺到夜間模式與深色模式下，界面元素的對比、層級表現都有所區別。夜間模式的設計目的，是讓用戶在夜間使用手機時，屏幕顯示更柔和，調整色溫、降低飽和度，而在白天開啟夜間模式很難看清顯示內容，并不適合在白天使用。

顯然，深色模式不是夜間模式，用戶可以在任何時間任何環境下使用它，需要維持和淺色模式同樣的產品特性，可以和設備的夜覽模式同時開啟。

三、深色模式適配現狀

用戶將系統主題設置為深色后，自然就會期望所有的 app 都變成深色，深色模式逐漸會成為產品標配的功能。已經有越來越多的產品用各種方式對系統的深色模式進行適配。主要分為以下三種類型：

1. app 自動跟隨系統主題切換模式

如果用戶的手機系統不支持深色模式，產品不會切換到深色模式。

代表產品有微信讀書、豆瓣、懶飯、Instagram、愛奇藝

2. 原有夜間模式與深色模式進行捆綁，讓用戶自行選擇是否配合系統主題切換

在不支持深色主題的系統內用戶可以通過開啟夜間模式，使產品主題變為深色。嚴格來說，這并不是真正的深色模式，而出于不同的決策模型，產品團隊會做出最適合自己的選擇。

代表產品：QQ、Twitter

3. 原有產品沒有夜間模式，正在內測跟隨系統切換主題的深色模式

代表產品：微信淘寶

四、深色模式的適配不同思路

iOS & Android 兩套設計語言的 Dark Mode 策略除了在基礎色彩體系的數值有些差距外，更明顯的是在 Accent color 的不同處理方式。Android Q 則強調保障清晰觀看體驗的前提下，要具備更多的靈活性，比如在原色彩上面加 40% 的白色透明遮罩，以增強在深色背景上的清晰對比度，缺點可能會讓原色彩在感官上發生較大的偏差。
——引自：釘釘 Dark Mode 設計

1. 語義化顏色

在 iOS 設計語言規范下，產品支持深色模式就必須管理兩套完整的顏色方案，確保它們之間始終保持同步，這就要求設計團隊以更系統的方式來管理顏色體系。為此，蘋果引入了“語義化顏色”的概念。

注：語義化顏色是通過「用途」來對元素進行定義描述，而不是具體的色值。「用途」定義下的顏色是動態性，脫離于具體的表現樣式而獨立存在。比如，“背景色”，在深色模式中指代黑色，而在淺色模式中指代白色，這樣就可以讓顏色靈活的適應淺色與深色模式切換。

具體應用方法已有很多資料分享，本文不做擴展。

2. 統一規律變化色彩梯度

Android 適配方案簡單粗暴，對于顏色可參考梯梯度漸變模型規律配色，頁面背景根據層級疊加不同透明度的白色即可。但是完全執行就容易導致產品在深色模式下產生風格偏移，出現不符合品牌設計語言的情況。

3. 智能語義化

在iOS 適配策略的基礎上，淘寶團隊在分享中提出了「智能語義化」方案，使適配成本大幅降低。方案思路是：設計師根據不同UI元素的特性先期制定顏色語義化規則，技術在框架層面通過“顏色自動反轉”技術實現顏色反轉。

然而除去基本顏色，大量的圖標、插圖，動效等等需要一一調整兼容，完美適配深色模式需要多方配合持續維護，而后期的功能開發也需要同時兼顧兩種模式，對于自定義元素較多、業務組成復雜的 APP適配難度可想而知。

最后

看完本文后，你可以了解深色模式受到追捧的原因，區分深色模式與夜間模式的不同，了解到適配深色模式的多種策略和面臨的挑戰，深入思考，當前產品是否真的需要適配深色模式。最后，希望能夠幫你找到真正適合自己產品的適配策略。

#參考資料#

WCGA2.0 標準：Web Content Accessibility Guidelines (WCAG) Overview | Web Accessibility Initiative (WAI) | W3C
iOS HIG 中 Dark Mode 設計指導的章節https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
Material Design 中 Dark Mode 設計指導的章節：https://material.io/design/color/dark-theme.html#properties
一篇吃透 Dark Mode ，搞定“暗黑/深色”適配
淘寶設計團隊-我們把淘寶黑了

作者：bubblegun；公眾號：@泡槍指北

本文由 @bubblegun 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

在線咨詢

上一篇：新能源項目投資與開發過程中應避免的十大紅線雷區（下)
下一篇：絕對有幫助，HTML5中的“日期輸入”問題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Flask框架實戰教程：搭建個人博客

第一步：安裝Flask

第二步：創建項目文件夾

第三步：創建基本的Flask應用

第四步：創建模板文件夾

第五步：運行應用

第六步：添加更多頁面

文章列表頁面

文章詳情頁面

第七步：擴展功能

本文目錄

暗黑模式 Step 1：

暗黑模式 Step 2：

暗黑模式 Step 3：

展示效果

一、為什么人們會喜歡「深色模式/dark mode」？

1. 深色系界面弱化背景，瀏覽內容更專注

2. 新鮮感

3. 省電- OLED 屏幕顯示深色能耗更低

二、深色模式不等同于夜間模式

三、深色模式適配現狀

1. app 自動跟隨系統主題切換模式

3. 原有產品沒有夜間模式，正在內測跟隨系統切換主題的深色模式

四、深色模式的適配不同思路

1. 語義化顏色

2. 統一規律變化色彩梯度

3. 智能語義化

最后

#參考資料#

您的項目需求