Hexo 教學

Hexo 雜項筆記

相關網址
Windows環境 GitHub + Hexo 搭建個人博客
https://blog.kinpzz.com/2016/12/31/hexo-admin-backend-management/
Hexo 選取主題 + 更換主題
https://www.jianshu.com/p/282717c8da6c
使用Hexo搭建个人博客(基于hexo3.0)
http://opiece.me/2015/04/09/hexo-guide/
Hexo主题开发经验杂谈
https://molunerfinn.com/make-a-hexo-theme/#%E5%89%8D%E8%A8%80

環境：Node.js 、 Git(Base指令)

安裝 Hexo 並且生成文件
npm install hexo-cli -g | 如果發生錯誤 -> npm install hexo-deployer-git --save

Hexo Admin 後台管理插件

範例網址：https://jaredforsyth.com/hexo-admin/admin/#/
GitHub：https://github.com/jaredly/hexo-admin

安裝後台：npm install --save hexo-admin
訪問：http://localhost:4000/admin/

假設根目錄:
/c/phpStudy/PHPTutorial/WWW/pratnket/blog # 所有指令先回到根目錄去操作。

$ hexo g #完整命令为hexo generate，用于生成静态文件
$ hexo s #完整命令为hexo server，用于启动服务器，主要用来本地预览
$ hexo d #完整命令为hexo deploy，用于将本地文件发布到github上
$ hexo n #完整命令为hexo new，用于新建一篇文章

$ hexo clean && hexo g # 清楚緩存並且生成文章
$ hexo server # 啟動服務器，主要用於本地預覽

刪除文件，即是刪除文章
文章 C:\phpStudy\PHPTutorial\WWW\pratnket\blog\source\_posts
編輯中未生成文章 C:\phpStudy\PHPTutorial\WWW\pratnket\blog\source\_drafts
-----------
melody 主題
sidebar 側邊攔，預設開啟 themes\melody\source\js\sidebar.js
  $(function () {

    在此插入代碼1

    $('.toggle-sidebar-info > span').on('click', function () {
      var toggleText = $(this).attr('data-toggle')
      $(this).attr('data-toggle', $(this).text())
      $(this).text(toggleText)
      changeSideBarInfo()
    })
-----------
移除版權
#footer.layout
  - var now = new Date()
  - var nowYear = now.getFullYear()
  if theme.since && theme.since != nowYear
    .copyright!= `©${theme.since} - ${nowYear} By ${config.author}`
  else
    .copyright!= `©${nowYear} By ${config.author}`
    ---刪除 start ---
  .framework-info
    span= _p('footer.driven') + ' - '
    a(href='http://hexo.io')
      span Hexo
    span.footer-separator |
    span= _p('footer.theme') + ' - '
    a(href='https://github.com/Molunerfinn/hexo-theme-melody')
      span Melody
     ---刪除 end ---
  if theme.footer_custom_text
    .footer_custom_text!=`${theme.footer_custom_text}`   
  if theme.ICP.enable
    .icp
      a(href=theme.ICP.url)
        span=theme.ICP.text
  if theme.busuanzi.enable
    include ./count/busuanzi.pug
-----------

代碼1

$('#page-header').addClass('open-sidebar')
$('body').velocity('stop').velocity({
  paddingLeft: '300px'
}, {
  duration: 200
})
$('#sidebar').velocity('stop').velocity({
  translateX: '300px'
}, {
  duration: 200
})
$('#toggle-sidebar').velocity('stop').velocity({
  rotateZ: '180deg',
  color: '#99a9bf'
}, {
  duration: 200
})

Hexo 如何更換主題

$ 請不要複製到

範例：
GitHub
https://github.com/Molunerfinn/hexo-theme-melody

步驟一 下載主題

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\
指令:$ git clone -b master https://github.com/Molunerfinn/hexo-theme-melody themes/melody

步驟二 安裝 插件(看主題需求)

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\
指令:$ npm install hexo-renderer-jade hexo-renderer-stylus

步驟三 切換至 安裝的主題

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\themes\melody
指令:$ cd themes/melody

步驟四 取回某分支的更新(大概就是主題有更新吧，去抓更新檔)

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\themes\melody
指令:$ git pull

步驟五 回到根目錄

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\
指令:$ cd ../../

步驟六 修改設定的模板

檔案路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: melody <- 請改這個名稱，名稱要跟 themes\melody(你指定的主題) 一樣

步驟七

# hexo clean 清除快取檔案 (db.json) 和已產生的靜態檔案 (public)。
# hexo g 產生靜態檔案

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\
指令:$ hexo clean && hexo g

步驟八 啟動伺服器

路徑:C:\phpStudy\PHPTutorial\WWW\pratnket\blog\
指令:$ hexo server

步驟九 訪問 http://localhost:4000/ 查看效果

其他步驟:
	上傳 至 Github 個人空間，需要先設定過
	指令:$ hexo d