整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
學(xué)習(xí)時，都知道好記性不如爛筆頭。但是在這個計算機信息時代，即使我們在只能紙質(zhì)記錄重要的信息后，也建議即時整理成電子記錄存儲在電腦中。主要一下幾大好處：
故此，我們需要借助計算機這樣的強大工具，記錄我們所想所得。但是很多人并非計算機專業(yè)，對只需要記筆記的小伙伴來說，而學(xué)習(xí)word排版，甚至html的編寫。猶如我只要騎自行車解決的問題，卻要我去學(xué)開坦克甚至飛機，成本太高。
這個世界不缺牛人來解決我們的痛點，一位外國牛人就為此創(chuàng)造一種輕量級標記語言Markdown ，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的 XHTML（或者HTML）文檔。
如果你愿意將你的筆記或者文章，制作成在線個人博客站點發(fā)布到互聯(lián)網(wǎng)上(免費利用github.io)，我也將一步步教你如何搭建。這里還需要nodejs、github等基礎(chǔ)知識，其實也不難，下面我提供。
涉及知識有點多，內(nèi)容偏長，收藏查看更方便。每個小節(jié)下都有“擴展”內(nèi)容，也很重要。
1、簡介
Markdown是一種輕量級的標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，借助可實現(xiàn)快速排版且轉(zhuǎn)換成格式豐富的HTML頁面。目前被越來越多的寫作愛好者及工作者使用。其語法十分簡單，常用標記符號少，學(xué)習(xí)時間少，一旦掌握這種標記語言，將極大提高效率。但是若需要復(fù)雜排版如左右對齊縮進等，還是選擇word等專業(yè)軟件。
Markdown用簡潔的語法代替排版，而不像常用文字處理軟件Word或Pages等進行排版、字體、插入等設(shè)置。標記語言可以通過鍵盤即實現(xiàn)字體大小、插入表格，圖片，超鏈接，腳注等。
Markdown的優(yōu)點
最大好處是：快速掌握。
簡單，適合所有人群，方便打開，不至于出現(xiàn)低版本word打不開高版本word的文檔。
避免軟件不同，如對方是wps，看到的word文檔效果和你不一樣。
方便快速排版，節(jié)省時間。
輕松的導(dǎo)出為HTML、PDF格式。
純文本內(nèi)容，兼容所有的文本編輯器與文字處理軟件。
支持Markdown語法的編輯器有很多，部分網(wǎng)站也支持。
2、編寫工具
這里我推薦使用typora，因為它可以所以見即所得，不會像他編輯工具一樣，左邊編輯，右邊預(yù)覽。
3、語法
Markdown 教程 | 菜鳥教程 《了不起的Markdown》‘
4、個人體會
markdown讓我們程序員，在記錄知識時省卻了排版所浪費的時間，而且支持代碼塊，流程圖等。在word上程序代碼不支持高亮，而且排版格式不適宜代碼顯示等。而markdown會讓你心情愉悅，只需在編輯內(nèi)容上用心即可。
5、Typora 標題自動編號
Typora其實是將markdown轉(zhuǎn)換成html展示給我們看的，而且默認層級顯示是沒有序號，只有字體大小。所以我們需要通過css讓其顯示序號，讓筆記更有層次感。
在主題文件夾下開創(chuàng)建base.user.css文件，復(fù)制粘貼一下css樣式代碼：
/** initialize css counter */
#write {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
/** put counter result into headings */
#write h1:before {
counter-increment: h1;
content: counter(h1) ". "
}
#write h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) ". "
}
#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
/** override the default style for focused headings */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left:initial;
float: none;
top:initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}
/*左側(cè)大綱目錄序號*/
.sidebar-content {
counter-reset: h1
}
.outline-h1 {
counter-reset: h2
}
.outline-h2 {
counter-reset: h3
}
.outline-h3 {
counter-reset: h4
}
.outline-h4 {
counter-reset: h5
}
.outline-h5 {
counter-reset: h6
}
.outline-h1>.outline-item>.outline-label:before {
counter-increment: h1;
content: counter(h1) ". "
}
.outline-h2>.outline-item>.outline-label:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) ". "
}
.outline-h3>.outline-item>.outline-label:before {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
.outline-h4>.outline-item>.outline-label:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
.outline-h5>.outline-item>.outline-label:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
.outline-h6>.outline-item>.outline-label:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
mark {
background: white;
color: red;
font-weight: bold;
border-bottom: 0px solid white;
padding: 0.0px;
margin: 0 0px;
}
::selection { background-color: Lime; color: red;}gitbook安裝與使用（含常用插件和book.json配置詳解）_gitbook json-CSDN博客
1、是什么？
在我認識 GitBook 之前，我已經(jīng)在使用 Git 了，毋容置疑，Git 是目前世界上最先進的分布式版本控制系統(tǒng)。
我認為 Git 不僅是程序員管理代碼的工具，它的分布式協(xié)作方式同樣適用于很多場合，其中一個就是寫作（這會是一個引起社會變革的偉大的工具！）。所以在我發(fā)現(xiàn) GitBook 之前，實際上我已經(jīng)無數(shù)次想象過它的使用場景了。
咋一看 GitBook 的名字，你可能會認為它是關(guān)于 Git 的一本書。而當你有所了解之后，你也許會認為它是一個使用 Git 構(gòu)建電子書的工具。其實不然，GitBook 與 Git 的關(guān)系，就像雷鋒塔和雷鋒那樣，沒有一點關(guān)系！ 實際上，GitBook 是一個基于 Node.js 的命令行工具，支持 Markdown 和 AsciiDoc 兩種語法格式，可以輸出 HTML、PDF、eBook 等格式的電子書。所以我更喜歡把 GitBook 定義為文檔格式轉(zhuǎn)換工具。
所以，GitBook 不是 Markdown 編輯工具，也不是 Git 版本管理工具。市面上我們可以找到很多 Markdown 編輯器，比如 Typora、MacDown、Bear、MarkdownPad、MarkdownX、JetBrains’s IDE（需要安裝插件）、Atom、簡書、CSDN 以及 GitBook 自家的 GitBook Editor 等等。
2、安裝 gitbook
GitBook 是一個基于 Node.js 的命令行工具，下載安裝 Node.js，安裝完成之后，你可以使用下面的命令來檢驗是否安裝成功。
注意Node.js 對Gitbook存在兼容問題，截止2024年01月15日，LST版本為20.11.0，最新版21.5.0。建議用LTS版本。這是我個人以前發(fā)布的NodeJS開發(fā) · 學(xué)習(xí)筆記 (w-life.cn)如何windows下如何安裝搭建nodejs環(huán)境。
在https://nodejs.org/en/download/releases/中，可以查看所有Node.js版本。
$ node -v
#我本地的版本
v16.15.1確認安裝完node.js后再執(zhí)行一下命令
npm install gitbook-cli -g
#或者（yarn類似于npm安裝方式）
yarn global add gitbook-cli3、驗證安裝
gitbook -V注意：若輸入上面命令后，提示Installing GitBook，時間較長，請耐心等待。
4、初使化目錄
gitbook init會發(fā)現(xiàn)目錄下面多了2個文件，README.md和SUMMARY.md
README.md 和 SUMMARY.md 是兩個必須文件
README.md 是對書籍的簡單介紹
SUMMARY.md 是書籍的目錄結(jié)構(gòu)
其中路徑就是相對路徑，只支持兩級目錄
5、生成
#生成在當前目錄的默認文件夾 _book里面
gitbook build
#生成在當前目錄的默認文件夾 指定的out 里面
gitbook build ./out
#當前除文件夾md外，生成到out文件夾中
gitbook build ./md ./out 6、本地預(yù)覽
#注意server沒有r。默認端口4000
gitbook serve --port 8088http://localhost:8088
7、配置文件（不是必需的）
在目錄下創(chuàng)建book.json文件，json對象在使用過成中，不允許注釋，請復(fù)制粘貼后刪除注釋部分。
{
"title": "前端規(guī)范",
"description": "前端規(guī)范 簡介",
"language": "zh-hans",
"plugins": [
"-lunr",
"-search",
"code", //代碼行號插件和復(fù)制
"search-plus", //支持中文搜索 上面 search 是默認的 “-” 是去掉的意思
"splitter", // 這個側(cè)邊可以拉伸
"tbfed-pagefooter", //這個是底部加 信息 下面可以看到具體的配置
"expandable-chapters-small"//使左側(cè)的章節(jié)目錄可以折疊
"page-treeview", //頁面頭部目錄
"page-toc-button", //右側(cè)懸浮目錄導(dǎo)航
"icp" //備案信息
],
"pluginsConfig": {
"theme-default": {
"showLevel": true
},
"tbfed-pagefooter": {
"copyright":"Copyright ? xxxxx",
"modify_label": "該文件修訂時間：",
"modify_format": "YYYY-MM-DD HH:mm:ss"
},
"page-treeview": {
"copyright": "Copyright ? aleen42",
"minHeaderCount": "2",
"minHeaderDeep": "2"
},
"page-toc-button": {
"maxTocDepth": 2,
"minTocSize": 2
},
"icp": {
"label": "",
"number": "浙ICP備18042346號",
"link": "http://beian.miit.gov.cn/",
"style": {
"color": "#f72b07"
}
},
"links": {
"gitbook": false,
"sharing": {
"google": false,
"facebook": false,
"twitter": false,
"all": false
}
}
}上面配置好后，啟動服務(wù)會報錯，這樣需要我們安裝gitbook插件
8、gitbook插件
gitbook倉庫（https://www.npmjs.com/）（使用gitbook-plugin-{插件名稱}關(guān)鍵字搜索）
常用插件（https://www.jianshu.com/p/427b8bb066e6）
#插件只要在上一小節(jié)描述的json中配置好后，再執(zhí)行該命令，就會自動安裝（速度太慢，耐心等待）
gitbook install#推薦使用下面命令一個個安裝，因為會使用nodejs鏡像安裝，雖比上面安裝復(fù)雜，但是安裝速度快
npm install gitbook-plugin-{插件名稱}【提醒】因為gitbook項目不是標準的nodejs項目，所以安裝會出現(xiàn)如下圖警告，請不要理會。
安裝的插件都在當前目錄下的node_modules文件夾下
#所以可以插件目錄下按需刪除，對插件卸載。也可將整個文件夾刪除卸載。
rmdir /s/q node_modules\8、卸載GitBook
rmdir /s/q C:\Users\{User}\.gitbook #找到并刪除此文件夾刪除后執(zhí)行命令
npm uninstall -g gitbook
npm uninstall -g gitbook-cli
# 清除npm緩存
npm cache clean --force9、常用命令
gitbook init //初始化目錄文件
gitbook help //列出gitbook所有的命令
gitbook --help //輸出gitbook-cli的幫助信息
gitbook build //生成靜態(tài)網(wǎng)頁
gitbook serve //生成靜態(tài)網(wǎng)頁并運行服務(wù)器
gitbook build --gitbook=2.0.1 //生成時指定gitbook的版本, 本地沒有會先下載
gitbook ls //列出本地所有的gitbook版本
gitbook ls-remote //列出遠程可用的gitbook版本
gitbook fetch 標簽/版本號 //安裝對應(yīng)的gitbook版本
gitbook update //更新到gitbook的最新版本
gitbook uninstall 2.0.1 //卸載對應(yīng)的gitbook版本
gitbook build --log=debug //指定log的級別
gitbook builid --debug //輸出錯誤信息10、關(guān)于目錄插件
因為我們標題序號都是通過css自動生成，所以我們gitbook構(gòu)建出的html，標題及目錄也要用css生成編號。故我們要在項目目錄下創(chuàng)建styles/website.css文件夾及文件，這樣構(gòu)建后，html會自動引用該樣式。
/*隱藏page-treeview目錄的版權(quán)信息*/
.treeview__container-title{
display: none;
}
/*給頭部目錄增加編號*/
.markdown-section li {counter-increment:a 1;}
.markdown-section li a:before{content:counter(a)". ";}
.markdown-section li li {counter-increment:b 1;}
.markdown-section li li a:before{content:counter(a)"."counter(b)". ";}
.markdown-section li li li {counter-increment:c 1;}
.markdown-section li li li a:before{content:counter(a)"."counter(b)"."counter(c)". ";}
.markdown-section li li li li {counter-increment:d 1;}
.markdown-section li li li li a:before{content:counter(a)"."counter(b)"."counter(c)"."counter(d)". ";}
/*給懸浮目錄增加編號*/
.page-toc-menu li {counter-increment:toca 1;}
.page-toc-menu li a:before{content:counter(toca)". ";}
.page-toc-menu ul ul li {counter-increment:tocb 1;}
.page-toc-menu ul ul li a:before{content:counter(toca)"."counter(tocb)". ";}
/*給標題增加編號*/
.markdown-section { counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
.markdown-section h1:before {counter-increment: h1; content: counter(h1) ". ";}
.markdown-section h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
.markdown-section h3:before {counter-increment: h3;content: counter(h1) "." counter(h2) "." counter(h3) ". "}
.markdown-section h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
.markdown-section h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
.markdown-section h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
p {text-indent:2em}
mark {
background: white;
color: red;
font-weight: bold;
border-bottom: 0px solid white;
padding: 0.0px;
margin: 0 0px;
}
::selection { background-color: Lime; color: red;}11、問題
a、問題（warn"options"）
該問題經(jīng)過排除法和網(wǎng)絡(luò)上類似問題描述，應(yīng)該是所使用的插件版本自身某些語法規(guī)則不是最新的導(dǎo)致。
b、問題（第一個h1生成不了頁面目錄）
需要首行空一行
c、問題（gitbook部署后相對路徑資源文件404問題）
這種資源文件提示404錯誤請忽略，這是因為gitbook布局不是用iframe，所以資源文件會在頁面加載完后，js會再處理相對路徑的資源文件。
d、構(gòu)建或啟動時報錯
如果出現(xiàn)類似這樣的錯誤，就刪除_book文件夾，重新執(zhí)行命令即可。
c、gitbook install 報錯
12、擴展
gitbook在樣式美觀和左側(cè)文章目錄菜單層級等方面，都很簡陋。現(xiàn)在vue大行其道，其官方團隊基于vue開發(fā)出了一個 Vue 驅(qū)動的靜態(tài)網(wǎng)站生成器，它就是VuePress（https://vuepress.vuejs.org/zh/），它允許開發(fā)者自定義，自己需要的主題樣式。這里我發(fā)現(xiàn)了我比較喜歡vuepress-theme-vdoing (xiaolongsu.cn)（https://vue-doc.xiaolongsu.cn/）主題樣式，大家可以學(xué)習(xí)一下。
下圖是主題官網(wǎng)提供的一個案例，真的很漂亮。
下面是ChatGPT給出的詳細說明。我簡單總結(jié)一下就是，將發(fā)布好的靜態(tài)網(wǎng)站資源上傳到倉庫，然后在指定的生成的網(wǎng)址就可以在線訪問。
GitHub Pages 是 GitHub 提供的一項服務(wù)，它允許用戶在 GitHub 上托管和發(fā)布靜態(tài)網(wǎng)站。GitHub Pages 可以用于展示個人、組織或項目的靜態(tài)網(wǎng)頁、文檔、博客等內(nèi)容。以下是關(guān)于 GitHub Pages 的一些關(guān)鍵信息：
要使用 GitHub Pages，您可以在 GitHub 倉庫的設(shè)置中找到相應(yīng)的選項，并配置您的倉庫和分支以啟用 GitHub Pages 服務(wù)。可以在倉庫的 Settings 頁面的 "GitHub Pages" 部分找到有關(guān)配置和訪問您網(wǎng)站的信息。
這里需要git及github相關(guān)知識，在嗶哩嗶哩等視頻網(wǎng)站有很多這方面的視頻講解。以下內(nèi)容我都建立大家已經(jīng)擁有了這塊知識基礎(chǔ)上。
如果你自己有域名的話，可將自己的域名指向這個github pages。以我擁有騰訊云名下的域名（w-life.cn）為例講解。我定義一個“bk.w-life.cn”進行指向。
很多人會將自己的markdown知識筆記提交到github倉庫進行存儲，這樣可以隨時隨地進行查看或修改自己的筆記。如果這樣的話我們可以借助github中的GitHub Actions 文檔 - GitHub 文檔持續(xù)集成服務(wù)來實現(xiàn)，將我們的markdown筆記push到github后，同時github會幫我們自動生成發(fā)布靜態(tài)資源。
其實這個很簡單，就是在本地倉庫建立好.github/workflows/page.yml，寫好相應(yīng)的腳本配置，將這個文件也push到github就可以了。網(wǎng)上這方面的腳本有很多，官方文檔我也提供。如果大家還不清楚，歡迎留言或私信，我再寫一篇這個主題的文章。
筆記都對自己的理解總結(jié)，知識分享是對自己理解的梳理，也是成長的見證，也是希望廣大小伙伴的指正。
JavaScript程序使用Unicode字符集編寫。Unicode字符集中每個字符
使用兩個字節(jié)來表示，這意味著用戶可以使用中文來命名JavaScript中的變量。
實例：試著運行下程序，可以看到程序運行正常。
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var 人名="老王";
function 睡覺(誰)
{
alert(誰+" 快睡了!寶寶!");
}
睡覺(人名);
</script>
</body>
</html>根據(jù)ECMAscript標準只允許Unicode字符出現(xiàn)注釋和引號中的字符串中，其他代碼必須用
ASCII字符集。所以考慮到兼容性，不建議使用漢字命名變量和函數(shù)名。
因為JavaScript代碼嵌入在網(wǎng)中一般嚴格考慮網(wǎng)頁字符編碼與JavaScript編碼保持一致，以避免
出現(xiàn)亂碼。
ypora導(dǎo)出的PDF目錄標題自動加編號
在Typora主題文件夾增加如下文件后，標題便自動加上了編號：
https://gitcode.net/as604049322/blog_data/-/blob/master/base.user.css
例如：
但是導(dǎo)出的PDF中，目錄卻沒有編號：
這是我使用Python處理該文件，使其具有編號，完整代碼如下：
# 博客地址：https://blog.csdn.net/as604049322
__author__='小小明-代碼實體'
__date__='2023/8/31'
from PyPDF2 import PdfReader, PdfWriter
def get_pdf_Bookmark(filename):
"作者CSDN：https://blog.csdn.net/as604049322"
if isinstance(filename, str):
pdf_reader=PdfReader(filename)
else:
pdf_reader=filename
pagecount=len(pdf_reader.pages)
# 用保存每個標題id所對應(yīng)的頁碼
idnum2pagenum={}
for i in range(pagecount):
page=pdf_reader.pages[i]
idnum2pagenum[page.indirect_ref.idnum]=i
# 保存每個標題對應(yīng)的標簽數(shù)據(jù)，包括層級，標題和頁碼索引（頁碼-1）
bookmark=[]
def get_pdf_Bookmark_inter(outlines, tab=0):
for outline in outlines:
if isinstance(outline, list):
get_pdf_Bookmark_inter(outline, tab + 1)
else:
bookmark.append(
(tab, outline['/Title'], idnum2pagenum[outline.page.idnum]))
get_pdf_Bookmark_inter(pdf_reader.outline)
return bookmark
def pdf_write_bookmark(bookmark, pdf_file, compress=True):
pdf_reader=PdfReader(pdf_file)
num_pages=len(pdf_reader.pages)
pdf_writer=PdfWriter()
for page in pdf_reader.pages:
if compress:
page.compress_content_streams()
pdf_writer.add_page(page)
# pdf_reader.
last_cache=[None] * (max(bookmark, key=lambda x: x[0])[0] + 1)
for tab, title, pagenum in bookmark:
if pagenum >=num_pages:
continue
parent=last_cache[tab - 1] if tab > 0 else None
indirect_id=pdf_writer.add_outline_item(title, pagenum, parent=parent)
last_cache[tab]=indirect_id
pdf_writer.page_mode="/UseOutlines"
with open(pdf_file, "wb") as out:
pdf_writer.write(out)
print("已成功將書簽寫入到", pdf_file)
if __name__=='__main__':
file=r"C:\Users\sj\Desktop\集團管理層培訓(xùn).pdf"
bookmark=get_pdf_Bookmark(file)
num_cache=[0] * 7
last_tab=0
new_bookmark=[]
for tab, title, pagenum in bookmark:
if tab > last_tab:
num_cache[tab]=1
else:
num_cache[tab] +=1
new_title=title
if not title[0].isdigit():
new_title=".".join(map(str, num_cache[:tab + 1])) + " " + title
# print(tab, new_title, pagenum)
new_bookmark.append((tab, new_title, pagenum))
last_tab=tab
pdf_write_bookmark(new_bookmark, file)
處理后的PDF目錄就有編號了：
小伙伴們，快快用實踐一下吧！如果在學(xué)習(xí)過程中，有遇到任何問題，歡迎加我好友，我拉你進Python學(xué)習(xí)交流群共同探討學(xué)習(xí)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
