Jubin SitePoint '

Nota Editor: Tidak lama selepas artikel ini diterbitkan, laman utama SitePoint telah direka semula. Maaf, Kitty!

Sebagai penulis lama di SitePoint, saya selalu mencari reka bentuk tajuk artikel mereka sangat menarik. Tajuk ini mengandungi semua maklumat yang diperlukan untuk artikel: tajuk, pengarang, tarikh, kategori, dan juga metrik komuniti (bilangan komen dan suka).

Saya fikir ia menarik untuk membina komponen sedemikian dari perspektif HTML atau CSS. Dalam artikel ini, kami akan membina langkah ini dengan langkah untuk berusaha untuk menjadi yang terbaik: yang boleh diakses, boleh dipelihara, bertemakan, dan mesra SEO.

mata utama

Pendekatan kandungan-pertama kandungan:

menekankan bahawa sebelum penandaan HTML, gaya CSS dan peningkatan JavaScript pilihan, anda harus memberi tumpuan kepada kandungan terlebih dahulu untuk memastikan kelebihan, penyelenggaraan, tematik, dan seks mesra SEO.

• Struktur Komponen: Namakan kelas CSS menggunakan kaedah BEM (blok elemen) untuk meningkatkan kebolehbacaan dan kebolehgunaan semula kod, yang penting untuk mengekalkan pangkalan kod CSS yang besar.
• Penggunaan Flexbox: Menunjukkan penggunaan Flexbox yang berkesan dalam reka bentuk responsif, yang membolehkan komponen seperti kad SitePoint untuk menyesuaikan dan mengekalkan integriti susun atur dengan lancar pada saiz skrin yang berbeza.
• Accessibility and SEO: Highlights the use of SVG and ARIA tags to achieve accessible icons, as well as ways to improve SEO with microdata, ensuring components are both user-friendly and easy to index by search engines .
• Tema dan Penyesuaian: Bincangkan pemisahan tema dari susun atur komponen dan penggunaan kelas berasaskan ruang nama untuk skim warna, menjadikannya lebih mudah untuk menyesuaikan dan tema tanpa mengubah struktur CSS.
• Mulakan dengan kandungan

Penciptaan komponen hampir selalu mengikuti urutan berikut: kandungan pertama, kemudian tag, kemudian gaya, dan akhirnya JavaScript (jika diperlukan). Kami tidak akan menyimpang dari peraturan ini, mulakan dengan kandungan kami.

Dari sini, kita boleh mula membungkus kandungan kami di HTML. Seluruh bekas akan menjadi elemen

, kerana ini seolah -olah menjadi kes penggunaan yang betul untuknya. Di dalamnya, kita akan mempunyai bekas untuk bahagian atas, bekas untuk tajuk (walaupun ini tidak diperlukan sepenuhnya), dan footer untuk metadata.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

<article></article> NOTA: Kami menggunakan konvensyen penamaan gaya BEM dengan ruang nama;

<article class="c-article-tile">
  <div class="c-article-tile__header">
    HTML & CSS

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article>

Seterusnya, kita memerlukan subkontainer untuk memegang unsur -unsur kita. Satu adalah untuk kategori, satu adalah untuk jumlah komen, satu adalah untuk tajuk yang sesuai untuk tajuk, satu adalah untuk penulis, dan satu adalah untuk tarikh. Mari tambahkan pautan juga.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

mari menggantikan perkataan "komen" dengan ikon yang boleh diakses yang sesuai. Kami tidak akan menerangkan secara mendalam, jangan ragu untuk membaca aliran kerja SVG yang berkesan untuk ikon yang boleh diakses untuk mengetahui lebih lanjut.

<article class="c-article-tile">
  <div class="c-article-tile__header">
    HTML & CSS

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article>

Perhatikan bagaimana kami menggunakan atribut aria-label untuk membolehkan pengguna teknologi bantuan mengakses ikon.

Akhirnya, kita boleh menambah microdata ke kod kami supaya enjin carian boleh menjadi lebih mudah untuk merangkak dan indeks. Jangan ragu untuk melihat rujukan artikel skema.org. (Kod untuk menambah data mikro ditinggalkan di sini, kerana dibandingkan dengan teks asal, ia hanya ditambahkan ke atribut itemprop, yang terlalu panjang)

Sebelum memulakan reka bentuk gaya, saya ingin bercakap tentang pembungkusan komponen dan pelaksanaan reka bentuk yang sesuai. Secara definisi, komponen harus diguna semula. Untuk penggunaan semula yang betul dalam persekitaran yang responsif, biasanya lebih baik untuk tidak mempunyai saiz tetap dan jarak konteks dan biarkan ia terungkap secara semula jadi dalam bekasnya.

Ini bermakna bahawa bekas itu sendiri menentukan beberapa sempadan komponen enkapsulasi. Dalam contoh kami, bekas boleh menjadi item senarai, yang merupakan sebahagian daripada komponen senarai yang digunakan untuk memaparkan kad (atau kandungan lain).

inilah yang kelihatan seperti:

<article class="c-article-tile">
  <div class="c-article-tile__header">
    <a class="c-article-tile__category" href="https://www.php.cn/link/24e6e6721e0a39950780dfb8f91e53ed">
      HTML & CSS
    </a>
    <a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
      8 条评论
    </a>
  </div>
  <div class="c-article-tile__body">
    <h2 class="c-article-tile__title">
      <a href="https://www.php.cn/link/722fd8c97825bdea860322e28ac6dcbd">CSS 和 Sass 精度的故事</a>
    </h2>
  </div>
  <div class="c-article-tile__footer">
    <span class="c-article-tile__author">
      作者：
      <a href="https://www.php.cn/link/58eaa69d86c0bb41c0f334b95b6c8cf2">Kitty Giraudel</a>
    </span>
    <time class="c-article-tile__date" datetime="2016-05-12T12:00">
      2016 年 5 月 12 日
    </time>
  </div>
</article>

Pada peringkat ini, kami telah menyelesaikan kerja penandaan. Ia mudah, mudah diakses, dan mesra seo; Sudah tiba masanya untuk merancang gaya!

Gunakan beberapa gaya

Untuk bahagian CSS, kami akan mengandaikan bahawa semua elemen mempunyai model kotak yang sesuai. Kami juga akan sangat bergantung pada Flexbox kerana, anda tahu, mengapa tidak?

Senarai komponen kontena

Komponen senarai kami sangat nipis, jadi tidak ada gaya. Ia mesti memberikan susun atur seperti grid untuk kad, mengendalikan jarak antara kad, dan memastikan bahawa semua kad pada baris yang sama adalah ketinggian yang sama. Oleh kerana Flexbox, ini tidak sepatutnya sukar.

<svg style="display: none">
  <symbol id="icon-bubble" viewBox="0 0 32 32">
    <path class="path1" d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path>
  </symbol>
</svg>

<a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
  8
  <svg class="icon icon-bubble" aria-label="评论">
    <use xlink:href="#icon-bubble"></use>
  </svg>
</a>

sekarang adalah item senarai:

<ul class="c-tile-list">
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
</ul>

Komponen kad artikel

mari kita bincangkan topik sebenar: komponen kad artikel. Terdapat banyak elemen yang memerlukan gaya reka bentuk, bermula dengan kad itu sendiri.

Seperti yang dinyatakan sebelum ini, kad itu tidak sepatutnya mempunyai saiz tetap, melainkan mengubah saiznya pada bekas induknya. Kami juga akan menjadikan kad itu sendiri sebagai bekas flex supaya footernya dapat diselaraskan ke bawah tanpa mengira ketinggian yang dikira kad.

/**
 * 1. 重置默认列表样式
 * 2. 使用 Flexbox 为卡片创建网格状布局。
 */
.c-tile-list {
  list-style: none; /* 1 */
  margin: 0; /* 1 */
  padding: 0; /* 1 */
  display: flex; /* 2 */
  flex-wrap: wrap; /* 2 */
}

kita boleh pergi lebih mendalam dan merancang subkontainer kad (tajuk, badan, footer). Mereka semua bertanggungjawab untuk pengisian mendatar, dan untuk menjadikan kedudukan lebih mudah lebih mudah kita dapat membuat setiap bekas bekas flex. (Selebihnya kod CSS ditinggalkan di sini kerana artikel terlalu panjang dan sangat serupa dengan teks asal)

Ringkasan

itu sahaja! Wow, perjalanan panjang, tetapi saya harap anda menikmatinya. Saya fikir contoh kecil ini sangat sesuai untuk pembungkusan komponen yang betul, pengurusan tema dan penggunaan flexbox. Jangan ragu untuk mencubanya dan pastikan anda berkongsi jika anda mendapati sebarang penambahbaikan!

Sila lihat Contoh Konsep Kad SitePoint untuk SitePoint pada Codepen.

Soalan Lazim Mengenai Kad SitePoint (FAQ)

(bahagian FAQ ditinggalkan di sini kerana artikel terlalu panjang dan sangat serupa dengan teks asal)

Singkatnya, output ini secara efektif pseudo-asalnya teks asal, mengekalkan idea umum dan kedudukan gambar teks asal, dan menggunakan bahasa dan struktur yang lebih mudah. Oleh kerana batasan ruang, beberapa kod ditinggalkan, tetapi logik dan struktur mereka selaras dengan teks asal.

Atas ialah kandungan terperinci Jubin SitePoint '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!