Komentāru noformējums varētu izskatīties ļoti vienkāršs. Un tā tas ir! Bet es domāju, ka vienkāršs šajā gadījumā ir efektīvs. Komentāri ir tik svarīga CSS-Tricks sastāvdaļa. Es vēlos, lai tie būtu ļoti lasāmi un ērti.
Tagad mēs iesim uz WordPress un padarīsim šo komentāru pavedienu par realitāti. Vispirms mēs atrodam veidni, kurā mēs parādīsim komentārus. single.phpiespējams, ir vissvarīgākais (atsevišķi emuāra ieraksti). Šajā veidnē mēs atrodam, ka funkcija comments_template()ir viss, kas mums jāzvana, lai iegūtu visu komentāru apgabalu. Būtībā tas, ko šī funkcija dara, ir iegūt failu comments.phpun ievietot to tur. Tātad, mēs sākam to apskatīt.
Kods šajā failā sākas ar . Tas ir ļoti piemērots. Komentāri noteikti ir sadaļa, un tam vajadzētu būt identifikatoram. Atcerieties, ka mēs neveidojam stilus, pamatojoties uz ID, taču komentāru iesaiņošana elementā ar komentāru ID ir laba, jo:
- Jūs vienmēr varat atsaistīt saites uz komentāriem, pievienojot URL # komentārus.
- Cilvēki, kuri ienīst komentārus, tos var paslēpt lietotāja stila lapā ar uzminamu ID.
Mēs turpinām iziet cauri kodam šajā failā. Mēs izdzēšam dažas lietas, kuras esam diezgan pārliecināti, ka neizmantosim. Mēs mainām dažas lietas, lai tās atbilstu tam, ko esam izstrādājuši programmā Photoshop.
Tad mēs sastopamies ar funkciju, wp_list_comments()kas ir atbildīga par visa komentāru pavediena izspiešanu. Tad turpina izspļaut tādas lietas kā komentāru veidlapa. Visu laiku ir loģika, lai parādītu lietas dažādās situācijās, piemēram, kad komentāri ir aizvērti vai kad komentāri ir atvērti, bet tādu nav.
Mēs atrodam nedaudz dīvainu funkciju, ko saucam par cancel_comment_reply_link()kuru mēs skatāmies un redzam, ka tiek izmantota komentāru veidlapas pārvietošanas funkcija atpakaļ uz leju, ja ir noklikšķināts uz saites Atbildēt un veidlapa ir pārvietota uz augšu, bet mēs negribējām to.
Tad mēs iedziļināmies HTML, no kura mēs iegūstam wp_list_comments(). Neveicot neko, mēs iegūsim HTML no šīs funkcijas, kas ir pilnīgi saprātīga. Bet arī tas ir tas, kas tas ir, un tas nederēs visiem iespējamiem dizainiem. Personīgi es gribētu pilnībā kontrolēt uzcenojumu. Tāpēc tā vietā, lai tikai ņemtu to, ko tas mums dod, mēs to kontrolējam, izmantojot mūsu functions.phpfailā pielāgotu funkciju, kas ignorē noklusējuma marķējumu.
Tagad, kad mums ir HTML vadība, mēs varam nokļūt kaut kādā “dizaina režīmā”, kur mēs pārietam uz priekšu un atpakaļ starp CSS un HTML, veicot mūsu dizainu. Komentāri CSS, tāpat kā jebkura cita maza moduļa CSS daļa šajā projektā, tiks pārcelti uz _comments.scss failu, kuru varēsim iekļaut globālajā. Ideāls gadījums, kad ir jēga nodalīt CSS savā failā. Lai gan mums vajadzētu izmantot pēc iespējas vairāk globālo stilu. Piemēram, katrs komentārs noteikti ir a .module, galvenes stiliem šeit jābūt pilnīgi piemērotiem attiecībā uz nosaukumiem, un tipogrāfijai vispār vajadzētu būt tikai no globālajiem tipogrāfijas stiliem.
Mēs pat izmantojam mūsu režģa sistēmu komentāros, jo katrs komentārs būtībā ir divu kolonnu režģis. Citi sīkumi ir pilnīgi pielāgoti komentāriem, piemēram, kur un kā mēs izvietojam atbildes saites.
Ekrāna beigās mēs noskaidrojam, ka mūsu Photoshop dizainam ir viens liktenīgs trūkums. Ligzdoti komentāri atrodas vecāku komentārā, un ir diezgan grūti padarīt mūsu ligzdotos moduļus izskatītos tā, it kā tie būtu atsevišķi. Mums šeit varētu nākties veikt dažus kompromisus.