فایل های استاتیک

نماها و الگوهای احراز هویت کار می کنند، اما در حال حاضر بسیار ساده به نظر می رسند. مقداری CSS را می‌توان برای افزودن سبک به طرح‌بندی HTML که ساخته‌اید اضافه کرد. سبک تغییر نمی کند، بنابراین به جای یک الگو، یک فایل استاتیک است.

فلاسک به طور خودکار یک نمای static را اضافه می کند که مسیری را نسبت به دایرکتوری flaskr/static می گیرد و آن را ارائه می کند. الگوی base.html قبلاً پیوندی به فایل style.css دارد:

{{ url_for('static', filename='style.css') }}

علاوه بر CSS، انواع دیگری از فایل‌های ثابت ممکن است فایل‌هایی با توابع جاوا اسکریپت یا یک تصویر لوگو باشند. همه آنها در فهرست flaskr/static قرار می گیرند و با url_for('static', filename='...') ارجاع داده می شوند.

این آموزش بر نحوه نوشتن CSS متمرکز نیست، بنابراین می‌توانید موارد زیر را در فایل flaskr/static/style.css کپی کنید:

flaskr/static/style.css

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

می‌توانید یک نسخه کم حجم از style.css را در نمونه کد بیابید.

به http://127.0.0.1:5000/auth/login بروید و صفحه باید مانند تصویر زیر باشد.

می‌توانید اطلاعات بیشتری درباره CSS را از مستندات موزیلا بخوانید. اگر یک فایل استاتیک را تغییر دادید، صفحه مرورگر را بازخوانی کنید. اگر تغییرات جدید نشان داده نشد، سعی کنید کش مرورگر خود را پاک کنید.

با طرح بلاگ ادامه دهید.