HTML- ի ներածություն
Կարո՞ղ եք հարցնել, թե ի՞նչ ձևանմուշ է:
Կաղապարը ֆայլ է, որը մենք կարող ենք կրկին օգտագործել `տարբեր տեղեկատվություն կայուն ձևաչափով ներկայացնելու համար. Օրինակ, դուք կարող եք օգտագործել ձևանմուշ, որը կօգնի ձեզ նամակ գրել, քանի որ չնայած յուրաքանչյուր նամակ կարող է պարունակել տարբեր հաղորդագրություն և հասցեագրված լինել այլ անձի: , նրանք կկիսվեն նույն ձևաչափով:
Django ձևանմուշի ձևաչափը նկարագրված է HTML կոչվող լեզվով (դա HTML- ն է, որը մենք նշել ենք առաջին գլխում ՝ ** How the Internet works (Ինչպես է աշխատում ինտերնետը) **):
Ի՞նչ է HTML- ը:
HTML- ը ծածկագիր է, որը մեկնաբանվում է ձեր վեբ զննարկչի կողմից, ինչպիսիք են Chrome- ը, Firefox- ը կամ Safari- ն `օգտագործողի համար վեբ էջ ցուցադրելու համար:
HTML- ը նշանակում է «HyperText Markup Language»: ** HyperText ** նշանակում է, որ դա տեքստի տեսակ է, որն աջակցում է էջերի միջև հիպերհղումները: ** Markup (Նշում) ** նշանակում է, որ մենք վերցրել ենք մի փաստաթուղթ և նշել այն կոդով, որպեսզի ինչ-որ բան ասենք (այս դեպքում ՝ զննարկիչ), թե ինչպես մեկնաբանել էջը: HTML կոդը կառուցված է ** tags (պիտակներով) **, յուրաքանչյուրը սկսվում է <
- ով և ավարտվում >
- ով: Այս tag-ները (պիտակները) ներկայացնում են markup (մակնշման) ** element-ներ(տարրեր) **:
Ձեր առաջին template-ը (ձևանմուշը):
Կաղապար ստեղծել նշանակում է ձևանմուշի ֆայլ ստեղծել: Ամեն ինչ ֆայլ է, չէ՞: Դուք հավանաբար դա արդեն նկատել եք:
Ձևանմուշները պահվում են blog/templates/blog
գրացուցակում: Այսպիսով, նախ ստեղծեք template-ներ (կաղապարներ)
կոչվող գրացուցակ ձեր բլոգի գրացուցակի ներսում: Դրանից հետո ստեղծեք մեկ այլ գրացուցակ, որը կոչվում է blog
ձեր ձևանմուշների գրացուցակում.
(Կարող եք զարմանալ, թե ինչու են մեզ հարկավոր երկու գրացուցակներ, որոնք կոչվում են blog
, ինչպես կիմանաք ավելի ուշ, սա անվանակոչման օգտակար պայմանագիր է, որը կյանքն ավելի է հեշտացնում, երբ ամեն ինչ սկսում է բարդանալ:
Եվ հիմա ստեղծեք post_list.html
ֆայլ (պարզապես թողեք այն դատարկ) առայժմ blog/templates/blog
գրացուցակի ներսում:
Տեսեք, թե ինչպես է ձեր կայքը այժմ նայում. Http://127.0.0.1:8000/
Եթե դեռ սխալ ունեք
TemplateDoesNotExist
- ը, փորձեք վերագործարկել ձեր սերվերը: Անցեք հրամանի տող, դադարեցրեք սերվերը ՝ Ctrl + C (Control և C ստեղները միասին) սեղմելով և այն նորից սկսեք ՝ գործարկելովpython manage.py runserver
command-ը (հրամանը):
Այլևս ոչ մի սխալ: Շնորհավորում եմ :) Այնուամենայնիվ, ձեր կայքը իրականում ոչինչ չի հրապարակում, բացի դատարկ էջից, քանի որ ձեր ձևանմուշն էլ է դատարկ: Մենք պետք է դա շտկենք:
Բացեք նոր ֆայլը ծածկագրի խմբագրում և ավելացրեք հետևյալը.
Այսպիսով, ինչպես է ձեր կայքը այժմ նայում: Այցելեք այն ՝ պարզելու համար ՝ http://127.0.0.1:8000/
Դա աշխատեց. Հաճելի աշխատանք այնտեղ: :)
<! DOCTYPE html >
տողը HTML պիտակ չէ: Այն հայտարարում է միայն փաստաթղթի տեսակը: Այստեղ այն զննարկչին տեղեկացնում է, որ փաստաթղթի տեսակը HTML5 է: Սա միշտ էլ ցանկացած HTML5 ֆայլի սկիզբ է:Ամենահիմնական թեգը ՝
<html>
, միշտ html բովանդակության սկիզբն է, և</html>
միշտ վերջը: Ինչպես տեսնում եք, կայքի ամբողջ բովանդակությունը անցնում է<html>
սկզբի և եզրափակիչ թեգի միջև</html>
<p>
պիտակ է պարբերության տարրերի համար;</p>
փակվում է յուրաքանչյուր պարբերություն
Գլուխը և մարմինը
Յուրաքանչյուր HTML էջ բաժանվում է նաև երկու element-երի ** head ** և ** body **
** head-ը ** էլեմենտ է, որը պարունակում է տեղեկություններ էկրանին չներկայացվող փաստաթղթի մասին:
** body-ին ** էլեմենտ է, որը պարունակում է այն ամենը, ինչ ցուցադրվում է որպես վեբ էջի մաս:
Մենք օգտագործում ենք <head>
՝ զննարկիչին էջի կազմաձևման մասին պատմելու համար, և <body>
՝ պատմելու համար, թե իրականում որն է էջում:
Օրինակ, <head>
- ի ներսում կարող եք տեղադրել վեբ էջի վերնագրի էլեմենտ, ինչպես հետևյալը.
Պահեք (save) ֆայլը և թարմացրեք ձեր էջը:
Նկատեք, թե զննարկիչը ինչպե՞ս է հասկացել, որ "Ola's blog"( «Օլայի բլոգը») ձեր էջի վերնագիրն է: Այն մեկնաբանել է <title> Օla's blog </title>
և տեքստը դրել ձեր զննարկչի վերնագրի տողում (այն կօգտագործվի նաև էջանիշների համար և այլն):
Հավանաբար, դուք նաև նկատել եք, որ յուրաքանչյուր բացող պիտակ համընկնում է * closing tag (փակող պիտակ) * - ի հետ, /
- ով, և որ էլեմենտ * nested (տեղադրված են) * (այսինքն ՝ կարող եք փակեք որոշակի tag (պիտակ), մինչև որ փակվեն բոլոր ներսում գտնվողները):
Դա նման է իրերը տուփերի մեջ դնելուն: Դուք ունեք մեկ մեծ տուփ ՝ <html> </html>
; դրա ներսում կա <body> </body>
, և դա պարունակում է դեռ ավելի փոքր տուփեր. <p> </p>
Դուք պետք է պահպանեք պիտակների* closing (փակման) * և * nesting(բնադրման)* տարրերի այս կանոնները. Եթե դա չես անում, զննարկիչը չի կարողանա դրանք ճիշտ մեկնաբանել, և ձեր էջը կցուցադրվի սխալ
Անհատականացրեք ձեր ձևանմուշը
Այժմ կարող եք մի փոքր զվարճանալ և փորձել հարմարեցնել ձեր ձևանմուշը: Ահա դրա համար մի քանի օգտակար tags (պիտակ):
<h1> A heading (Վերնագիր) </h1>
ձեր ամենակարևոր վերնագրի համար<h2> sub-heading (ենթավերնագիր) </h2>
Հաջորդ մակարդակի վերնագրի համարՆույնիսկ ավելի փոքր
<h3> Ենթավերնագիր </h3>
… և այլն, մինչև<h6>
`
Տեքստի մի պարբերություն
` * ` տեքստը ` ընդգծում է ձեր տեքստը * ` տեքստը ` խիստ ընդգծում է ձեր տեքստը * ` ` անցնում է մեկ այլ տողի (br- ի ներսում ոչինչ չես դնի, և փակիչ պիտակ չկա) * ` link-ը (հղումը) ` ստեղծում է link-ը (հղումը) * `
առաջին նյութը
երկրորդ կետը
` կազմում է ցուցակ, ինչպես այս մեկը: * `` սահմանում է էջի մի հատված * `` սահմանում է նավիգացիոն հղումների շարք * `` սահմանում է անկախ, ինքնամփոփ բովանդակություն * `` փաստաթղթում բաժին է սահմանում * `` նշանակում է փաստաթղթի կամ բաժնի վերնագիր * `` սահմանում է փաստաթղթի հիմնական բովանդակությունը * `` defines some content aside from the content it is placed in (like a sidebar) * `` սահմանում է փաստաթղթի կամ բաժնի տողատակ * ` ` սահմանում է որոշակի ժամանակ (կամ տվյալների ժամանակը)
Ահա ամբողջական ձևանմուշի օրինակ, պատճենեք և տեղադրեք այն blog/templates/blog/post_list.html
:
Մենք այստեղ ստեղծել ենք մեկ header (վերնագիր)
և երկու artcicle (հոդված)
բաժիններ:
header (վերնագիր)
տարրը պարունակում է մեր բլոգի վերնագիրը. Դա վերնագիր է և linkarticle-ի (հոդվածի)
երկու տարրերը պարունակում են մեր բլոգի հաղորդագրությունները հրապարակված ամսաթվովժամանակ
տարրում,h2
տարրըգրառման վերնագրով, որը սեղմված է և
p(paragraph/ պարբերություն) տարր
մեր բլոգի գրառման տեքստի համար:
Դա մեզ տալիս է այս էֆեկտը.
Սա շատ լավ է! Բայց մինչ այժմ մեր ձևանմուշը ցուցադրում է միայն ** նույն տեղեկատվությունը ** մինչդեռ ավելի վաղ մենք խոսում էինք ձևանմուշների մասին, որոնք թույլ էին տալիս մեզ ** տարբեր ** տեղեկատվություն ցուցադրել ** նույն ձևաչափով **
Այն, ինչ մենք իսկապես ուզում ենք անել, մեր Django ադմինիստրատորի մեջ ավելացված իրական հաղորդագրությունների ցուցադրումն է, և ահա թե ուր ենք գնալու:
Եվս մեկ բան. Տեղակայել:
Լավ կլիներ այս ամենը տեսնել և ապրել ինտերնետում, այնպես չէ՞: Եկեք կատարենք մեկ այլ PythonAnywhere տեղակայում.
Commit (Պարտավորվել) և push (ուղարկել) ձեր կոդը դեպի GitHub
Նախ և առաջ, եկեք տեսնենք, թե ինչ ֆայլեր են փոխվել վերջին անգամ տեղակայելուց հետո (գործադրեք այս հրամանները տեղական, այլ ոչ թե PythonAnywhere- ում).
Համոզվեք, որ գտնվում եք djangogirls
գրացուցակում, և եկեք ասենք, որ git
ներառի այս փոփոխությունների բոլոր փոփոխությունները.
Բոլոր ֆայլերը վերբեռնելուց առաջ եկեք ստուգենք, թե ինչ է վերբեռնելու համար git
(բոլոր ֆայլերը, որոնք կբեռնեն git
, այժմ պետք է հայտնվեն կանաչ գույնով).
Մենք համարյա այնտեղ ենք, հիմա ժամանակն է ասել, որ փրկի իր պատմության այս փոփոխությունը: Մենք դրան տալու ենք "commit message" («պարտավորության հաղորդագրություն»), որտեղ նկարագրում ենք, թե ինչ ենք փոխել: Այս փուլում կարող եք մուտքագրել այն ամենը, ինչ կցանկանաք, բայց օգտակար է նկարագրական ինչ-որ բան մուտքագրել, որպեսզի հետագայում կարողանաք հիշել ձեր արածը:
** Նշում ** Համոզվեք, որ կրկնակի գնանշումներ եք օգտագործում կատարած հաղորդագրության շուրջ:
Դա անելուց հետո մենք մեր փոփոխությունները վերբեռնում ենք (մղում) մինչև GitHub:
Քաշեք ձեր նոր կոդը PythonAnywhere վայր և ներքաշեք ձեր վեբ ծրագիրը
Բացեք PythonAnywhere console page(վահանակների էջը) և անցեք ձեր ** Bash console (Բաշ կոնսոլ) ** (կամ սկսեք նորը): Հետո run (սկի).
Դուք պետք է փոխարինեք <your-pythonanywhere-domain>
ձեր իրական PythonAnywhere ենթադոմեյն անունով ՝ առանց անկյունային փակագծերի ( < > ): Ձեր ենթատիրույթի անունը սովորաբար ձեր PythonAnywhere օգտագործողի անունն է, բայց որոշ դեպքերում այն կարող է մի փոքր այլ լինել (օրինակ, եթե ձեր օգտագործողի անունը մեծատառեր է պարունակում): Այսպիսով, եթե այս հրամանը չի գործում, օգտագործեք ls
list files(ցուցակի ֆայլեր) հրամանը ՝ գտնելու ձեր իրական ենթադոմեյնը / թղթապանակի անունը, ապա cd
այնտեղ:
Այժմ դիտեք ձեր կոդի ներբեռնումը: Եթե ուզում եք ստուգել, թե արդյոք այն տեղ է հասել, կարող եք անցնել ** "Files" («Ֆայլեր») էջը ** և ձեր կոդը դիտել PythonAnywhere- ում (վահանակի էջի ընտրացանկի կոճակից կարող եք հասնել PythonAnywhere- ի այլ էջերի):
Վերջապես, անցեք "Web" («Վեբ») էջ և սեղմեք ** Reload (Վերաբեռնում) ** ձեր վեբ հավելվածում:
Ձեր թարմացումը պետք է ուղիղ եթերում լինի: Գնացեք և թարմացրեք ձեր կայքը զննարկչում: Փոփոխությունները պետք է տեսանելի լինեն: :)
Last updated