整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
面是一个简单的Flask框架实战教程，用于指导如何搭建一个基本的个人博客系统。这个教程会覆盖一些基本的步骤和概念，包括安装Flask、创建项目结构、添加路由和模板等。
首先确保你的环境中已经安装了Python。然后在命令行中执行以下命令来安装Flask：
Bash深色版本
1pip install flask创建一个新的文件夹来存放你的博客项目，并在其中创建一个app.py文件：
Bash深色版本
1mkdir my_blog
2cd my_blog
3touch app.py打开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，所以这是为什么我会翻译本文的原因，它真的超简单！）
如果你还没有个人网站，先简单地创建一个 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。
开始往 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 文件后，你现在只用做最后一件事。
经过上面 2 个步骤，你可能认为暗黑模式已经实现，但其实不是。来问自己一个问题：如果我的网站有多个页面要咋整？如何在每个页面启用黑暗模式而不是默认的白色背景？答案比你想的要简单得多。在每个页面的初始 body tag 中添加：
onload="onload()"就这么简单，希望它对你有用，谢谢阅读本文^^
最后，欢迎优秀的你加入 HelloGitHub 的「译文亦舞」系列，让你的才华舞动起来！把优秀的文章分享给更多的人。要求：
色模式最近风头正热，大家都用上了吗？本文作者从产品经理的角度出发，对人们为什么喜欢深色模式、深色模式适配现状以及深色模式的搭配思路进行了分析，与大家分享。
在 Android Q 之后，苹果也在 iOS13 支持了深色模式，深色模式成了2019下半年的热门话题，不少产品已经完成了对深色模式的适配，淘宝、微信也先后开始内测，「变黑」似乎已经成为趋势。
而在适配深色模式之前，设计师需要深入了解它的特性，衡量适配深色模式带来的价值，以及规划合适的策略，避免陷入「为黑而黑」的泥潭。
影片放映时会关掉所有灯光，只有屏幕亮起吸引观众的注意力，同样的原理下，当产品界面是深色背景时，页面元素优先级更清晰，用户更容易注意到关键内容。而且相比浅色为主的界面，深色界面对眼睛的视觉压力更小。
注：至于它的「护眼」作用还尚未明确，长时间盯着屏幕造成的视觉疲劳依然不可避免。
看了太久千篇一律的「白底黑字」，深色模式让用户多了一种选择。人人喜欢新鲜的样式，哪怕只是短暂的热情尝试，都会增加用户对产品的新鲜感，并且不可否认的是，黑色更容易让人感觉到酷炫新鲜。
OLED 屏幕中每个像素都是自主发光，在显示深色元素时，消耗的电量更少，而在显示纯黑色时，像素点可以彻底关闭。打个不完全严谨的比方，手机屏幕就像是排列了几万个小灯泡的大灯板，OLED 屏幕显示黑色时会真的把那块区域的灯泡关掉，自然会省电。
很多产品已经存在夜间模式，开启夜间模式后界面同样会转向暗色，而突然被讨论的「深色模式」和「夜间模式」有什么区别？
对于用户而言显然没有必要分清楚夜间模式和深色模式的差别，在外观上，它们真的很像。但是以设计师的角度来说，只有真正区分它们之间的差别和应用场景，才能提供给用户一套逻辑清晰的选择方案，让用户更方便快捷的选择自己想要的模式。
开启夜间模式前后对比
浅色/深色模式下的界面对比
通过这两张对比图，可以明显的感觉到夜间模式与深色模式下，界面元素的对比、层级表现都有所区别。夜间模式的设计目的，是让用户在夜间使用手机时，屏幕显示更柔和，调整色温、降低饱和度，而在白天开启夜间模式很难看清显示内容，并不适合在白天使用。
显然，深色模式不是夜间模式，用户可以在任何时间任何环境下使用它，需要维持和浅色模式同样的产品特性，可以和设备的夜览模式同时开启。
用户将系统主题设置为深色后，自然就会期望所有的 app 都变成深色，深色模式逐渐会成为产品标配的功能。已经有越来越多的产品用各种方式对系统的深色模式进行适配。主要分为以下三种类型：
如果用户的手机系统不支持深色模式，产品不会切换到深色模式。
代表产品有 微信读书、豆瓣、懒饭、Instagram、爱奇艺
2. 原有夜间模式与深色模式进行捆绑，让用户自行选择是否配合系统主题切换
在不支持深色主题的系统内用户可以通过开启夜间模式，使产品主题变为深色。严格来说，这并不是真正的深色模式，而出于不同的决策模型，产品团队会做出最适合自己的选择。
代表产品：QQ、Twitter
代表产品：微信 淘宝
iOS & Android 两套设计语言的 Dark Mode 策略除了在基础色彩体系的数值有些差距外，更明显的是在 Accent color 的不同处理方式。Android Q 则强调保障清晰观看体验的前提下，要具备更多的灵活性，比如在原色彩上面加 40% 的白色透明遮罩，以增强在深色背景上的清晰对比度，缺点可能会让原色彩在感官上发生较大的偏差。
——引自：钉钉 Dark Mode 设计
在 iOS 设计语言规范下，产品支持深色模式就必须管理两套完整的颜色方案，确保它们之间始终保持同步，这就要求设计团队以更系统的方式来管理颜色体系。为此，苹果引入了“语义化颜色”的概念。
注：语义化颜色是通过「用途」来对元素进行定义描述，而不是具体的色值。「用途」定义下的颜色是动态性，脱离于具体的表现样式而独立存在。比如，“背景色”，在深色模式中指代黑色，而在浅色模式中指代白色，这样就可以让颜色灵活的适应浅色与深色模式切换。
具体应用方法已有很多资料分享，本文不做扩展。
Android 适配方案简单粗暴，对于颜色可参考梯梯度渐变模型规律配色，页面背景根据层级叠加不同透明度的白色即可。但是完全执行就容易导致产品在深色模式下产生风格偏移，出现不符合品牌设计语言的情况。
在iOS 适配策略的基础上，淘宝团队在分享中提出了「智能语义化」方案，使适配成本大幅降低。方案思路是：设计师根据不同UI元素的特性先期制定颜色语义化规则，技术在框架层面通过“颜色自动反转”技术实现颜色反转。
然而除去基本颜色，大量的图标、插图，动效等等需要一一调整兼容，完美适配深色模式需要多方配合持续维护，而后期的功能开发也需要同时兼顾两种模式，对于自定义元素较多、业务组成复杂的 APP适配难度可想而知。
看完本文后，你可以了解深色模式受到追捧的原因，区分深色模式与夜间模式的不同，了解到适配深色模式的多种策略和面临的挑战，深入思考，当前产品是否真的需要适配深色模式。最后，希望能够帮你找到真正适合自己产品的适配策略。
作者：bubblegun；公众号：@泡枪指北
本文由 @bubblegun 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
