Parsing markdown ke dalam jadual kandungan automatik

Tutorial ini menunjukkan mewujudkan jadual kandungan interaktif untuk kandungan markdown jangka panjang. Ia memanfaatkan beberapa teknik untuk meningkatkan pengalaman pengguna, termasuk parsing markdown, pemerhati persimpangan untuk pengesanan seksyen aktif, animasi menatal yang lancar, dan peralihan Vue.js untuk kemas kini senarai animasi.

Jadual kandungan menyediakan navigasi cepat dalam satu halaman. Ini amat berguna untuk artikel yang panjang, menawarkan pengguna gambaran yang jelas dan akses mudah ke bahagian yang berbeza. Panduan ini memperincikan bagaimana untuk mengubah teks markdown ke dalam jadual HTML kandungan dengan tajuk yang dipautkan, menonjolkan bahagian yang dilihat sekarang. Kami juga akan melaksanakan kemas kini senarai tatal dan animasi yang lancar menggunakan Vue.js.

Parsing Markdown dan Generasi HTML

Kandungan web sering menggunakan markdown. Kami akan menggunakan perpustakaan marked (walaupun alternatif sesuai) untuk menghuraikan markdown ke HTML. Kandungan markdown diambil dari inti github. Fungsi marked menukarkan teks markdown yang diambil ke HTML, yang kemudian disuntik ke dalam DOM.

 fungsi async fetchandparsemarkdown () {
  const const url = 'https://gist.githubusercontent.com/lisilinhart/E9DCF5298adff7c2a4da9ce2a3db3f/raw/2f1a0d47eba64756560b5d2919d45d45d45d45d45d45d45d45d45d45d45d45d45d4.
  tindak balas const = menunggu pengambilan (url);
  const data = menunggu tindak balas.teks ();
  const htmlfrommarkdown = ditandakan (data, {sanitize: true});
  kembali htmlfrommarkdown;
}

HTML yang dihuraikan dimasukkan ke dalam elemen DOM yang ditetapkan menggunakan innerHTML .

 fungsi async init () {
  const $ main = document.QuerySelector ('#app');
  const htmlcontent = menunggu fetchandParsemarkdown ();
  $ main.innerHtml = htmlcontent;
}

init ();

Menjana jadual kandungan

Langkah seterusnya adalah untuk membuat jadual kandungan dari tajuk (H1 dan H2) dalam HTML yang dihuraikan. Kami menggunakan querySelectorAll untuk memilih tajuk ini, mengeluarkan kandungan teks mereka, kedalaman (H1 atau H2), dan atribut ID.

 fungsi generatelinkmarkup ($ contentElement) {
  headings const = [... $ contentElement.QuerySelectorAll ('H1, H2')];
  const parsedHeadings = headings.map (heading => ({
    Tajuk: Heading.Innertext,
    Kedalaman: heading.nodename.replace (/\ d/g, ''),
    ID: Heading.GetAttribute ('ID')
  }));
  // ... (selebihnya fungsi untuk menghasilkan markup HTML)
}

Ini menghasilkan pelbagai objek, masing -masing mewakili tajuk. Data ini kemudiannya digunakan untuk membuat HTML untuk jadual kandungan menggunakan literasi templat ES6, menambah lekukan untuk subheadings (H2). HTML yang dihasilkan ditambah kepada elemen selain.

Melaksanakan pemerhati persimpangan

Untuk menonjolkan bahagian aktif secara dinamik dalam jadual kandungan, kami menggunakan API Observer Persimpangan. API ini membolehkan kita memantau apabila elemen (dalam kes ini, tajuk) bersilang dengan viewport.

 fungsi CreateObserver ($ links) {
  const options = {rootMargin: "0px 0px -200px 0px", ambang: 1};
  const callback = (penyertaan, pemerhati) => handsObserver (penyertaan, pemerhati, $ pautan); // panggilan balik mengendalikan kemas kini
  mengembalikan IntersectionObserver baru (panggilan balik, pilihan);
}

Function HandsObserver (penyertaan, pemerhati, $ pautan) {
  entri.Foreach (entry => {
    jika (entry.isIntersecting && entry.IntersectionRatio> = 1) {
      UpdateLinks (`#$ {entry.target.getAttribute ('id')}`, $ links);
    }
  });
}

fungsi updateLinks (LookId, $ links) {
  $ links.foreach (link => {
    link.classlist.remove ('is-active');
    jika (link.getAttribute ('href') === visibleId) link.classlist.add ('is-active');
  });
}

Pemeriksaan fungsi handleObserver untuk persimpangan dan panggilan updateLinks untuk menambah/mengeluarkan kelas is-active dari pautan yang sepadan dalam jadual kandungan.

Menatal lancar dan pengendalian klik pautan

Mengklik pautan dalam jadual kandungan hendaklah tatal dengan lancar ke bahagian yang sepadan. Kami menambah pendengar acara ke setiap pautan, menghalang tingkah laku lalai dan menggunakan window.scroll dengan pilihan tingkah laku smooth (melainkan pengguna lebih suka gerakan dikurangkan).

 const MotionQuery = window.matchmedia ('(lebih suka-dikurangkan-gerakan)');

$ links.foreach (link => {
  link.addeventListener ("klik", evt => handlelinkclick (evt, $ tajuk, gerakan));
});

Fungsi HandlelinkClick (EVT, $ Headings, MotionQuery) {
  evt.PreventDefault ();
  const id = evt.target.getAttribute ("href"). ganti ('#', '');
  const seksyen = $ headings.find (heading => heading.getAttribute ('id') === id);
  seksyen.focus ();
  window.scroll ({
    Kelakuan: MotionQuery.Matches? 'segera': 'lancar',
    Atas: Section.offsettop - 20
  });
}

Menghidupkan jadual kandungan dengan vue.js

Akhirnya, Vue.js<transition-group></transition-group> Komponen digunakan untuk menghidupkan penambahan dan penyingkiran item senarai dalam jadual kandungan. Ini memberikan peralihan yang lancar apabila bahagian menjadi aktif atau tidak aktif. Peralihan CSS yang sesuai ditakrifkan untuk mengendalikan animasi. .

Pendekatan lengkap ini menyampaikan kandungan yang sangat interaktif dan mesra pengguna untuk kandungan markdown jangka panjang.

Atas ialah kandungan terperinci Parsing markdown ke dalam jadual kandungan automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!