클릭 한 번으로 dev.to 게시물의 "목차"를 만드세요.

dev.to의 내 게시물에는 항상 목차가 필요합니다. 지금까지 수동으로 작업했는데 많은 작업이 필요했습니다. 그래서 북마크릿으로 사용할 수 있는 작은 JS 스니펫을 만들었습니다.

북마크릿은 브라우저에서 북마크처럼 보입니다. 하지만 클릭하면 JS 스니펫이 현재 페이지에서 실행됩니다.



다음은 소스 코드입니다. 기사의 모든 h2 및 h3을 살펴보고 내부 링크를 생성하고 이를 마크다운으로 연결합니다. dev.to 게시물에 복사하여 붙여넣을 준비가 되었습니다.

(() => {
  let toc = "";
  let numH2 = 1;
  let numH3 = 1;
  document.querySelectorAll("article h2,article h3").forEach(element => {
    const a = element.firstElementChild;
    if (a?.nodeName === "A") {
      const text = (element.lastChild?.nodeValue || "").replaceAll("\n", "").trim();
      if (element.nodeName === "H2") {
        toc += `${numH2}. [${text}](${a.hash})\n`;
        numH2 += 1;
        numH3 = 1;
      } else if (element.nodeName === "H3") {
        toc += `    ${numH3}. [${text}](${a.hash})\n`;
        numH3 += 1;
      }
    }
  });
  console.log("## Table Of Contents\n\n" + toc);
})()

북마크릿을 만드는 방법은 무엇입니까? 브라우저에서 새 책갈피를 만듭니다. URL 대신javascript: 코드를 입력합니다.

북마크에 대한 위의 축소된 JS 스니펫입니다.

javascript:(()=>{let toc="";let numH2=1;let numH3=1;document.querySelectorAll("article h2,article h3").forEach(element=>{const a=element.firstElementChild;if(a?.nodeName==="A"){const text=(element.lastChild?.nodeValue||"").replaceAll("\n","").trim();if(element.nodeName==="H2"){toc+=`${numH2}. [${text}](${a.hash})\n`;numH2+=1;numH3=1}else if(element.nodeName==="H3"){toc+=`    ${numH3}. [${text}](${a.hash})\n`;numH3+=1}}});console.log("##%20Table%20Of%20Contents\n\n"+toc)})()