Bekerja semula CSS Almanac-tutorial css-php.cn

Re-Working the CSS Almanac

CSS-Tricks Almanac mempunyai rupa baru!

Saya percaya anda sudah biasa dengan sebahagian besar CSS -Tricks - Almanac (Buku Tahunan). Di sini kami menerbitkan dokumentasi rujukan untuk pemilih dan sifat CSS. Kami hanya menerbitkan ini sejak zaman purba ... atau sekurang -kurangnya sejak tahun 2009 (apabila kebanyakan kerja asal selesai). Di zaman laman web, itu adalah hampir permulaan masa. Kami juga boleh memanggilnya tahun pertama sebelum Reka Bentuk Responsif (BR), atau tahun ke -14 selepas Reka Bentuk Responsif (AR).

Anda tidak perlu saya memberitahu anda bahawa menulis CSS hari ini pada tahun ke -14 selepas reka bentuk responsif sangat berbeza dari sebelumnya. Ringkasnya, Almanak tidak bersaing dengan kadar CSS, yang lebih banyak daripada sifat dan pemilih. Sebenarnya, kami enggan mengubah suai Almanak kerana bagaimana ia dikonfigurasikan di backend, dan saya pasti saya melihat hantu atau dua di sana ketika saya menyentuhnya.

Sekarang akses ke Almanac, anda akan menemui pelbagai maklumat CSS yang lebih luas, termasuk bahagian khusus pemilih, fungsi dan @ peraturan pseudo-kelas sebagai tambahan kepada sifat dan bahagian pemilih yang sedia ada. Kami masih mempunyai banyak kerja yang perlu dilakukan (anda harus membantu!), Tetapi seni bina sudah wujud dan ada ruang untuk berkembang jika diperlukan.

Pekerjaan ini tidak mudah dan menakutkan seperti yang saya fikirkan. Izinkan saya membawa anda melalui beberapa perkara yang saya lakukan.

status semasa

Kami dengan bangga menjalankan WordPress sejak hari pertama. Terdapat banyak manfaat untuk ini, terutamanya apabila ia datang kepada templat. Ia mungkin bukan kegemaran semua orang, tetapi saya sangat berpuas hati dengannya dan dengan tegas dikhususkan untuk itu-

segala-galanya!

Jika anda sudah biasa dengan WordPress, anda tahu bahawa kandungannya dibahagikan kepada dua jenis:

halaman dan artikel . Perbezaan antara kedua -duanya adalah minimum -hampir tidak dapat dibezakan, kerana kedua -duanya menggunakan antara muka penyuntingan yang sama. Sudah tentu, terdapat beberapa nuansa, tetapi perbezaan utama di antara halaman adalah bahawa mereka berlapis, yang bermaksud mereka paling sesuai untuk mewujudkan hubungan halaman ibu bapa dan anak, dengan itu mewujudkan sitemap berstruktur yang baik. Pada masa yang sama, artikel lebih fokus pada metadata, dan kami boleh mengatur kandungan dengan menambahkan tag atau memasukkannya ke dalam kumpulan kategori atau mana -mana taksonomi tersuai yang boleh kami dapatkan di hujung jari kami.

Almanak dibina di halaman, bukan artikel. Halaman cemerlang pada struktur hierarki, manakala Almanak adalah kawasan yang sangat berstruktur dengan aliran peta tapak biasa yang hanya mengikut susunan abjad. Sebagai contoh, entri untuk atribut CSS, seperti

, mempunyai jalan: Almanak → Property → A → nisbah aspek. aspect-ratio

Ini kedengarannya baik, bukan? Tidak buruk, tetapi halaman pertanyaan dalam templat adalah lebih sukar daripada artikel, yang mempunyai lebih banyak metadata untuk penapisan, dll. Sebaliknya, halaman tidak. (Sekurang -kurangnya tidak jelas.) Mereka biasanya dikembalikan sebagai objek berstruktur kerana, anda tahu, struktur hierarki. Tetapi itu juga bermakna kita perlu membuat semua halaman ini secara manual, tidak seperti tag dan kategori yang secara automatik menjana arkib. Mewujudkan halaman kosong untuk huruf "A", yang merupakan subpage halaman "Properties" - sendiri sebagai subpage almanak - terasa terlalu bodoh, hanya untuk mempunyai kedudukan logik untuk memasukkan sifat yang bermula dengan huruf A. Ini mesti dilakukan untuk kedua -dua sifat dan pemilih.

Masalah sebenar ialah almanak tidak mencukupi. Kami mahu menyiarkan kandungan CSS yang lain di sana, seperti fungsi dan @ peraturan, tetapi Almanac pada asalnya dibina untuk memaparkan dua set kandungan. Itulah sebabnya kami tidak pernah menyiarkan perkara lain. Ini juga mengapa pemilih umum dan pemilih pseudo berada dalam baldi yang sama.

Memperluas ruang untuk menampung lebih banyak adalah skop kerja saya dan saya tahu saya akan berpeluang untuk menggayakan di sepanjang jalan.

satu templat peraturan semua

itulah yang dilakukannya. Pendekatan awal adalah menggunakan templat tunggal untuk mengendalikan pengindeksan almanak dan halaman abjad yang menyenaraikan pemilih dan sifat. Ini sangat pandai. Halaman pertama memeriksa sama ada halaman semasa adalah halaman almanak yang terletak di bahagian atas hierarki halaman. Sekiranya halaman ini, templat mengeluarkan hasil pemilih dan atribut dalam dua lajur pada halaman yang sama.

pertanyaan ini sangat mengagumkan.

<?php function letterOutput($letter, $selectorID, $propertyID) {
  $selector_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'post_parent' => $selectorID,
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => "ASC"
  ));

  $html = '<div>';
  $html .= '<div><a>' . $letter . '</a></div>';
  $html .= '<div>';

  while ($selector_query->have_posts()) : $selector_query->the_post();

    $html .= '<details><summary>';
    $html .= '<h2><code>';
    $html .= get_the_title();
    $html .= '</code></h2>';
    $html .= '</summary>';
    $html .= get_the_excerpt();
    $html .= '<code>';
    $html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
    $html .= '</code>';
    $html .= '<a href="'%20.%20get_the_permalink()%20.%20'">Continue Reading</a>';
    $html .= '</details>';
  endwhile;

  $html .= "</div>";
  $html .= "</div>";

  return $html;
}

Salin selepas log masuk

Ini benar -benar hanya separuh coretan kod. Perhatikan bahawa ia hanya ditandakan $selector_query. Ia akan melayari $property_query sekali lagi.

dari sana, fungsi perlu dipanggil 26 kali: sekali per huruf dalam abjad. Ia memerlukan tiga parameter, iaitu huruf (mis. A) dan ID halaman halaman "a" (mis. 14146, 13712), yang merupakan subpages pemilih dan sifat.

<?php echo letterOutput("A", 14146, 13712);
  // B, C, D, E F, G, etc.
?>

Salin selepas log masuk

Bagaimana jika kita tidak berada di halaman indeks? Templat mengeluarkan senarai huruf untuk subpages bahagian tertentu (seperti sifat). Satu templat sudah cukup.

Subpage pertanyaan

Saya boleh mengubahsuai fungsi letterOutput() untuk mendapatkan lebih banyak ID halaman untuk memaparkan halaman surat bahagian lain. Tetapi dengan jujur, saya tidak mahu berbuat demikian. Saya memilih untuk mengurangkan fungsi ke parameter ID satu halaman dan bukannya dua, dan kemudian memecah templat: satu untuk indeks utama dan satu untuk "subpart" (jika ada). Ya, ini bermakna akan ada lebih banyak templat dalam direktori tema WordPress saya, tetapi ini terutamanya untuk saya secara peribadi dan saya tidak keberatan. Saya boleh menyemak subpages saya (indeks atribut, indeks pemilih, @ indeks peraturan, dll) dan dapatkan kandungan subpages ini secara berasingan.

Apakah masalah lain dengan fungsi

? Semua tag yang dihasilkan diapit dalam pernyataan while(). Walaupun saya ingin menghuraikan pertanyaan dengan separa untuk memelihara skema templat tunggal, ia tidak seperti saya mahu meletakkan pernyataan if() di mana sahaja di dalamnya tanpa menyebabkan ralat atau pemberitahuan php maut. Sekali lagi, saya tidak berminat untuk mengubahsuai fungsi sepenuhnya.

arkib surat

Menyiarkan subpages kosong untuk semua bahagian huruf ini dan kemudian melampirkannya ke halaman induk yang betul adalah banyak kerja manual. Saya tahu, kerana saya lakukan. Sudah tentu ada yang lebih baik, walaupun cara pengaturcaraan, tetapi menukar kandungan dari halaman ke artikel dan bermula dari perspektif itu tidak menarik saya, dan saya tergesa -gesa pada masa itu. Kami tidak selalu dapat mencari cara "ideal" untuk melakukan sesuatu.

Menurut WordPress, memanggil mana -mana halaman surat "arkib" ini adalah salah faham, tetapi itulah bagaimana saya melihat subpages dari bahagian yang berlainan - jika kandungan itu dibina sebagai artikel dan bukannya halaman, itu akan menjadi. Jika saya mempunyai seksyen pemilih pseudo, maka saya memerlukan halaman individu dari a ke z, yang seterusnya bertindak sebagai halaman induk setiap pemilih pseudo. Tiga bahagian baru, masing -masing dengan 26 huruf, yang bermaksud saya mencipta 78 halaman baru. luar biasa.

anda boleh mengakses halaman surat dengan menggunakan serbuk roti halaman Almanac (contohnya, halaman ini aspect-ratio harta) atau dengan mengklik huruf besar di mana -mana bahagian (contohnya, halaman ini harta).

Kami tidak pernah mengambil halaman ini dengan serius. Mereka wujud untuk struktur, tetapi tidak banyak orang akan melawat mereka. Mereka pada dasarnya adalah ruang letak. Berguna, ya, tetapi masih ruang letak. Kami sangat tidak bertanggungjawab tentang halaman -halaman ini yang kami tidak pernah secara formal menggayakannya. Ini adalah model warisan CSS yang memberitahu anda apa.

Di sinilah saya mengambil kesempatan untuk menggilapnya secara visual. Saya telah berurusan dengan perkara yang besar dan kasar dalam reka bentuk sejak saya kembali ke pekerjaan ini beberapa bulan yang lalu. Sebagai contoh, tajuk besar dan bayang -bayang tebal yang anda lihat.

Ini bukan estetika semulajadi saya, tetapi saya fikir ia sepadan dengan trik CSS dengan baik ... mungkin, mungkin, air mata kegembiraan akan menumpahkan wajah Chris Coyier. Mungkin.

navigasi

Peningkatan lain telah ditambah ke navigasi yang dipaparkan pada halaman indeks utama. Saya menggantikan navigasi surat di bahagian atas dengan navigasi yang membawa anda ke setiap bahagian dan sekarang kita boleh mengedit halaman secara langsung di WordPress tanpa melangkaui pembangunan.

Satu -satunya perkara yang mengganggu saya ialah saya mengikatnya dan bukannya menjadikannya menu WordPress yang betul yang boleh saya uruskan dari antara muka pentadbir. [Tambah Todo ke senarai tugasannya. ]

Sejak saya membebaskan Indeks Almanak dari senarai pemilih dan atribut yang dipaparkan sepenuhnya, saya benar -benar boleh menggunakannya sebagai indeks untuk bilangan besar bahagian yang kami tambah.

kita mungkin perlu membuat kandungan halaman utama kurang berlebihan dengan navigasi pada satu ketika, tetapi saya fikir ini adalah permulaan yang baik dari mana kita boleh membina. Juga, dari segi tajuk, kini lebih konsisten dengan halaman "atas" lain yang dikaitkan dalam menu utama laman web, yang tidak akan buruk.

oh, dengan cara, apabila kita bercakap tentang navigasi, bahagian baru telah ditambah ke bar sisi kiri yang sedia ada dari halaman Almanak individu untuk membantu melompat ke entri lain di mana -mana bahagian tanpa kembali ke indeks.

Rujukan cepat

Peningkatan terakhir yang akan saya sebutkan kecil, tetapi saya fikir ia mempunyai kesan positif. Jika anda pergi ke mana-mana subpage indeks-i.e.

Kami sentiasa memberi penekanan yang besar kepada "contoh akses cepat" dan saya fikir ini telah membantu ini secara besar -besaran.

"anda boleh buat [x] ..."

Ya, masih banyak peluang untuk memperbaiki diri. Satu -satunya matlamat saya adalah untuk mengubah perkara yang cukup supaya apa yang diliputi Almanak lebih daripada sekadar pemilih dan sifat, dan mungkin beberapa gaya di sana sini. Saya juga mahu melakukan banyak perkara, mungkin kita akan melakukannya, walaupun langkah demi langkah.

apa jenis perkara? Nah, pertama sekali, navigasi indeks yang keras. Tetapi yang lebih penting, saya mahu terus menolak halaman utama. Ia digunakan untuk memainkan peranan yang besar dan saya hampir menyapu. Adalah baik untuk mencari jalan untuk menyenaraikan semua penyertaan -untuk semua bahagian -apa yang kami lakukan ketika kami hanya mempunyai dua bahagian. Inilah yang saya merancang untuk belajar.

Ya, kami ingin menampung lebih banyak kandungan CSS di sana, seperti istilah umum, media dan pertanyaan keutamaan pengguna, mungkin spesifikasi ... anda mendapatkannya. Almanak adalah sumber untuk pasukan kami dan sama seperti untuk anda, kami merujuknya setiap hari. Kami harap ia penuh dengan maklumat yang berguna.