در این مطلب، ویدئو آموزش فلاسک شماره 9 – فایل های استاتیک (CSS سفارشی، تصاویر و جاوا اسکریپت) با زیرنویس فارسی را برای دانلود قرار داده ام. شما میتوانید با پرداخت 15 هزار تومان ، این ویدیو به علاوه تمامی فیلم های سایت را دانلود کنید.اکثر فیلم های سایت به زبان انگلیسی می باشند. این ویدئو دارای زیرنویس فارسی ترجمه شده توسط هوش مصنوعی می باشد که میتوانید نمونه ای از آن را در قسمت پایانی این مطلب مشاهده کنید.
مدت زمان فیلم: 00:10:46
تصاویر این ویدئو:
قسمتی از زیرنویس این فیلم:
00:00:00,089 –> 00:00:01,829
سلام به همه و به
2
00:00:01,829 –> 00:00:03,689
آموزش واقعاً فلش خوش آمدید، بنابراین همانطور که شما بچه ها
3
00:00:03,689 –> 00:00:05,009
ممکن است بتوانید بگویید که ما
4
00:00:05,009 –> 00:00:06,240
اینجا تازه کار را شروع می کنیم و کاری که من در واقع
5
00:00:06,240 –> 00:00:08,340
انجام خواهم داد این است که در مورد
6
00:00:08,340 –> 00:00:11,190
دارایی های ثابت یا فایل های استاتیک صحبت کنم که اکنون در فلاسک
7
00:00:11,190 –> 00:00:12,599
وجود دارد، یک روش عجیب و غریب وجود دارد. از
8
00:00:12,599 –> 00:00:14,820
نمایش تصاویر و بارگذاری در
9
00:00:14,820 –> 00:00:17,010
کلاس های CSS سفارشی خود و استفاده از
10
00:00:17,010 –> 00:00:18,779
جاوا اسکریپت سفارشی خود، بنابراین من
11
00:00:18,779 –> 00:00:20,189
امروز به سرعت آن را پوشش خواهم داد و سپس در ویدیوی بعدی
12
00:00:20,189 –> 00:00:21,900
در مورد طرح های اولیه صحبت خواهیم کرد
13
00:00:21,900 –> 00:00:23,189
، چیزی که بسیاری از شما از شما
14
00:00:23,189 –> 00:00:24,449
پرسیده اید. من در مورد اینکه چگونه میتوانیم
15
00:00:24,449 –> 00:00:26,519
واقعاً برنامه فلاسک خود را به
16
00:00:26,519 –> 00:00:28,710
چندین فایل پایتون تبدیل کنیم و به نوعی آن را تقسیم
17
00:00:28,710 –> 00:00:30,150
کنیم و کمی سازماندهیتر
18
00:00:30,150 –> 00:00:32,219
از آنچه قبلا داشتیم، انجام دهیم، بنابراین به هر حال بیایید
19
00:00:32,219 –> 00:00:33,390
جلو برویم و شروع کنیم زیرا
20
00:00:33,390 –> 00:00:34,980
من تازه شروع به کار کردم. قرار است یک
21
00:00:34,980 –> 00:00:37,050
پروژه کاملاً جدید ایجاد کنم تا شما را
22
00:00:37,050 –> 00:00:38,640
در مورد نحوه انجام این کار به
23
00:00:38,640 –> 00:00:40,140
روز
24
00:00:40,140 –> 00:00:41,760
25
00:00:41,760 –> 00:00:43,110
کند.
26
00:00:43,110 –> 00:00:45,300
برنامه flask و من تازه می روم nna
27
00:00:45,300 –> 00:00:46,890
انجام دهید و به سرعت برخی کارها را انجام دهید، بنابراین حدس میزنم
28
00:00:46,890 –> 00:00:51,030
از فلاسک import flask با
29
00:00:51,030 –> 00:00:54,480
L کوچک و الگوی زیرخط رندر وارد
30
00:00:54,480 –> 00:00:56,370
کنید، کاری که اکنون انجام میدهم این است که فقط
31
00:00:56,370 –> 00:00:58,199
یک برنامه flask کاملاً جدید ایجاد کنم که قبلاً
32
00:00:58,199 –> 00:00:59,670
میدانیم این کار را با نام زیرخط شما انجام میدهد.
33
00:00:59,670 –> 00:01:02,370
زیرخط و این فقط یک
34
00:01:02,370 –> 00:01:04,470
نوع بسیار ابتدایی از عملکرد صفحه اصلی را
35
00:01:04,470 –> 00:01:07,830
در اینجا ایجاد می کند، بنابراین root dot app این را فقط
36
00:01:07,830 –> 00:01:09,780
یک صفحه اسلش می کند، همچنین به شما نشان خواهم داد
37
00:01:09,780 –> 00:01:11,580
که ما می توانیم بیش از یک مسیر را برای
38
00:01:11,580 –> 00:01:13,350
این توابع انجام دهیم، بنابراین من این کار را انجام خواهم داد. یکی دیگر
39
00:01:13,350 –> 00:01:16,259
برای اسلش که اکنون فقط به این معنی است که این
40
00:01:16,259 –> 00:01:17,759
تابع با هر دو مسیر مختلف قابل دسترسی است،
41
00:01:17,759 –> 00:01:19,200
میخواهم بگویم
42
00:01:19,200 –> 00:01:21,360
home را تعریف کنید و سپس در اینجا فقط
43
00:01:21,360 –> 00:01:24,840
الگوی رندر را برمیگردانیم
44
00:01:24,840 –> 00:01:27,390
و فعلاً این یک نقطه خانه را HTML مینامیم.
45
00:01:27,390 –> 00:01:28,860
سپس ما کاری را با آن oky انجام خواهیم داد،
46
00:01:28,860 –> 00:01:30,150
بنابراین اکنون بیایید برنامه خود را اجرا کنیم، بنابراین اگر
47
00:01:30,150 –> 00:01:32,810
نام زیر خط مساوی است با زیرخط اصلی برابر است،
48
00:01:32,810 –> 00:01:35,490
من معتقدم که
49
00:01:35,490 –> 00:01:36,960
می گوییم این چیست؟
50
00:01:36,960 –> 00:01:42,780
51
00:01:42,780 –> 00:01:44,729
52
00:01:44,729 –> 00:01:45,960
نیاز به انجام اگر من هیچ
53
00:01:45,960 –> 00:01:47,700
اشتباهی برای فایل اصلی مرتکب نشدم، اکنون کاری که میخواهم
54
00:01:47,700 –> 00:01:49,649
انجام دهم این است که یک فایل الگو راهاندازی کنم، بنابراین
55
00:01:49,649 –> 00:01:51,390
همه فایلهای HTML خود را قرار میدهیم تا این
56
00:01:51,390 –> 00:01:52,320
کار را انجام دهیم که فقط یک پوشه جدید میسازیم
57
00:01:52,320 –> 00:01:54,509
. این یکی را قالب ها صدا
58
00:01:54,509 –> 00:01:56,310
می زنم و سپس این بار یک پوشه جدید دیگر می سازم
59
00:01:56,310 –> 00:01:57,689
و ما هنوز این پوشه را ندیده ایم.
60
00:01:57,689 –> 00:01:59,759
61
00:01:59,759 –> 00:02:01,320
اکنون این یکی را ثابت می نامم، ممکن است بتوانید بگویید
62
00:02:01,320 –> 00:02:03,360
کجا فایل های خاص را قرار می دهیم، اما
63
00:02:03,360 –> 00:02:05,189
اساساً هر فایل استاتیکی که ما داریم، به
64
00:02:05,189 –> 00:02:07,530
این معنی است که مانند یک فایل در حال تغییر نیست،
65
00:02:07,530 –> 00:02:10,500
به عنوان مثال، تصاویر CSS جاوا اسکریپت، من
66
00:02:10,500 –> 00:02:11,940
معتقدم که نوع دیگری از
67
00:02:11,940 –> 00:02:13,650
فایلهای استاتیک نیز وجود دارد که در
68
00:02:13,650 –> 00:02:15,239
دایرکتوری استاتیک قرار میگیرند و سپس همه
69
00:02:15,239 –> 00:02:17,129
فایلهای HTML ما که قرار است تبدیل شوند. رندر
70
00:02:17,129 –> 00:02:18,780
دوباره به داخل این پوشه templates می رود،
71
00:02:18,780 –> 00:02:20,790
بنابراین در داخل این پوشه templates
72
00:02:20,790 –> 00:02:22,349
یک فایل جدید ایجاد می کنم، می خواهم
73
00:02:22,349 –> 00:02:24,450
با پایه هر DML شروع کنم، همچنین تا
74
00:02:24,450 –> 00:02:26,280
زمانی که اینجا هستیم، یک فایل جدید می سازیم و آن را
75
00:02:26,280 –> 00:02:29,459
فراخوانی می کنیم. home dot HTML ما شروع به
76
00:02:29,459 –> 00:02:31,170
کدنویسی فایل HTML نقطه پایه می کنیم و سپس
77
00:02:31,170 –> 00:02:33,000
در مورد ایجاد چند فایل صحبت خواهم کرد. در
78
00:02:33,000 –> 00:02:35,430
داخل دایرکتوری استاتیک ما و اینکه چگونه می توانیم
79
00:02:35,430 –> 00:02:37,260
CSS سفارشی خود و سپس یک تصویر را وارد کنیم،
80
00:02:37,260 –> 00:02:38,819
بنابراین بیایید فقط یک
81
00:02:38,819 –> 00:02:41,129
HTML بسیار ابتدایی ایجاد کنیم، من فعلاً از قرار دادن
82
00:02:41,129 –> 00:02:42,900
موارد بوت استرپ
83
00:02:42,900 –> 00:02:44,459
خودداری می کنم، فقط به این دلیل که مدتی طول می کشد.
84
00:02:44,459 –> 00:02:45,750
نیاز به هدر دادن رابطه جنسی داریم، ما می دانیم که قبلاً این کار را انجام می دهیم،
85
00:02:45,750 –> 00:02:47,879
بنابراین در سر
86
00:02:47,879 –> 00:02:52,290
یک عنوان مانند آن ایجاد می شود و نمی دانم
87
00:02:52,290 –> 00:02:53,670
چرا همیشه این کار را انجام می دهد که براکت دیگری را اضافه می کند که
88
00:02:53,670 –> 00:02:55,379
ما بلوک را تنظیم خواهیم کرد تا ما فقط
89
00:02:55,379 –> 00:03:00,150
اگر میتوانم بهدرستی تایپ کنم، عنوان بلوک را بگو
90
00:03:00,150 –> 00:03:04,920
و سپس بلوک را به پایان برسانم، اکنون
91
00:03:04,920 –> 00:03:09,299
یک تگ بدنه را در اینجا تنظیم میکنیم تا body و
92
00:03:09,299 –> 00:03:11,370
سپس ببینیم که همیشه freakin چه کاری انجام
93
00:03:11,370 –> 00:03:13,139
میدهد که خوب است و سپس یک
94
00:03:13,139 –> 00:03:21,150
بلوک دیگر برای محتوای بلوک ۷ درصد اضافه میکنیم و سپس % %
95
00:03:21,150 –> 00:03:24,449
و بلاک مانند بسیار خوب است، بنابراین اکنون
96
00:03:24,449 –> 00:03:26,760
که ما الگوی پایه خود را داریم، پس
97
00:03:26,760 –> 00:03:28,799
بیایید این الگوی پایه را گسترش دهیم،
98
00:03:28,799 –> 00:03:30,329
درصد درصد آن در داخل
99
00:03:30,329 –> 00:03:32,790
فایل HTML اصلی ما قرار خواهد گرفت، ما قبلاً می دانیم
100
00:03:32,790 –> 00:03:35,669
چگونه HTML مبتنی بر توسعه را گسترش دهیم و
101
00:03:35,669 –> 00:03:38,129
سپس ما بلوکهای خود را در اینجا اضافه
102
00:03:38,129 –> 00:03:43,010
میکنیم k
103
00:03:43,010 –> 00:03:48,269
محتوا و سپس % درصد و مسدود کردن و
104
00:03:48,269 –> 00:03:50,069
سپس عنوان بلوک خود را اضافه میکنیم که
105
00:03:50,069 –> 00:03:51,599
حدس میزنم فقط آن را کپی میکنم و در ابتدای آن قرار میدهم تا در
106
00:03:51,599 –> 00:03:53,909
زمان ما صرفهجویی
107
00:03:53,909 –> 00:03:55,109
شود.
108
00:03:55,109 –> 00:03:56,459
این بلوکها به سرعت همان چیزی است که
109
00:03:56,459 –> 00:03:57,329
ما میخواهیم نمایش دهیم و سپس در
110
00:03:57,329 –> 00:03:58,739
واقع وارد فایلهای ثابت میشویم،
111
00:03:58,739 –> 00:04:00,269
میدانم که در اینجا کمی وقت خود را تلف کردهام،
112
00:04:00,269 –> 00:04:01,709
اما فقط باید این را برای شروع تنظیم کنیم،
113
00:04:01,709 –> 00:04:03,150
بنابراین برای عنوان ما فقط
114
00:04:03,150 –> 00:04:05,669
این صفحه اصلی را صدا بزنید و برای همیشه مسدود کنید،
115
00:04:05,669 –> 00:04:07,790
بیایید فقط یک h1 انجام دهیم و بیایید فقط
116
00:04:07,790 –> 00:04:10,109
صفحه اصلی را انجام دهیم، زیرا من فقط می خواهم چند
117
00:04:10,109 –> 00:04:11,579
سبک اولیه را برای آن اعمال کنم تا
118
00:04:11,579 –> 00:04:13,349
ببینید که چگونه این کار به خوبی کار می کند، بنابراین ما
119
00:04:13,349 –> 00:04:15,359
فایل HTML نقطه خانه خود را به نوعی درهم و برهم داریم.
120
00:04:15,359 –> 00:04:18,418
اما خوب است که ما
121
00:04:18,418 –> 00:04:20,130
فایل مبتنی بر HTML خود را داریم و اکنون کاری که می خواهم انجام دهم این
122
00:04:20,130 –> 00:04:21,510
است که به شما نشان دهم چگونه می توانیم CSS سفارشی خود را وارد کنیم،
123
00:04:21,510 –> 00:04:24,479
بنابراین برای وارد کردن CSS سفارشی خود،
124
00:04:24,479 –> 00:04:26,240
یک فایل CSS جدید
125
00:04:26,240 –> 00:04:28,729
در داخل استاتیک خود ایجاد می کنیم. دایرکتوری، پس
126
00:04:28,729 –> 00:04:30,410
این کار را انجام دهید، من فقط این استایل را
127
00:04:30,410 –> 00:04:32,300
نقطه CSS صدا می کنم، مهم نیست آن را چه می نامید
128
00:04:32,300 –> 00:04:33,800
، اما آن را بسازید. مطمئن باشید
129
00:04:33,800 –> 00:04:35,360
که نام را به خاطر دارید و اکنون به شما نشان می دهم
130
00:04:35,360 –> 00:04:37,639
که چگونه می توانیم فایل CSS را
131
00:04:37,639 –> 00:04:39,979
از داخل اینجا بارگذاری کنیم تا کاری که
132
00:04:39,979 –> 00:04:43,630
می خواهیم انجام دهیم این است که بگوییم یک پیوند rel برابر با
133
00:04:43,630 –> 00:04:46,550
شیوه نامه است.
134
00:04:46,550 –> 00:04:47,810
همچنین به سرعت، زیرا متوجه شدم که
135
00:04:47,810 –> 00:04:49,099
بسیاری از شما بچه ها HTML را می دانید، بنابراین
136
00:04:49,099 –> 00:04:50,660
احتمالاً می دانید که چگونه کار می کند و سپس
137
00:04:50,660 –> 00:04:52,759
می خواهم بگویم href برابر است و سپس
138
00:04:52,759 –> 00:04:54,020
اینجاست که کمی متفاوت می شود،
139
00:04:54,020 –> 00:04:55,729
بنابراین مطمئن شوید که به آن توجه می کنید اکنون
140
00:04:55,729 –> 00:04:58,940
در داخل نوع برنامه فلاسک
141
00:04:58,940 –> 00:05:01,340
ما، یک پیشفرض تنظیم میکند که همه
142
00:05:01,340 –> 00:05:03,590
فایلهای استاتیک ما در پوشهای به نام static ذخیره میشوند، به
143
00:05:03,590 –> 00:05:05,509
این معنی که شما در واقع
144
00:05:05,509 –> 00:05:07,490
باید این پوشه را به نام static در آن قرار دهید که
145
00:05:07,490 –> 00:05:08,870
من در اینجا نشان میدهم باید
146
00:05:08,870 –> 00:05:09,319
فراخوانی شود.
147
00:05:09,319 –> 00:05:11,330
چون کاری که ما میخواهیم انجام دهیم این است که
148
00:05:11,330 –> 00:05:14,270
URL آن فایل استاتیک را بگیریم و سپس
149
00:05:14,270 –> 00:05:16,430
به نام فایل خاص واقعی
150
00:05:16,430 –> 00:05:18,740
که میخواهیم در اینجا ارجاع دهیم، بنابراین برای
151
00:05:18,740 –> 00:05:20,870
انجام این کار، URL را زیر خط 4 میگوییم
152
00:05:20,870 –> 00:05:22,819
و سپس در اینجا قرار میدهیم.
153
00:05:22,819 –> 00:05:25,190
نام static است، بنابراین ما فقط می خواهیم استاتیک
154
00:05:25,190 –> 00:05:27,770
lik را بگوییم و ما میخواهیم بگوییم
155
00:05:27,770 –> 00:05:29,630
نام فایل برابر است، مطمئن شوید
156
00:05:29,630 –> 00:05:31,430
که نقلقولها و در اینجا نام فایل CSS خود را فراموش نکنید،
157
00:05:31,430 –> 00:05:33,680
بنابراین در این مورد، CSS را
158
00:05:33,680 –> 00:05:35,479
به شکلی که کار میکند نقطهگذاری کنید،
159
00:05:35,479 –> 00:05:37,219
ما از کد پایتون در اینجا برای
160
00:05:37,219 –> 00:05:40,070
گرفتن URL برای پوشه ایستا
161
00:05:40,070 –> 00:05:42,320
که به ما آدرس اینجا را می ده