15줄짜리 조개 스크립트로 개인 해설 관리 도구를 만들었다면
개시하다
자신이 읽은 책과 기사에 쓴 노트를 체계적으로 관리하고 싶다.
현재 우수한 해설 관리 도구는 매우 흔하다.기업용
필자는 미니 리스트다.
그 결과 아래 15줄 하우징 스크립트, GiitHub Actions, Markdown 심리도 변환 도구
markmap가 만들었다.항목, 당신은 모든 주석의 심리도를 볼 수 있습니다.
소스 여기 있어요.
그럼 제가 설명해 드릴게요.
Mardown에서 심리지도까지.
필자는 이전부터 Markdown에 필기를 하고 필기를 GiitHub에 올려 관리하는 습관이 있었다.하지만 노트가 너무 길거나 너무 깊게 박혀 있으면 읽기 어려울 수 있어 마다운이 쓴 것을 직접 심리도로 전환하고 싶었다.
인터넷에서 검색하면 심리지도 도구는 대부분 유료판이나 제한된 무료판이다.간단하고 무료로 엔지니어를 위한 사상지도가 있었으면 좋겠다고 생각해서
Markmap라는 신도구를 찾았다.Markdown을 좋은 느낌html의 심지도로 바꾸다.사용 방법은 단지 두 개의 지령을 내릴 뿐이다.
npm install -g markmap-cli
markmap note.md
프로그램 설계
언제 어디서나 노트북을 확인하려면
Markmap 변환된 html을 웹 서버에 제출해야 합니다.물론 Heroku 등 클라우드 제공자에게 디자인을 해도 전혀 문제가 없지만 지티허브만으로 완성할 수 있다면 간단하다고 생각해서github.io 디자인을 하기로 했습니다.github.io의 사용 방법은 공식적으로 참조하십시오.보자마자 심지도
html 경로index.html를 목록이나 형식으로 입력하면 끝이지만 자바스크립트만 사용하면 파일 시스템에 접근할 수 없기 때문에 어떻게든 사용해야 한다Node.js.아니면 간단하다는 게 이번 원칙이라서 가능한 한 창고
Node.js에 관련 서류를 남기고 싶지 않아요.즉 실행Markmap과 창설index.html의 절차에 롤러코스터를 사용하지 않는다는 것이다.GiitHub Action의 힘으로 간단히 구현할 수 있습니다.미리 준비하다
우선 준비
index.html.sample.자바스크립트가 한 일에 따라 얻은 심리도 경로로 목록을 작성한다<li></li>.전면 프레임을 사용하는 것이 과장되기 때문에 DOM을 직접 조작하기로 결정했습니다.또한
HTML_FILE_LIST는 잠시 후 케이스 스크립트로 대체됩니다.조개 스크립트Node.js를 사용하면 html를 사용하지 않고 경로를 얻을 수 있습니다.CSS에 대한 자세한 내용은 설명되지 않았지만 창고에서 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Mindmap Wiki</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div style="width: 600px; margin: 0 auto">
<h1>Mindmap Wiki</h1>
<ol class="gradient-list" id="list"></ol>
<script>
let data = [HTML_FILE_LIST];
let list = document.getElementById("list");
data.forEach((item) => {
let li = document.createElement("li");
let link = document.createElement("a");
link.setAttribute("href", `${item}`);
link.setAttribute("target", "_blank");
// ./dist/sub/hoge.md.html -> hoge
let title = item.split("/").slice(-1)[0].split(".")[0];
if (title.includes("_")) {
title = title.charAt(0).toUpperCase() + title.slice(1);
link.textContent = title.split("_").join(" ");
} else {
link.textContent = title;
}
li.appendChild(link);
list.appendChild(li);
});
</script>
</div>
</body>
</html>
Markemap의 실행
다음은 15행과 여러 차례의 조개 각본에 대해 설명한다.
먼저
html 파일을 저장하는 디렉터리를 만들고 모든 .md 파일의 경로를 찾습니다.#!/bin/bash
mkdir -p ./html/tech ./html/nontech
files=`find ./ -type f -name "*.md" ! -name "README.md" ! -path "./node_modules/*"`
.md.권한 등이 복잡해져서 markmap 전 세계에 설치되지 않고 markmap에 설치하면 편리합니다.for file in $files;
do
output_file="${file/md/html}"
echo "transforming $file to $output_file"
node_modules/.bin/markmap $file -o $output_file.html --no-open
done
node_modules/.bin 만들기
생성된 파일 경로
index.html를 찾고 html의 index.html.sample를 바꿉니다.패스에 더블코드를 붙여야 하기 때문에 HTML_FILE_LIST로 교체하면 좋지 않다.이번에 사용을 포기하다sedsed.find ./html -type f -name "*.html" ! -name "index.html" | \
awk '{print "\""$0"\","}' | \
xargs -0 -I{} awk -v list={} '{sub(/HTML_FILE_LIST/, list); print}' \
index.html.sample > index.html
작업흐름
위의 스크립트는 로컬이 아니므로 GiitHub Action으로 실행하면 환경 구축의 번거로움을 줄일 수 있습니다.
그러면 구현 방안을 살펴보겠습니다.나는 특별히 어려운 일을 하지 않았다.
설치
awkmarkmap-climd2mindmap.sh을 사용하여 생성된 html 파일push를 창고name: Build Minadmap
on:
push:
branches:
- "master"
paths:
- "md/**"
- "./.github/workflows/build.yml"
jobs:
build:
runs-on: ubuntu-latest
container: node:16
steps:
- uses: actions/checkout@v2
- name: Install dependency
run: npm install markmap-cli
- name: Run convert script
run: bash md2mindmap.sh
- name: Commit files
run: |
git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
git config --local user.name "github-actions[bot]"
git add .
git commit -m "Add changes" -a
- name: Push changes
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: ${{ github.ref }}
github-push-action를 하고push를 하면 GiitHub Actions의 파이프라인에 불이 붙고 심지도는 자동으로 설계됩니다.md.그게 다야.
최후
어때요?
선인의 지혜를 빌려 15줄짜리 조개 각본만으로 심플&타이니&프리의 개인 해설 관리 도구를 만들었다.Giit&GiitHub의 가장 기초적인 지식이 있다면 원가 0으로 자신의 지식 관리 도구를 구축할 수 있다.
클론 게임 꼭 해보세요.
20222.5.5 편집
!
Giithub 페이지의 작업 프로세스 이전에 사상도 설계 작업 프로세스를 끝내지 않으면 최신 사상도를 반영할 수 없기 때문에 Giithub 페이지의 Waittimer를 2분 이상으로 설정하는 것을 권장합니다.
Reference
이 문제에 관하여(15줄짜리 조개 스크립트로 개인 해설 관리 도구를 만들었다면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/jcc/articles/58f059acc2bfb6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
