時(shí)間：2023-05-29 13:15:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-29 13:15:01 來源：網(wǎng)站運(yùn)營
使用 Hexo 創(chuàng)建項(xiàng)目文檔網(wǎng)站：當(dāng)我們發(fā)布一個(gè)開源項(xiàng)目的時(shí)候，最重要的事情之一就是要?jiǎng)?chuàng)建項(xiàng)目文檔。對(duì)使用項(xiàng)目的用戶來說，文檔是非常有必要的，通常我們可以使用下面這些方式來創(chuàng)建文檔：
在線咨詢
$ nvm install v8.1.3安裝完 Node.js 的同時(shí)也會(huì)安裝對(duì)應(yīng)的 npm。$ git --version如果出現(xiàn)了 Git 的版本號(hào)，則不需要再安裝了。如果沒有，則需要安裝 Git。$ sudo apt-get install git-core$ sudo yum install git-core$ npm install -g hexo-cli通過下面的命令來檢查 hexo 是否正確安裝上了：$ hexo --version如果輸出了一系列的版本號(hào)，說明所有安裝工作都以完成，可以正式使用 hexo 了。$ git clone https://github.com/USERNAME/REPOSITORY.git將 USERNAME 替換為你的用戶名，REPOSITORY 替換為你的項(xiàng)目名稱。例如我執(zhí)行的命令如下：$ git clone https://github.com/nodejh/hexo-documentation然后使用 cd 進(jìn)入項(xiàng)目目錄，并創(chuàng)建一個(gè)名為 docs 的目錄：$ cd hexo-documentation$ mkdir docsdocs 目錄將存放我們的文檔。使用 hexo 初始化 docs 目錄：$ hexo init docs上面的命令將生成 hexo 的一些配置并安裝相關(guān)依賴。安裝完成之后，docs 的目錄結(jié)構(gòu)如下：$ hexo generate$ hexo server第一個(gè)命令將根據(jù)選用的主題，將 sources 目錄中的文件轉(zhuǎn)換成靜態(tài)網(wǎng)站文件。第二個(gè)命令將啟動(dòng)一個(gè) Web 服務(wù)器，提供這些靜態(tài)網(wǎng)站文件，我們可以通過 http://localhost:4000 來訪問：$ npm install --save hexo-renderer-sass然后回到 themes 目錄里面，配置 Sass，不然 hexo-renderer-sass 插件不會(huì)被加載。在 docs/themes/documentation/_config.yml 文件中加入下面的代碼：node_sass: outputStyle: nested precision: 4 sourceComments: falseSass 的所有可配置在 node-sass<!DOCTYPE html><html><head> <meta charSet='utf-8' /> <title>{{config.title + ' - ' + page.title}}</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'> <link href='{{ url_for("css/docs.css") }}' rel='stylesheet'></head><body> <div class='menu'> <div class='logo'> Documentation </div> <nav class='menu-nav'> {% for section in site.data.nav %} <ul class='nav'> <span>{{ section.title }}</span> <ul class='nav'> {% for item in section.items %} <li> <a href='{{item.href || url_for(item.id + ".html") }}'{% if item.id == page.id %} class='active'{% endif %}>{{item.title}}</a> </li> {% endfor %} </ul> </ul> {% endfor %} </nav> <a class='footer' href='https://github.com/sitepoint-editors/hexo-documentation'> Project on github </a> </div> <div class='page'> <div class='page-content'> <h1>{{page.title}}</h1> {{page.content}} </div> </div> <div class='switch-page'> {% if page.prev %} <a class='previous' href='{{ url_for(page.prev) }}'>Previous</a> {% endif %} {% if page.next %} <a class='next' href='{{ url_for(page.next) }}'>Next</a> {% endif %} </div></body></html>簡單分析一下代碼。<head> <meta charSet='utf-8' /> <title>{{config.title + ' - ' + page.title}}</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'> <link href='{{ url_for("css/docs.css") }}' rel='stylesheet'></head>頭部主要包括兩部分：<nav class='menu-nav'> {% for section in site.data.nav %} <ul class='nav'> <span>{{ section.title }}</span> <ul class='nav'> {% for item in section.items %} <li> <a href='{{ item.href || url_for(item.id + ".html") }}' {% if item.id == page.id %} class='active' {% endif %} > {{ item.title }} </a> </li> {% endfor %} </ul> </ul> {% endfor %}</nav>上面的代碼會(huì)生成網(wǎng)站的菜單部分，菜單項(xiàng)來自于 site.data.nav 這個(gè)對(duì)象，稍后我們會(huì)在 docs/source/_data/nav.yml 中創(chuàng)建。source/_data 是 Hexo 的數(shù)據(jù)文件。site.data.nav 即 _data 目錄中的 nav.yml 文件。nav.yml 中是一個(gè)包含 title 和 items 對(duì)象的數(shù)組。<div class="page-content"> <h1>{{ page.title }}</h1> {{ page.content }}</div>這里面包括了文章標(biāo)題和內(nèi)容兩部分。文章內(nèi)容是根據(jù) MarkDown 文件生成的 HTML。{% if page.prev %} <a class='previous' href="{{ url_for(page.prev) }}">上一頁</a>{% endif %}{% if page.next %} <a class='next' href="{{ url_for(page.next) }}">下一頁</a>{% endif %}上面的代碼中，我們假設(shè)每個(gè)頁面都有 “上一頁” 和 “下一頁” 按鈕。<!DOCTYPE html><html><head> <meta charSet='utf-8' /> <title>{{config.title + ' - ' + page.title}}</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'> <link href='{{ url_for("css/docs.css") }}' rel='stylesheet'></head><body> <div class='index'> <a href="/what-is-it.html"> Get Start </a> </div></body></html>現(xiàn)在差不多就完成了！不僅是布局文件完成了，我們的主題也制作好了。最后一件事情就是修改 Hexo 生成靜態(tài)文件的時(shí)候使用的主題。修改 docs/_config.yml 文件中的 theme 屬性：theme: documentation所有事情都做完了！接下來我們就可以創(chuàng)建文檔了。- title: Introduction items: - id: what-is-it title: What is it? - id: how-it-works title: How it works- title: Usage items: - id: installation title: Installation - id: using title: Using It這樣我們就可以通過 site.data.nav 來訪問 nav.yml 中的文件。---layout: defaultid: what-is-ittitle: What is it?next: how-it-works.html---This is our what it is markdown file- one- two- three在 front-matter 中有下面這些設(shè)置：$ hexo generate$ hexo server然后通過 http://localhost:4000 就可以看到如下頁面：$ npm install --save hexo-deployer-git然后打開 docs/_config.yml，在文檔的最后面，修改部署配置信息，注意將其中的用戶名（nodejh）修改為你的用戶名：deploy: type: git repo: https://github.com/nodejh/hexo-documentation branch: gh-pages message: "Docs updated: {{ now('YYYY-MM-DD HH:mm:ss') }})"最后再修改一些其他配置：# Sitetitle: Hexo documentationsubtitle: Hexo documentation articledescription: Hexo documentation articleauthor: nodejhlanguage: zh-cntimezone: GMT# URLurl: https://nodejh.github.io/hexo-documentationroot: /hexo-documentation/OK！現(xiàn)在就只剩下一件事情了，就是將網(wǎng)站部署到 Github 上，在終端上運(yùn)行：$ hexo generate$ hexo deployHexo 將生成靜態(tài)文件，并將其自動(dòng)部署到 gh-pages 分支上。部署完成之后，我們就可以通過 https://nodejh.github.io/hexo-documentation 來訪問了。關(guān)鍵詞：項(xiàng)目,創(chuàng)建,使用
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
