唯美主題hexo-sakura使用教程

作者博客hojun.cn
hexo-theme-sakura主題 English document

基于WordPress主題Sakura修改成Hexo的主題。

demo預覽

正在開發中......

image

交流群

若你是使用者,加群QQ: 801511924

若你是創作者,加群QQ: 194472590

主題特性

  • 首頁大屏視頻
  • 首頁隨機封面
  • 圖片懶加載
  • valine評論
  • fancy-box相冊
  • pjax支持,音樂不間斷
  • aplayer音樂播放器
  • 多級導航菜單(按現在大部分hexo主題來說,這也算是個特性了)

贊賞作者

如果喜歡hexo-theme-sakura主題,可以考慮資助一下哦~非常感激!

paypal | Alipay 支付寶 | WeChat Pay 微信支付

未完善的使用教程

那啥?老實說我目前也不是很有條理233333333~

1、主題下載安裝

hexo-theme-sakura建議下載壓縮包格式,因為除了主題內容還有些source的配置對新手來說比較太麻煩,直接下載解壓就省去這些麻煩咯。

下載好后解壓到博客根目錄(不是主題目錄哦,重復的選擇替換)。接著在命令行(cmd、bash)運行npm i安裝依賴。

2、主題配置

博客根目錄下的_config配置

站點

# Site
title: 你的站點名
subtitle:
description: 站點簡介
keywords:
author: 作者名
language: zh-cn
timezone:

部署

deploy:
  type: git
  repo: 
    github: 你的github倉庫地址
    # coding: 你的coding倉庫地址
  branch: master

備份 (使用hexo b發布備份到遠程倉庫)

backup:
  type: git
  message: backup my blog of https://honjun.github.io/
  repository:
    # 你的github倉庫地址,備份分支名  (建議新建backup分支)
    github: https://github.com/honjun/honjun.github.io.git,backup
    # coding: https://git.coding.net/hojun/hojun.git,backup

主題目錄下的_config配置

其中標明【改】的是需要修改部門,標明【選】是可改可不改,標明【非】是不用改的部分

# site name
# 站點名 【改】
prefixName: さくら荘その
siteName: hojun

# favicon and site master avatar
# 站點的favicon和頭像 輸入圖片路徑(下面的配置是都是cdn的相對路徑,沒有cdn請填寫完整路徑,建議使用jsdeliver搭建一個cdn啦,先去下載我的cdn替換下圖片就行了,簡單方便~)【改】
favicon: /images/favicon.ico
avatar: /img/custom/avatar.jpg

# 站點url 【改】
url: https://sakura.hojun.cn

# 站點介紹(或者說是個人簽名)【改】
description: Live your life with passion! With some drive!

# 站點cdn,沒有就為空 【改】  若是cdn為空,一些圖片地址就要填完整地址了,比如之前avatar就要填https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/custom/avatar.jpg
cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6

# 開啟pjax 【選】
pjax: 1

# 站點首頁的公告信息 【改】
notice: hexo-Sakura主題已經開源,目前正在開發中...

# 懶加載的加載中圖片 【選】
lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg

# 站點菜單配置 【選】
menus:
  首頁: { path: /, fa: fa-fort-awesome faa-shake }
  歸檔: { path: /archives, fa: fa-archive faa-shake, submenus: { 
    技術: {path: /categories/技術/, fa: fa-code }, 
    生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    資源: {path: /categories/資源/, fa: fa-cloud-download }, 
    隨想: {path: /categories/隨想/, fa: fa-commenting-o },
    轉載: {path: /categories/轉載/, fa: fa-book }
  } }
  清單: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    書單: {path: /tags/悅讀/, fa: fa-th-list faa-bounce }, 
    番組: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌單: {path: /music/, fa: fa-headphones },
    圖集: {path: /tags/圖集/, fa: fa-photo }
  } }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帳: { path: /links/, fa: fa-link faa-shake }
  贊賞: { path: /donate/, fa: fa-heart faa-pulse }
  關于: { path: /, fa: fa-leaf faa-wrench , submenus: { 
    我?: {path: /about/, fa: fa-meetup}, 
    主題: {path: /theme-sakura/, fa: iconfont icon-sakura },
    Lab: {path: /lab/, fa: fa-cogs },
  } }
  客戶端: { path: /client/, fa: fa-android faa-vertical }
  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }

# Home page sort type: -1: newer first,1: older first. 【非】
homePageSortType: -1

# Home page article shown number) 【非】
homeArticleShown: 10

# 背景圖片 【選】
bgn: 8

# startdash面板 url, title, desc img 【改】
startdash: 
  - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主題, img: /img/startdash/sakura.md.png}
  - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站視頻, img: /img/startdash/bilibili.jpg}
  - {url: /, title: hojun的萬事屋, desc: 技術服務, img: /img/startdash/wangshiwu.jpg}


# your site build time or founded date
# 你的站點建立日期 【改】
siteBuildingTime: 07/17/2018


# 社交按鈕(social)  url, img PC端配置 【改】
social:
  github: {url: http://github.com/honjun, img: /img/social/github.png}
  sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png}
  wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png}
  zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png}
  email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg}
  wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}

# 社交按鈕(msocial)  url, img 移動端配置 【改】
msocial:
  github: {url: http://github.com/honjun, fa: fa-github, color: 333}
  weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}

# 贊賞二維碼(其中wechatSQ是贊賞單頁面的贊賞碼圖片)【改】
donate:
  alipay: /img/custom/donate/AliPayQR.jpg
  wechat: /img/custom/donate/WeChanQR.jpg
  wechatSQ: /img/custom/donate/WeChanSQ.jpg

# 首頁視頻地址為https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4,配置如下 【改】
movies:
  url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2
  # 多個視頻用逗號隔開,隨機獲取。支持的格式目前已知MP4,Flv。其他的可以試下,不保證有用
  name: Unbroken.mp4

# 左下角aplayer播放器配置 主要改id和server這兩項,修改詳見[aplayer文檔] 【改】
aplayer: 
  id: 2660651585
  server: netease
  type: playlist
  fixed: true
  mini: false
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true

# Valine評論配置【改】
valine: true
v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz
v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ

分類頁和標簽頁配置

分類頁

image

標簽頁

image

配置項在\themes\Sakura\languages\zh-cn.yml里。新增一個分類或標簽最好加下哦,當然嫌麻煩可以直接使用一張默認圖片(可以改主題或者直接把404圖片替換下,征求下意見要不要給這個在配置文件中加個開關,可以issue或群里提出來),現在是沒設置的話會使用那種倒立小狗404哦。

#category
# 按分類名創建
技術:
    #中文標題
    zh: 野生技術協會 
    # 英文標題
    en: Geek – Only for Love
    # 封面圖片
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg
生活:
    zh: 生活
    en: live
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/writing.jpg

#tag
# 標簽名即是標題
悅讀:
    # 封面圖片
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg

單頁面封面配置

image

如留言板頁面頁面,位于source下的comment下,打開index.md如下:

---
title: comment
date: 2018-12-20 23:13:48
keywords: 留言板
description: 
comments: true
# 在這里配置單頁面頭部圖片,自定義替換哦~
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg
---

單頁面配置

番組計劃頁 (請直接在下載后的文件中改,下面的添加了注釋可能會有些影響)

image
---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
description:
bangumis:
  # 番組圖片
  - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
  # 番組名
    title: 朝花夕誓——于離別之朝束起約定之花
  # 追番狀態 (追番ing/已追完)
    status: 已追完
  # 追番進度
    progress: 100
  # 番劇日文名稱
    jp: さよならの朝に約束の花をかざろう
  # 放送時間
    time: 放送時間: 2018-02-24 SUN.
  # 番劇介紹
    desc:  住在遠離塵囂的土地,一邊將每天的事情編織成名為希比歐的布,一邊靜靜生活的伊歐夫人民。在15歲左右外表就停止成長,擁有數百年壽命的他們,被稱為“離別的一族”,并被視為活著的傳說。沒有雙親的伊歐夫少女瑪奇亞,過著被伙伴包圍的平穩日子,卻總感覺“孤身一人”。他們的這種日常,一瞬間就崩潰消失。追求伊歐夫的長壽之血,梅薩蒂軍乘坐著名為雷納特的古代獸發動了進攻。在絕望與混亂之中,伊歐夫的第一美女蕾莉亞被梅薩蒂帶走,而瑪奇亞暗戀的少年克里姆也失蹤了。瑪奇亞雖然總算逃脫了,卻失去了伙伴和歸去之地……。
  - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
    title: 朝花夕誓——于離別之朝束起約定之花
    status: 已追完
    progress: 50
    jp: さよならの朝に約束の花をかざろう
    time: 放送時間: 2018-02-24 SUN.
    desc: 住在遠離塵囂的土地,一邊將每天的事情編織成名為希比歐的布,一邊靜靜生活的伊歐夫人民。在15歲左右外表就停止成長,擁有數百年壽命的他們,被稱為“離別的一族”,并被視為活著的傳說。沒有雙親的伊歐夫少女瑪奇亞,過著被伙伴包圍的平穩日子,卻總感覺“孤身一人”。他們的這種日常,一瞬間就崩潰消失。追求伊歐夫的長壽之血,梅薩蒂軍乘坐著名為雷納特的古代獸發動了進攻。在絕望與混亂之中,伊歐夫的第一美女蕾莉亞被梅薩蒂帶走,而瑪奇亞暗戀的少年克里姆也失蹤了。瑪奇亞雖然總算逃脫了,卻失去了伙伴和歸去之地……。
---

友鏈頁 (請直接在下載后的文件中改,下面的添加了注釋可能會有些影響)

image
---
layout: links
title: links
# 創建日期,可以改下
date: 2018-12-19 23:11:06 
# 圖片上的標題,自定義修改
keywords: 友人帳 
description: 
# true/false 開啟/關閉評論
comments: true 
# 頁面頭部圖片,自定義修改
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg 
# 友鏈配置
links: 
  # 類型分組
  - group: 個人項目
    # 類型簡介
    desc: 充分說明這家伙是條咸魚 < ( ̄︶ ̄)>
    items:
    # 友鏈鏈接
    - url: https://shino.cc/fgvf
    # 友鏈頭像
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
    # 友鏈站點名
      name: Google
    # 友鏈介紹  下面雷同
      desc: Google 鏡像
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 鏡像
  # 類型分組...
  - group: 小伙伴們
    desc: 歡迎交換友鏈 ?(ˊ?ˋ)
    items:
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 鏡像
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 鏡像
---

寫文章配置

主題集成了個人插件hexo-tag-bili和hexo-tag-fancybox_img。其中hexo-tag-bili用來在文章或單頁面中插入B站外鏈視頻,使用語法如下:

{% bili video_id [page] %}

詳細使用教程詳見hexo-tag-bili

hexo-tag-fancybox_img用來在文章或單頁面中圖片,使用語法如下:

{% fb_img src [caption] %}

詳細使用教程詳見hexo-tag-fancybox_img

還有啥,一時想不起來......

To be continued...

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容