89 lines
3.1 KiB
HTML
89 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>گزارش دوم – کار با HTML Templates در Flask</title>
|
||
<link
|
||
rel="stylesheet"
|
||
href="{{ url_for('static', filename='style.css') }}"
|
||
/>
|
||
<script src="{{ url_for('static', filename='app.js') }}" defer></script>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<h1>My Info</h1>
|
||
<p>Mohammad Amin Mirzaee - 04121129705027</p>
|
||
|
||
<h2>
|
||
What is <code>render_template</code> & What is the role of the
|
||
<code>/templates</code> and <code>/static</code> folders?
|
||
</h2>
|
||
<ul>
|
||
{% for title, description in features %}
|
||
<li>
|
||
<strong>{{ title }}:</strong>
|
||
{{ description }}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
|
||
<div class="actions">
|
||
<button type="button" data-js="highlight">Toggle highlight</button>
|
||
<button type="button" data-js="timestamp">Update timestamp</button>
|
||
</div>
|
||
|
||
<p>
|
||
The current (UTC) time was rendered by Flask:
|
||
<strong data-js="timestamp-value">
|
||
{{ current_time.strftime("%Y-%m-%d %H:%M:%S") }}Z
|
||
</strong>
|
||
</p>
|
||
|
||
<footer>
|
||
Commands ( already in venv )
|
||
<ul>
|
||
<li><code>cd examples/html-basic</code> وارد پروژه می شویم</li>
|
||
<li>
|
||
<code>pip install -r requirements.txt</code> نصب پکیج های مورد نیاز
|
||
</li>
|
||
<li><code>python app.py</code> اجرای برنامه</li>
|
||
</ul>
|
||
<h3>Before</h3>
|
||
<img
|
||
src="{{ url_for('static', filename='img/before.png') }}"
|
||
alt="Before"
|
||
width="600"
|
||
/>
|
||
<h3>After</h3>
|
||
<img
|
||
src="{{ url_for('static', filename='img/after.png') }}"
|
||
alt="After"
|
||
width="600"
|
||
/>
|
||
<h3>Hierarchy / Tree</h3>
|
||
<img
|
||
src="{{ url_for('static', filename='img/tree.png') }}"
|
||
alt="After"
|
||
width="600"
|
||
/>
|
||
<p>
|
||
Changes in <code>index.html</code> file: I changed the text of each
|
||
elements, also added some html elements/tag like img, p, h2, h3, ...
|
||
then using <code>/static</code> folder to put my images ( screenshots
|
||
) and using them in page with url_for function to find static
|
||
folder and filename ( using flask in order to import media ) I also
|
||
use ul and li tags to list commands I used for running the
|
||
application.
|
||
</p>
|
||
<p>
|
||
تغییرات در فایل ایندکس اچ تی ام ال: من متن های هر تگی را تغییر دادم و
|
||
اضافه کردم یکسری تگ هایی مثل تگ آی ام جی، پی، تگ های اچ، .... و بعد از
|
||
پوشه استاتیک برای قرار دادن عکس ها و اسکرین شات ها با تابع مخصوص فلسک
|
||
برای پیدا کردن مسیر آن استفاده کردم در ادامه با تگ یو ال و ال آی لیستی
|
||
از فرمان های اجرای برنامه را قرار دادم
|
||
</p>
|
||
</footer>
|
||
</main>
|
||
</body>
|
||
</html>
|