整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          Flask框架實戰(zhàn)教程:搭建個人博客

          Flask框架實戰(zhàn)教程:搭建個人博客

          面是一個簡單的Flask框架實戰(zhàn)教程,用于指導(dǎo)如何搭建一個基本的個人博客系統(tǒng)。這個教程會覆蓋一些基本的步驟和概念,包括安裝Flask、創(chuàng)建項目結(jié)構(gòu)、添加路由和模板等。

          第一步:安裝Flask

          首先確保你的環(huán)境中已經(jīng)安裝了Python。然后在命令行中執(zhí)行以下命令來安裝Flask:

          Bash

          深色版本

          1pip install flask

          第二步:創(chuàng)建項目文件夾

          創(chuàng)建一個新的文件夾來存放你的博客項目,并在其中創(chuàng)建一個app.py文件:

          Bash

          深色版本

          1mkdir my_blog
          2cd my_blog
          3touch app.py

          第三步:創(chuàng)建基本的Flask應(yīng)用

          打開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頁面。

          第四步:創(chuàng)建模板文件夾

          在項目根目錄下創(chuàng)建一個名為templates的文件夾,并在其中創(chuàng)建一個home.html文件:

          Bash

          深色版本

          1mkdir templates
          2touch templates/home.html

          然后編輯home.html文件,添加基本的HTML結(jié)構(gòu):

          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>

          第五步:運行應(yīng)用

          回到命令行,確保你在項目根目錄下,然后運行以下命令啟動Flask應(yīng)用:

          Bash

          深色版本

          1python app.py

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

          第六步:添加更多頁面

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

          文章列表頁面

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

          Python

          深色版本

          1@app.route('/posts')
          2def posts():
          3    # 假設(shè)這里有從數(shù)據(jù)庫獲取的文章列表
          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文件夾中創(chuàng)建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>來顯示單個文章的詳細(xì)信息:

          Python

          深色版本

          1@app.route('/post/<int:post_id>')
          2def post(post_id):
          3    # 假設(shè)這里有從數(shù)據(jù)庫獲取的文章詳細(xì)信息
          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文件夾中創(chuàng)建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>

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

          第七步:擴展功能

          隨著項目的深入,你可以考慮添加用戶認(rèn)證、評論系統(tǒng)、上傳圖片等功能。這通常涉及到數(shù)據(jù)庫的使用,你可以選擇使用SQLAlchemy這樣的ORM來操作數(shù)據(jù)庫。

          以上就是使用Flask框架搭建個人博客的基本步驟。你可以在此基礎(chǔ)上繼續(xù)擴展和完善你的博客系統(tǒng)。

          文地址:Implement Dark Mode On Your Website.

          原文作者:Matthew Marquise

          譯者 & 校正:HelloGitHub-小魚干 & 鹵蛋

          暗黑模式是網(wǎng)站頗受歡迎的功能,用 HTML、CSS、JS 即可實現(xiàn)。但為什么你沒有在你的個人網(wǎng)站實現(xiàn)暗黑功能呢?只要這簡單的三個步驟,你就可以擁有暗黑模式。實操開始!(譯:并不是所有的人都會 CSS,所以這是為什么我會翻譯本文的原因,它真的超簡單!)

          本文目錄

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

          暗黑模式 Step 1:

          如果你還沒有個人網(wǎng)站,先簡單地創(chuàng)建一個 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>
          

          有了網(wǎng)站之后,下面來實現(xiàn) HTML 和 CSS。

          暗黑模式 Step 2:

          開始往 HTML 里添加我們想要的東西,先來添加鏈接 JS 和 CSS 文件的方法,就像 ADD CSS FILEADD 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>
          

          現(xiàn)在我們要開始創(chuàng)建 JS 和 CSS 文件了。你可以隨意更改你的 CSS 文件,在這里,我添加了一些代碼:

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

          body 模塊,我們設(shè)定默認(rèn)網(wǎng)頁背景色為白色、文本為黑色,而在 dark-mode 模塊,我們將網(wǎng)頁背景色變?yōu)楹谏⑽谋緞t是白色。

          好了,我們要創(chuàng)建 main.js 文件了,這是實現(xiàn)暗黑功能的關(guān)鍵;

          //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');
          }

          成功創(chuàng)建 CSS 和 JS 文件后,你現(xiàn)在只用做最后一件事。

          暗黑模式 Step 3:

          經(jīng)過上面 2 個步驟,你可能認(rèn)為暗黑模式已經(jīng)實現(xiàn),但其實不是。來問自己一個問題:如果我的網(wǎng)站有多個頁面要咋整?如何在每個頁面啟用黑暗模式而不是默認(rèn)的白色背景?答案比你想的要簡單得多。在每個頁面的初始 body tag 中添加:

          onload="onload()"

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

          展示效果

          最后,歡迎優(yōu)秀的你加入 HelloGitHub 的「譯文亦舞」系列,讓你的才華舞動起來!把優(yōu)秀的文章分享給更多的人。要求:

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

          色模式最近風(fēng)頭正熱,大家都用上了嗎?本文作者從產(chǎn)品經(jīng)理的角度出發(fā),對人們?yōu)槭裁聪矚g深色模式、深色模式適配現(xiàn)狀以及深色模式的搭配思路進行了分析,與大家分享。

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

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

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

          1. 深色系界面弱化背景,瀏覽內(nèi)容更專注

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

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

          2. 新鮮感

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

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

          OLED 屏幕中每個像素都是自主發(fā)光,在顯示深色元素時,消耗的電量更少,而在顯示純黑色時,像素點可以徹底關(guān)閉。打個不完全嚴(yán)謹(jǐn)?shù)谋确剑謾C屏幕就像是排列了幾萬個小燈泡的大燈板,OLED 屏幕顯示黑色時會真的把那塊區(qū)域的燈泡關(guān)掉,自然會省電。

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

          很多產(chǎn)品已經(jīng)存在夜間模式,開啟夜間模式后界面同樣會轉(zhuǎn)向暗色,而突然被討論的「深色模式」和「夜間模式」有什么區(qū)別?

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

          開啟夜間模式前后對比

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

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

          顯然,深色模式不是夜間模式,用戶可以在任何時間任何環(huán)境下使用它,需要維持和淺色模式同樣的產(chǎn)品特性,可以和設(shè)備的夜覽模式同時開啟。

          三、深色模式適配現(xiàn)狀

          用戶將系統(tǒng)主題設(shè)置為深色后,自然就會期望所有的 app 都變成深色,深色模式逐漸會成為產(chǎn)品標(biāo)配的功能。已經(jīng)有越來越多的產(chǎn)品用各種方式對系統(tǒng)的深色模式進行適配。主要分為以下三種類型:

          1. app 自動跟隨系統(tǒng)主題切換模式

          如果用戶的手機系統(tǒng)不支持深色模式,產(chǎn)品不會切換到深色模式。

          代表產(chǎn)品有 微信讀書、豆瓣、懶飯、Instagram、愛奇藝

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

          在不支持深色主題的系統(tǒng)內(nèi)用戶可以通過開啟夜間模式,使產(chǎn)品主題變?yōu)樯钌?yán)格來說,這并不是真正的深色模式,而出于不同的決策模型,產(chǎn)品團隊會做出最適合自己的選擇。

          代表產(chǎn)品:QQ、Twitter

          3. 原有產(chǎn)品沒有夜間模式,正在內(nèi)測跟隨系統(tǒng)切換主題的深色模式

          代表產(chǎn)品:微信 淘寶

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

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

          ——引自:釘釘 Dark Mode 設(shè)計

          1. 語義化顏色

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

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

          具體應(yīng)用方法已有很多資料分享,本文不做擴展。

          2. 統(tǒng)一規(guī)律變化色彩梯度

          Android 適配方案簡單粗暴,對于顏色可參考梯梯度漸變模型規(guī)律配色,頁面背景根據(jù)層級疊加不同透明度的白色即可。但是完全執(zhí)行就容易導(dǎo)致產(chǎn)品在深色模式下產(chǎn)生風(fēng)格偏移,出現(xiàn)不符合品牌設(shè)計語言的情況。

          3. 智能語義化

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

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

          最后

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

          #參考資料#

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

          作者:bubblegun;公眾號:@泡槍指北

          本文由 @bubblegun 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

          題圖來自Unsplash,基于CC0協(xié)議


          主站蜘蛛池模板: 国产精品第一区揄拍| 亚洲一区二区在线视频| 无码人妻精品一区二区三区66| 韩国福利一区二区美女视频| 红桃AV一区二区三区在线无码AV| 麻豆果冻传媒2021精品传媒一区下载| 亚洲av片一区二区三区| 国产乱码精品一区二区三区香蕉| 人妻激情偷乱视频一区二区三区 | AV天堂午夜精品一区二区三区| 国产主播一区二区| 中文字幕一区二区三区永久| 无码人妻精品一区二区三区99不卡 | 美女视频在线一区二区三区| 国产精久久一区二区三区| 国产在线精品一区二区| 国产一区二区草草影院| 中文乱码人妻系列一区二区| 2021国产精品视频一区| 国产福利91精品一区二区三区| 亚洲综合一区二区| 色噜噜狠狠一区二区三区| 国产精品一区二区久久精品涩爱| 精品深夜AV无码一区二区| 亚洲高清日韩精品第一区| 亚洲国产精品一区二区久| 日韩一区二区三区四区不卡| 男人的天堂av亚洲一区2区| 无码一区二区三区中文字幕| 在线视频国产一区| 一区 二区 三区 中文字幕| 久久99精品免费一区二区| 亚洲一区二区三区偷拍女厕| 久久久精品人妻一区二区三区蜜桃 | 色狠狠一区二区三区香蕉| 精品人妻一区二区三区浪潮在线| 麻豆果冻传媒2021精品传媒一区下载 | 后入内射国产一区二区| 亚洲国产综合无码一区二区二三区| 国产免费伦精品一区二区三区| 国产日韩一区二区三区在线观看|