Мазмун
- ExpressionEngine 2 орнотуу
- Эмне курабыз
- Каналдар менен иштөө
- Publish Forms колдонууда
- Категориялар түзүлүүдө
- Калыптарды орнотуу
Веб-дизайнер же иштеп чыгуучу катары, аяктаган долбоорлоруңузду сайттын конокторуна көрсөткөн портфолионун болушу абдан маанилүү. Ар биринде колдонулган технологияларды тизмектөө бир аз кошумча нерселерди кошот. EllisLab’s ExpressionEngine каналдары деп аталган башкарууга оңой маалымат контейнерлери аркылуу ушул сыяктуу мазмунду иштетет. Бул окуу куралы, биз аларды кандайча колдонууга болот.
ExpressionEngine 2 орнотуу
Андан ары, сизге ExpressionEngine 2. лицензияланган көчүрмөсү керек болот. Эгер көчүрмөсү жок болсо, аны ExpressionEngine веб-сайтынан сатып алсаңыз болот. EllisLab программалык камсыздоонун акысыз версиясын сунуштабайт, бирок бир нече ар кандай лицензиялар бар, анын ичинде $ 99.95 фрилансердик лицензия, бул бизнес үчүн веб катышуу мүмкүнчүлүгүн берет.
ExpressionEngine программасын өз ишинде колдонууну баштоо үчүн бир топ ресурстар менен кошо өнүмдүн веб-сайтынан орнотуу боюнча нускамаларды таба аласыз.
Эмне курабыз
Бул окуу куралы боюнча, биз ойдон чыгарылган SuperDuper Дизайн студиялары үчүн сайт түзөбүз. Сайт эки түрдөгү баракчадан турат: үй бети жана жумуш көрүү баракчалары. Башкы бетте акыркы жумуштардын жалпы серептери келтирилет.
Долбоордун ар бир сүрөтү долбоордун өз ишин көрүү барагына алып келет. Бул вебсайттын чоң скриншотун, кыскача жазуусун жана долбоордо колдонулган технологиялардын тизмесин камтыйт.
Каналдар менен иштөө
ExpressionEngine колдонуп сайттарды курганда, Каналдарга негизделген мазмунду түзөсүз. Бул SuperDuper Design Studios портфолиосунун сайтын түзүүдөгү биринчи кадам.
Бул жөн гана негизги сайт болгондуктан, биз бир гана 'Work' деген Каналды түзүшүбүз керек.
ExpressionEngine башкаруу панелинен, тандаңыз Админ жогору жагындагы баскычты, жылдырыңыз Канал Администрациясы жана танда Каналдар. Эгер сизде ExpressionEngine 2 жаңы орнотулган болсо, анда көрсөтүлгөн бир дагы каналды көрбөшүңүз керек.
Боз түстү чыкылдатыңыз Жаңы канал түзүңүз оң жактагы баскыч. Биз өзүбүздүн каалайбыз Толук канал аты болуу Жумуш. Программалык камсыздоо эми автоматтык түрдө түзүшү керек Кыска ат сиз үчүн: бул учурда, иш. Бул кичинекей тамга аты долбоордун жазуусун көрсөткөндө шаблондорубузда колдонула турган нерсе Channel Entries тэг
Under Бул канал үчүн жаңы шаблондорду түзөсүзбү? ишен Жок тандалды. Чыкылдатуу Жөнөтүү каналды түзүү.
Ушундан кийин, сизде болушу керек Жумуш каналында көрсөтүлгөн Канал Администрациясы бет. Үстүндө Каналдын администрациясы бет, тандаңыз Түзөтүүлөрдү түзөтүү. Ичинде Канал жарыялоонун артыкчылыктары бөлүмүн текшерип, URL жана электрондук почта даректерин автоматтык түрдө шилтемелерге айландырасызбы? параметр коюлган Жок. Бул жөндөө ExpressionEngine колдонуучусунун талааларында URL даректери бар гипершилтемелерди жаратууга жол бербейт.
Эми каналыбызды түзгөндөн кийин, контентти толтуруу үчүн колдонуучу талааларын түзө алабыз.
Publish Forms колдонууда
Publish Forms - бул биз ExpressionEngine-де контентти түзүү үчүн колдонобуз. Алар биз түзгөн жана Каналга берген колдонуучунун талааларынан турат.
Танда Админ баскычын дагы бир жолу жылдырыңыз Канал Администрациясы анан тандаңыз Channel Fields. Каалаган жеке талааларды түзүүдөн мурун, биз атайын талаа тобун түзүшүбүз керек. Боз түстү чыкылдатыңыз Жаңы канал талаасы тобун түзүңүз Жаңы топту түзүү үчүн жогорку оң жактагы баскыч. Биз түзгүбүз келген нерсе Жумуш канал. Кайсы талаа тобунун кайсы каналга таандык экендигин көзөмөлдөөнү жеңилдетүү үчүн, эки ысымдын аттарын бирдей кылып, топтун атын атап коюңуз Жумуш жана чыкылдатыңыз Жөнөтүү аны түзүү.
Эми биз өз тобубузду түзүп, талааларды өздөрү кошууга даярбыз. Эгер сиз бул окуу куралындагы биринчи сүрөттү карасаңыз, анда индекс барагында ал тизмектелген долбоорлордун ар биринин аталышы жана сүрөтү бар экендигин байкайсыз.Сүрөттөрдү көрсөтүү үчүн, бардык портфолио сүрөттөрүбүздү сактоо үчүн жүктөө пунктун орнотушубуз керек.
Чыкылдатуу Мазмун башкаруу панелинин жогору жагындагы баскычты басып, тандаңыз Файлдар, анда Файл жүктөө артыкчылыктары. Оң жактагы бозду чыкылдатыңыз Жаңы жүктөө багытын түзүү баскычы. Сизге төмөндө көрсөтүлгөн форма көрсөтүлүшү керек.
Анкетаны толтуруңуз, сүрөттөмө аталышы, жарактуу сервер жолу (буга чейин бар / images / uploads каталогун колдонсоңуз болот) жана URL. Сүрөттөрдү сактай турган каталог мурунтан эле бар болушу керек, андыктан алгач аны серверде түзүп алыңыз.
Биз түзүп жаткан каталог биздин портфолио сүрөттөрүбүздү гана сактай тургандыгын билебиз, ошондуктан биз орнотуп алабыз Уруксат берилген файл түрлөрү чейин Сүрөттөр гана. Дизайндарыбызга көз чаптырсак, иштин деталдары беттеринде, Сүрөттүн максималдуу кеңдиги 960 пиксел жана Сүрөттүн максималдуу бийиктиги 400 пиксель болот, андыктан аларды формага орното алабыз. Эки башка сүрөттү жүктөөнүн ордуна, бирөөсү иштин деталдары барагы үчүн (960x400) жана экинчиси (301x200) индекси үчүн, биз орното алабыз Сүрөттүн манипуляциялары.
Under Сүрөттүн манипуляциялары, индекс барагы үчүн кошумча сүрөт өлчөмүн a кошуп кошсок болот Кыска ат деп аталат үй жана орнотуу Түрүнүн өлчөмүн өзгөртүү чейин Өсүмдүк, Туурасы 301 чейин жана Бийиктик Андан 200гө чейин. Бул биздин сүрөтүбүздүн кесилген версиясын автоматтык түрдө индекс баракчасында колдонуу үчүн жаратат. + Белгиси менен кызыл баскычты басууну унутпаңыз. Муну аткаргандан кийин, чыкылдатыңыз Жөнөтүү баскычы.
Биз азыр колдонуучу талааларыбызды кошо баштоого даярбыз. Чыкылдатыңыз Админ баскычын дагы бир жолу жылдырыңыз Канал Администрациясы анан тандаңыз Channel Fields параметр. Under Channel Fields танда Жумуш биз мурун түзгөн топтун аталышы.
Чыкылдатуу Жаңы канал талаасын түзүңүз оң жагында, сиз форманы көрүшүңүз керек. Ар бир талаа үчүн бир нече орнотуулар бар. Биз чогуу ушул жолду басабыз, андан кийин сиз башкаларды өзүңүз жасайсыз.
ExpressionEngineдеги колдонуучунун талаалары ар кандай талаа түрлөрү болушу мүмкүн. Текст киргизүү талаалары жана Textareas сыяктуу жалпы талаа түрлөрү бар, бирок сизде файлдарды же сүрөттөрдү жүктөө үчүн Мамиле талаасы же Файл талаасы болот. Долбоордун имиджи үчүн биз Файл талаа түрү. Аны тизмеден тандаңыз.
The Field Label жарыяланган формада талаанын жанында пайда болгон форма белгиси. Бул ысым мүмкүн болушунча так болушун каалайбыз. Келгиле, энбелгисин колдонолу Долбоордун сүрөтү. Талаанын аталышы бул шаблондогу шаблондорубузга шилтеме берүү; ал бир сөз болушу керек, бирок астын сызып же сызыкчасын камтышы мүмкүн. Каналдын аталышы жазылган префиксти колдонуп, талааларымдын мейкиндигин жакшы көрөм. Бул кайсы талаалардын кайсы каналдарга таандык экендигин эстеп калууну жеңилдетет. Терүү work_image талаа аты үчүн.
Үчүн Талаа нускамалары, бул талаага эмне киргизүү керектигин кыскача сүрөттөп бериңиз. Ар бир долбоордун имиджи болушу керек, ошондуктан сөзсүз түрдө текшерип алыңыз Бул милдеттүү талаабы? коюлган Ооба. Биз кете алабыз Талаа дисплейи Тартип 1ге коюлган, ошондо талаа алгач көрсөтүлөт.
Under Талаа параметрлери биз орнотуп алабыз Файл түрү чейин Сүрөт анткени биз сүрөттөрдү гана жүктөй тургандыгыбызды билебиз. Андан кийин Уруксат берилген каталог мурда түзгөн каталогго.
Сиздин формаңыз төмөндөгүгө окшош болушу керек.
Бактылуу болгондон кийин, кызыл түстү чыкылдатыңыз Жөнөтүү талааны сактоо үчүн баскыч.
Бул биринчи канал талаасы гана. Андан кийин, биз камтышыбыз керек болгон калган мазмун үчүн талааларды түзүшүбүз керек. (ExpressionEngine автоматтык түрдө аталышы үчүн талаа түзөт, андыктан биз ал жөнүндө ойлонбошубуз керек.) Төмөндө биз түзүшүбүз керек болгон калган талаалар келтирилген.
• Долбоордун URL дареги
Түрү: Текст киргизүү
Field Label: Долбоордун URL дареги
Кыска ат: work_url
Бул милдеттүү талаабы? Жок
Бул талаа үчүн демейки текстти форматтоо: Жок
• Долбоордун сүрөттөлүшү
Талаа түрү: Textarea
Field Label: Долбоордун сүрөттөлүшү
Кыска ат: work_desc
Бул милдеттүү талаабы? Ооба
Бул талаа үчүн демейки текстти форматтоо: Жок
Канал талаасы тобун колдонуу үчүн, аны Каналга берүү керек. Баруу Админ баскычын, жылдырыңыз Канал Администрациясы жана танда Каналдар. Work каналынын жанынан чыкылдатыңыз Топтук тапшырмаларды түзөтүү. Үчүн Field Group тандоо, тандоо Жумуш анан чыкылдатыңыз Жаңыртуу тапшырманы орундатуу. Эми, эгер сиз Мазмун баскычын, жылдырыңыз Жарыялоо жана танда Жумуш биздин Work каналыбыз үчүн жарыялоо формасын көрө алышыңыз керек.
Категориялар түзүлүүдө
Эми биз бардык Канал талааларыбызды түзүп бүткөндөн кийин, биз өз категорияларыбызды түзүүгө даярбыз, аларды долбоордо колдонгон технологияларды тизмектешибиз керек болот.
Танда Админ баскычын, үстүнө жылдырыңыз Канал Администрациясы опциясын жана андан кийин тандаңыз Категориялар. Сизге категориялары жок баракча сунушталууга тийиш. Айрым категорияларды түзүү үчүн, боз түстү тандаңыз Жаңы категориялар тобун түзүү оң жактагы баскыч. Формада категориянын атын терип, андан кийин кызылды чыкылдатыңыз Жөнөтүү баскычы. Мен өз категорияларыма чалууну туура көрдүм Portfolio Technologies.
Эми биз категориялар тобун түзүп, технологиялардын ар бири үчүн айрым категорияларды түзө алабыз. Тандоо Категорияларды кошуу / түзөтүү, андан кийин боз Жаңы категория түзүңүз баскычы.
Ичинде Жаңы категория түзүңүз формасын түзүп, сиз каалаган технология категорияларынын ар бир деталын толтуруңуз жана кызылды чыкылдатыңыз Жөнөтүү баскычы. Бул мисал үчүн ата-энелер категорияларын кошуунун кажети жок. Төмөнкүлөрдүн ар бири үчүн жаңы категория түздүм.
- HTML5
- CSS3
- jQuery
- АЗ
- PHP
Категория тобун колдонуу үчүн аны Каналга берүү керек. Баруу Админ баскычын, жылдырыңыз Канал Администрациясы жана танда Каналдар. Work каналынын жанынан чыкылдатыңыз Топтук тапшырмаларды түзөтүү. Үчүн Category Group тандоо, тандоо Project Technologies анан чыкылдатыңыз Жаңыртуу тапшырманы орундатуу. Эми, эгер сиз Мазмун баскычын, жылдырыңыз Жарыялоо жана танда Жумуш, Жумуш каналына жарыялоо формасын көрө алышыңыз керек. Эгер сиз чыкылдасаңыз Категориялар өтмөктө, сиз жаңы эле түзгөн категориялардын бардыгын көрүшүңүз керек.
Жарыялоо формасын колдонуп, Категориялар өтмөгүнүн астында ар бири үчүн тандалган ар кандай технологиялар менен сайтыңызга үч Жумуш жазуусун кошуңуз. Биз шаблондор боюнча иштей баштаганда кийинки бөлүктө бул жазуулар керек болот.
Калыптарды орнотуу
Кандайдыр бир мазмунду көрсөтүүнү баштоодон мурун, алгач Калыптарды түзүшүбүз керек. Чыкылдатуу Дизайн экрандын жогору жагындагы баскыч жана астында Templates, тандаңыз Template Manager.
Чыкылдатуу Жаңы топ жаңысын түзүү үчүн баскыч Template Group. Биздин аталыштагы жыйынга ылайык, биз аны атайбыз Жумуш. Калган форманы ошол бойдон калтырыңыз да, андан кийин чыкылдатыңыз Жөнөтүү топту түзүү. Сиз топтун тандалганын жана "индекс" деп аталган шаблонду көрүшүңүз керек. ExpressionEngine автоматтык түрдө ар бир шаблон тобу үчүн индекс шаблонун түзөт. Бул колдонмодо колдонулбай турган болсо дагы, шаблон талап кылынат жана аны жок кылуу мүмкүн эмес.
Биз ошондой эле Template Group деп аталат Сайт. Бул топту түзүүдө индекстин шаблонун сайттын башкы бетине айлантуу вариантын текшергенибизге ишенебиз. Эми сизде эки шаблон тобу болушу керек: Жумуш жана Сайт. Work деп аталган бир шаблонду түзүшүбүз керек көрүү. Бул шаблон ExpressionEngine долбоордун жеке баракчаларын көрсөтүү үчүн колдонот. Сайттар тобундагы индекс шаблону биздин башкы баракчабыз болот.
Орнотуу процесси аяктагандан кийин, биз сайтыбызды жашоого даярбыз. Баштоо үчүн, сизде статикалык шаблондор болушу керек (index.html жана view.html) колуңуздагы ушул макала үчүн. Аларды статикалык файлдар каталогундагы ушул окуу куралы үчүн Активдерди жүктөөдөн таба аласыз. Ошол эле каталогдон папканы таба аласыз css. Муну серверге жүктөгөнүңүздү текшериңиз.
Баштапкы баракчадан баштайлы. Мазмунун көчүрүү index.html Сайттын тобундагы индекс шаблонуна. Веб браузериңизге Сайттын башкы бетин жүктөп, статикалык шаблонду көрүшүңүз керек. Долбоорлордун тизмеси менен баштайбыз. Биринчисин табыңыз div класс менен "workItem". Биз оромокчубуз канал: жазуулар бул див тегерегинде тег жуп.
Эгерде сиз статикалык HTMLди карасаңыз, анда биринчи жана акыркы нерсенин классы бар экендигин байкайсыз "алгачкы" жана "акыркы". Үч нерсе бирдей аралыкта туура көрсөтүлөт. Тизме элементтерин белгилөөнүн бир гана нускасын биздин шаблондо колдонобуз, анткени ExpressionEngine биздин бардык жазууларды карап чыгып, ичиндеги бардык нерселерди басып чыгарат канал: жазуулар ар бир нерсе үчүн бирка. Класты биринчи жана акыркы нерсеге кошуу үчүн, биздин каналдын ичинде которгуч болушу керек: жазуулар теги.
Биздин код төмөнкүдөй болот:
h2> Акыркы жумуш / h2> div id = "recentWork"> {exp: channel: entries channel = "work"} div first || last "}"> a href = "{title_permalink = 'work / view'}"> {work_image: home wrap = "image"} / a> a href = "{title_permalink = 'work / view'}"> h3> {title} / h3> / a> / div> {/ exp: channel: entries} / div>
Индекс барагы бүткөндөн кийин (төмөндөгү натыйжаны көрө аласыз) биз эми Жумуш шаблону тобубузда жайгашкан Work view шаблонуна өтсөк болот. Ачуу view.html статикалык файлдар каталогунан жана мазмунун ExpressionEngine'деги көрүү шаблонуна көчүрүңүз.
Көрүнүш шаблонго биз бир гана кодду кошуп, үй баракчасындагы тизмеден чыкылдаткан портфолио жазуусун көрсөтүшүбүз керек. ExpressionEngine URLге негизделген жазууну көрсөтөт.
Биздин код төмөнкүдөй болот:
{exp: channel: entries channel = "work" limit = "1"} div> h2> {title} / h2> {work_image wrap = "image"} div> p> {work_desc} / p> / div> div> div id = "Categories"> h3> Жумуш болгонбу? / h3> ul> li> HTML5 / li> li> CSS3 / li> li> JQuery / li> li> Photoshop / li> / ul> / div> / div > / div> {/ exp: канал: жазуулар}
Эгерде сиз сайттын башкы барагынан бир долбоорду чыкылдатып койсоңуз, анда ал ошол долбоордун көрүү барагын жүктөшү керек.
Бизде дагы бир нерсе бар, ал категорияларды динамикалуу кылуу. Бул биз жазган коддун калган бөлүгү сыяктуу оңойго турбашы мүмкүн, анткени бизге керектүү нерсени так бериш үчүн эки тегди бириктиришибиз керек. Келгиле, эки тегдин ар бири эмне кыларын карап көрөлү.
Ичинде канал: жазуулар тэг, биз камтылган колдоно аласыз категориялар биз долбоор менен байланыштырган категориялардын аттарын көрсөтүү үчүн белгилөө, бирок бул бизге каалаган нерсени текст катары гана берет, бул категорияларды стилдештирүүгө келгенде биздин жашообузду оорлотот.
Бул үчүн код мындай:
{Categories} {category_name} {/ Categories}
Бирок, бизде дагы бир тег бар, ал бизге категорияларды CSSти колдонуп стилдештирүү оңой ирээтсиз тизме катары сунуштайт. Мунун бирден-бир көйгөйү - бул биз долбоор үчүн тандап алган категорияларды эле эмес, ар бир категорияны көрсөтөт.
Бул үчүн код мындай:
{exp: channel: Categories style = "nested"} {category_name} {/ exp: channel: Categories}
Бизге керек болгон нерсе - бул экөөнүн айкалышы. Эгерде сиз документ катары карасаңыз, анда {exp: канал: категориялар} бар көрсөтүү категория идентификаторлорунун (и | и менен ажыратылган идентификаторлордун) түтүк саптарын кабыл алган параметр. Муну жумуш көрүнүшү барагына киргизгенде, акыркы код мындай болушу керек:
{exp: channel: entries channel = "work" limit = "1"} div> h2> {title} / h2> {work_image wrap = "image"} div> p> {work_desc} / p> / div> div> div id = "Categories"> h3> Жумуш тартылдыбы? / h3> {exp: channel: Categories style = "nested" show = "{Categories} {category_id} | {/ Categories}"} {category_name} {/ exp: канал: категориялар} / div> / div> / div> {/ exp: канал: жазуулар}
Сиздин портфолио сайтыңыз эми толук болушу керек. Эмне үчүн ага баракчаларды кошуп, ExpressionEngine сунуш кылган башка мүмкүнчүлүктөрдү колдонууга болбойт, мисалы, байланыш барагы үчүн байланыш формасы?
