Benang Komen Styling

Benang semakan yang direka dengan baik kelihatan mudah, tetapi tidak. Artikel ini secara beransur-ansur akan membimbing anda untuk membina benang komen yang indah dan mudah digunakan.

Unsur benang komen yang baik

Sebelum merancang dan menulis kod, mari kita fahami ciri -ciri benang komen yang baik:

1. Komen boleh dibaca dan semua maklumat penting (pengarang, undi, cap waktu dan kandungan) jelas sekilas.
2. Bahagian yang berlainan dari komen adalah berbeza secara visual supaya pengguna dapat memahami fungsi setiap bahagian dengan segera. Ini amat penting untuk butang tindakan (seperti balasan, laporan) dan pautan.
3. Terdapat isyarat visual hierarki yang jelas antara komen . Ini adalah syarat yang diperlukan untuk komen bersarang (iaitu satu komen bertindak balas kepada yang lain).
4. Tatal ke komen khusus dengan mudah dan cepat , terutamanya melompat ke komen ibu bapa dalam komen kanak -kanak (balasan).
5. Komen mempunyai togol yang membolehkan pengguna menyembunyikan dan memaparkan komen dan balasan mereka.

Di samping itu, terdapat beberapa icing pada kek:

1. Pengguna boleh menandakan komen supaya moderator dapat melihat kandungan yang tidak sesuai.
2. Komen boleh disukai atau ditampar untuk menunjukkan sama ada komen itu berguna.
3. Hanya beberapa komen pertama yang dipaparkan , dan pengguna boleh memuat lebih banyak komen.

Ciri -ciri canggih ini memerlukan sokongan JavaScript. Selain itu, bergantung kepada timbunan teknologi, ciri -ciri ini juga boleh dilaksanakan di sisi pelayan, terutamanya menjejaki bilangan undi dan status tag komen. Oleh itu, artikel ini akan memberi tumpuan kepada reka bentuk gaya benang komen .

Benang komen asas

Struktur satu komen adalah mudah. Berikut adalah kerangka untuk satu komen:

Balasan mempunyai lekukan kiri tambahan untuk memenuhi keperluan hierarki visual. Tanda -tanda struktur di atas mungkin kelihatan seperti ini:

<div>
  <div>
    <div>
      Suka</div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{pengarang}}</a>
      <p>
        {{Undi}} • {{tambah masa}}
      </p>
    </div>
  </div>
  <div>
    <p>
      {{Comment content}}
    </p>
    Balas laporan</div>
  <div>
    
  </div>
</div>

Lekapan kiri tambahan balasan memberikan hierarki visual. Butang seperti dan ketik Gunakan kod aksara HTML sebagai ikon. Kelas sr-only menyembunyikan unsur-unsur pada semua peranti kecuali pembaca skrin, meningkatkan kebolehcapaian butang pengundian.

Tambahkan pautan untuk melompat ke komen

Seterusnya, tambahkan ciri yang membantu pengguna dengan cepat tatal ke komen. Ini amat berguna apabila pengguna mahu melompat ke komen ibu bapa yang dia balas.

Satu reka bentuk adalah untuk diklik "sempadan" di sebelah kiri komen:

Untuk melakukan ini, kami menolak badan komen ke kanan dan menyelaraskannya dengan jawapannya. Reka bentuk ini juga meningkatkan hierarki antara komen, dan anda boleh menentukan tahap bersarang komen yang dibaca sekarang dengan hanya melihat bilangan pautan di sempadan kiri. Sudah tentu, anda juga boleh melompat ke sebarang komen peringkat tinggi dengan segera dengan mengklik pada pautan sempadan.

Untuk melakukan ini, kita perlu menambah elemen utama untuk setiap komen (<a></a> ) dan reka bentuk unsur -unsur utama ini ke sempadan yang boleh diklik.

Berikut adalah beberapa perubahan untuk difahami:

• Tambah pautan utama ke setiap komen dan gaya dengan sempadan ke kiri.
• Watak utama komen diselaraskan dengan jawapannya.
• .comment-heading (termasuk undi, pengarang dan tambah masa) mempunyai ketinggian 50px tetap. Pastikan mereka bermula di bawah tajuk dan melanjutkan ke akhir komen dengan menetapkan position: absolute; top: 50px; height: calc(100% - 50px); untuk pautan sempadan.
• Pautan sempadan mempunyai latar belakang yang dipotong, dan sempadan di sebelah kiri dan kanan adalah 4px lebar dan 12px lebar. Ini bermakna walaupun kawasan yang kelihatan hanya 4px lebar, kawasan yang boleh diklik sebenarnya adalah 12px lebar. Permukaan yang lebih luas membantu pengguna untuk meletakkan penunjuk pada pautan dengan lebih mudah dan klik padanya kerana 4PX terlalu sempit, tetapi lebar yang lebih luas akan kelihatan tidak konsisten secara visual.

Benarkan pengguna mengklik untuk menyembunyikan/menunjukkan komen

Sekarang, kami mempunyai benang komen yang cukup memuaskan. Reka bentuk ini sendiri boleh digunakan untuk banyak kes penggunaan praktikal. Tetapi mari kita pergi lebih jauh dan tambahkan ciri togol, iaitu, menyembunyikan dan tunjukkan komen dengan mengklik.

Cara paling mudah adalah menggunakan<details></details> dan<summary></summary> elemen. Singkatnya, anda boleh mengklik<summary></summary> Untuk menukar keseluruhan<details></details> penglihatan. Ini tidak memerlukan JavaScript, dan tag ini kini disokong oleh kira -kira 96% penyemak imbas.

Untuk mencapai matlamat ini, kita perlu membuat perubahan berikut pada kod:

• Letakkan komen dari
  Berubah menjadi<details></details> .
• Balut tajuk komen ( .comment-heading ) di<summary></summary> Di dalam tag.
• Sediakan pengguna dengan petua visual untuk memberitahu mereka sama ada komen tersembunyi.

Berikut adalah beberapa perubahan untuk difahami:

• Komen sekarang<details></details> , dan kedua -duanya mempunyai atribut open , jadi ia dapat dilihat (pada) secara lalai.
• Tajuk komen kini dibungkus di<summary></summary> Di dalam tag. Anak panah lalai juga telah dipadamkan.
• Petua untuk Status Penglihatan Komen terutamanya dibuat melalui teks kecil di sebelah kanan komen. Kandungan teks ini berdasarkan kepada ibu bapa<details></details> Sama ada elemen mempunyai perubahan atribut open . Teks itu sendiri adalah elemen pseudo mudah yang dibuat menggunakan ::after pemilih. Di samping itu, terdapat sempadan di bahagian bawah komen tertutup, menunjukkan pengguna lebih banyak kandungan.
• Pada akhir kod CSS, anda akan menemui beberapa gaya di dalam @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...} selector. Ini adalah hack yang hanya untuk Internet Explorer. Iaitu tidak menyokongnya<details></details> , jadi ia sentiasa dihidupkan secara lalai. Dengan memadam teks dan menetapkan semula kursor, iaitu pengguna akan melihat benang komen biasa, hanya tidak dapat menukar penglihatan komen.

Langkah berjaga -jaga lain

Tiada komen

Jika benang komen tidak mempunyai sebarang komen (keadaan kosong), kita perlu menyampaikannya dengan jelas kepada pengguna. Perenggan mudah yang mengandungi garis "tiada komen" dan borang yang mengandungi kotak teks dan butang hantar akan pergi jauh, yang sepatutnya menjadi keperluan minimum apabila berurusan dengan keadaan kosong. Jika anda ingin melakukan yang lebih baik, anda juga boleh menambah gambar yang sepadan dengan borang.

Balas borang komen

Laman web yang berbeza mempunyai kaedah pelaksanaan yang berbeza untuk membalas komen. Sesetengah laman web menggunakan kaedah gaya lama untuk mengalihkan pengguna ke halaman baru yang mengandungi borang-kotak teks mudah dan butang hantar. Laman web lain membuka borang secara langsung dalam benang komen, biasanya menggunakan suis mudah. Yang terakhir ini memerlukan JavaScript, tetapi lebih popular sekarang. Sebagai contoh, dalam contoh di atas, kita boleh menambah bentuk mudah yang boleh menukar penglihatannya dengan mengklik butang balasan.

Letakkan pengguna setelah menghantar balasan baru

Katakan pengguna bertindak balas terhadap komen menggunakan borang yang serupa dengan yang ditunjukkan di atas. Adakah anda menunjukkannya di atas atau di bawah jawapan yang ada? Jawapannya adalah bahawa ia harus sentiasa dipaparkan di atas balasan lain. Apabila pengguna mengisi borang dan mengemukakan, mereka mahu maklum balas segera memberitahu mereka bahawa operasi itu berjaya. Oleh itu, dengan meletakkan balasan baru di atas balasan lain, kami dapat memberikan maklum balas ini kepada pengguna tanpa menatal ke bawah. Dalam pemuatan seterusnya, anda boleh mengatur komen dan balasan mengikut algoritma laman web.

Mengendalikan markdown dan blok kod

Banyak laman web, terutamanya blog pemaju, perlu menyokong markdown dan blok kod dalam komen mereka. Ini adalah topik perbincangan yang lebih besar dan mungkin memerlukan artikel khas untuk dibincangkan. Tetapi, demi artikel ini, katakan saja, terdapat banyak editor Markdown yang dapat dengan mudah dilampirkan pada kotak teks. Kebanyakan mereka menggunakan JavaScript, jadi harus mudah diintegrasikan ke dalam contoh kami. Satu plugin sedemikian ialah Markdown-It, yang mempunyai lesen MIT yang longgar. Anda juga boleh menyemak editor WYSIWYG, yang mempunyai ciri -ciri yang sama ketika mengendalikan komen web.

Perlindungan spam dan pengesahan pengguna

Jika anda membenarkan pengguna menyediakan borang input, anda boleh menjamin spam, jadi ini adalah isu yang mesti dicuba apabila membina thread komen. Cara terbaik untuk mengurangkan spam adalah menggunakan perkhidmatan seperti Recaptcha Google. Sebagai contoh, dalam contoh di atas, kotak Recaptcha boleh diletakkan di bawah butang Hantar. Ini akan melindungi laman web kami daripada penyalahgunaan.

Satu lagi cara untuk mengelakkan spam adalah untuk membenarkan hanya pengguna yang disahkan untuk menyiarkan komen, iaitu pengguna mesti mempunyai akaun dan log masuk untuk menyiarkan komen. Setiap komen akan dikaitkan dengan akaun, jadi ini membolehkan moderator berurusan dengan pengguna yang terus menyiarkan spam atau kandungan berkualiti rendah. Di sisi UI, cara yang baik adalah untuk mengalihkan pengguna ke halaman log masuk mereka apabila mereka mengklik butang Balas atau Kirim Konsten apabila mereka mengklik butang "Balas" atau "Post Comment". Sebaik sahaja mereka melengkapkan proses pengesahan, kami hanya dapat mengalihkannya kembali ke benang komen dan membuka borang.

Akhirnya, kami telah merancang benang komen yang indah, mudah digunakan, dan boleh diakses dengan ciri -ciri yang sejuk seperti melompat ke komen dan menukar penglihatan setiap komen. Kami juga membincangkan borang dalam benang komen dan membincangkan perkara lain untuk dipertimbangkan dalam aplikasi praktikal. Benang komen kami kebanyakannya menggunakan CSS (tanpa JavaScript), yang menunjukkan sejauh mana CSS telah berkembang.

Atas ialah kandungan terperinci Benang Komen Styling. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!