Hexo

write on top

  • Some advice:
    • Make a backup! Make a backup! Make a backup!
    • It is recommended to copy a copy of the hexo directory source folder for some magic changes and experimental functions to be added for experimentation.
    • You can use git backup, you can also take the simplest zip backup
    • The initial backup is recommended to be established based on basic availability
    • Create a modify.md file to record your modification records

Install env

  • ENV:Node.js

  • Install command:npm install -g hexo-cli

Deploy

  • hexo init namecreate corresponding name folder,hexo init create working path in current directory.
    • /path to your hexo/
      • node_modules
        • you modules here
      • _config.yml
        • the default configuration of your site
      • package.json
        • the information of installed package
      • scaffolds
        • template folder
        • When you create a new post,Hexo will base on scaffolds contents to create new post,for example:hexo new photo "My Gallery"
          • When you run the command,Hexo will try to search photo.md in scaffolds ,based on the content of photo.md to create your new post,here are some common objects of your new post:layout-布局,title-标题,date-文件建立日期
      • source
        • Used to store user resources,apart from _posts folder,Files/folders named starting with _ (underscore) and hidden files will be ignored.
        • _drafts
        • _posts
      • themes

Configuration

In _config.yml file to modify the most of you configuration。

配置 | Hexo

The configuration

My theme is Butterfly

  • git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly In your working path.
    • you can update themes by git pull
  • npm i hexo-theme-butterfly
    • directory will be installed in /path to your hexo/node_modules/hexo-theme-butterfly/ (I don’t recommend to install theme in this way)
    • Update commandnpm update hexo-theme-butterfly
  • First, modify the theme of _config.yml in the Hexo directory to butterfly.
  • Install pug and stylus rendering:npm install hexo-renderer-pug hexo-renderer-stylus --save
  • Create _config.butterfly.yml in the hexo root directory, and copy _config.yml of the theme directory to _config.butterfly.yml.
    • Just configure _config.butterfly.yml later

Front-matter

Front-matter is the area separated by — at the top of the markdown file, which is used to specify the variables of individual files.

  • Similar to custom variables
  • Page Front-matter is used to configure you page
  • Post Front-matter is used to configure you post
  • The content of page front-matter is similiar to the below
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---

Page Front-matter

You can find details in Page Front-matter.

Post Front-matter

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
---

You can find details in Post-Front-matter.

Bookmark page

  • Go to the root directory of your Hexo blog
  • run command hexo new page tags
  • Find the file source/tags/index.md
  • Modify this file as follows:
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
orderby: random
order: 1
---

category page

  • Go to the root directory of your Hexo blog
  • run commandhexo new page categories
  • You will find the file ‘/source/categories/index.md’
  • Modify the file as follows:
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

Links

  • Go to the root directory of your Hexo blog
  • run command hexo new page link
  • You will find the file ‘/source/link/index.md’
  • Modify the file as follows:
---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---

In source/_data in the Hexo blog directory (if there is no _data folder, please create it yourself), create a file link.yml.

You can find details in here. Of course you can also read my other article.

Configure live2d

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

Details here.

Some commonly used hexo commands

  • hexo init - Create a hexo runtime framework in the current folder.
  • hexo init name - Create a new name folder in the current folder as the hexo running framework
  • hexo new layout "title" - Create a new post, if there is no layout, use the default layout (default is post).
  • hexo has three default layouts post/page/draft, you can specify the default layout by modifying the default_layout parameter in _config.yml.
    * The page exists in the form of a folder, and the md file in the page folder is the rendering of the corresponding page.
    * post/page/draft can be modified by entering Front-Matter in the Scaffold folder.
  • Custom other layouts are the same as post, and will be stored in the /scaffolds folder.
  • hexo new page -p about/me "About me" - Create a /source/about/me.md file, and the title in Front Matter is also “About me”
  • hexo generate - Generate static files, which can be abbreviated as hexo g
  • hexo deploy - Deploy the website, which can be abbreviated as hexo d
  • hexo server - Start the service locally
  • hexo clean - Clear cache and static files
  • hexo list <type> - List site information

Add waline to you site.

Add message board

  • hexo new page "messages" will generate a messages folder in \your root directory\source\, just modify index.md
  • Refer to the waline tutorial official help document

Add a music interface

Thanks to [Anzhiyu](https://anzhiy.cn/posts/c3d3.html#Online experience) and Ye Luosenhai provides ideas.

Modify your hexo root directory/source/music/index.md file, modify Front-matter as follows.

---
title:
type: music
aplayer: true
top_img: false
comments: false
aside: false
---
  • In\the path to your hexo \node_modules\hexo-theme-butterfly\layout\includes\page create file eomusic.pug
  • The modified content is as follows
#eoMusic-page
eo-music.aplayer.aplayer-withlrc.aplayer-withlist(data-id=歌单id, data-server=平台, data-type='playlist', data-fixed='false', data-autoplay='false')
  • Then add eomusic.pug in themes\butterfly\layout\page.pug.
  • Add and delete, + means increase, - means decrease, the following code mainly adds two lines for your own attention
  • The function is to introduce eomusic.pug layout when the type of the front-matter of the page is music.
block content
#page
- if top_img === false
h1.page-title= page.title
case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/mylink.pug
+ //- 音乐页
+ when 'music'
+ include includes/page/eomusic.pug
  • add css styles
  • Create a new music.css in your hexo root directory\node_modules\hexo-theme-butterfly\source\css, copy the following style and paste it in.
#eoMusic-page {
margin-top: -60px;
}
#eoMusic-page #eo-music {
display: flex;
flex-direction: row-reverse;
background: rgba(0, 0, 0, 0);
border: none;
box-shadow: none;
}
.bgCls {
filter: blur(63px);
opacity: 0.6;
background-repeat: no-repeat;
background-size: cover;
}

/* 信息 */
#eo-music .aplayer-body {
width: 40%;
height: 75vh;
}
#eo-music .aplayer-pic {
float: none;
width: 180px;
height: 180px;
border-radius: 12px;
margin: auto;
left: 0;
right: 0;
}
#eo-music .aplayer-info {
margin: 0 20px 0 20px;
border-bottom: none;
}
#eo-music .aplayer-info .aplayer-music{
text-align: center;
height: auto;
margin: 15px;
}
#eo-music .aplayer-info .aplayer-music .aplayer-title, #eo-music .aplayer-info .aplayer-music .aplayer-author{
font-size: 2rem;
font-weight: bold;
color: #fff;
}
#eo-music .aplayer-info .aplayer-lrc{
height: calc(100vh - 660px);
margin-top: 80px;
-webkit-mask-image: linear-gradient(to bottom,#000,#000,#000,#000,#000,#000,#000,#000,#000,#000,#0000,#0000);
}
#eo-music .aplayer-info .aplayer-lrc p{
font-size: 14px;
color: #fff;
}
#eo-music .aplayer-info .aplayer-controller{
position: fixed;
max-width: 1500px;
margin: auto;
left: 0px;
right: 0px;
bottom: 50px;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 160px 0px 150px;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-thumb {
-webkit-transform: none;
transform: none;
background: #fff !important;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-played {
background: #fff !important;
}
/* 控制器 */
#eo-music .aplayer-info .aplayer-time .aplayer-icon-back, #eo-music .aplayer-info .aplayer-time .aplayer-icon-play, #eo-music .aplayer-info .aplayer-time .aplayer-icon-forward {
display: inline;
position: fixed;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-menu {
display: none;
}
#eo-music .aplayer-info .aplayer-time {
position: absolute;
width: 100%;
bottom: 21px;
height: 0px;
display: flex;
justify-content: flex-end;
}
#eo-music .aplayer-info .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap {
bottom: 5px;
margin: auto;
left: 8px;
right: 0;
}
#eo-music .aplayer-info .aplayer-time .aplayer-time-inner {
margin-right: 18px;
margin-top: -8px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon {
width: 2rem;
height: 2rem;
margin-left: 15px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-back {
position: absolute;
left: 0;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-play {
position: absolute;
left: 40px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-forward {
position: absolute;
left: 80px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon path {
fill: #fff;
opacity: .8;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon path:hover {
fill: #fff;
opacity: 1;
}

/* 歌曲列表 */
#eo-music .aplayer-list {
width: 60%;
max-height: none !important;
height: 100%;
}
#eo-music ol {
max-height: 75vh !important;
/* height: 100%; */
padding-right: 25px;
}
#eo-music ol::-webkit-scrollbar-thumb {
background: rgb(0 0 0 / 20%);
}
#eo-music ol>li {
border-top: 1px solid rgb(233 233 233 / 0%);
font-size: 14px;
}
#eo-music ol>li span {
color: #fff;
}
#eo-music ol>li.aplayer-list-light {
background: rgb(255 255 255 / 20%);
border-radius: 6px;
}
#eo-music ol>li:hover {
background: rgb(255 255 255 / 20%);
border-radius: 6px;
}
#eo-music ol>li.aplayer-list-light .aplayer-list-cur {
display: none;
}
#eo-music ol>li span.aplayer-list-author {
opacity: .6;
}

/* **** 移动端样式 ***** */
@media screen and (max-width: 768px) {
/* 歌曲列表 */
#eo-music .aplayer-list {
position: fixed;
z-index: 1002;
width: 100%;
bottom: -76%;
left: 0;
background: var(--sidebar-bg);
height: auto;
border-radius: 15px 15px 0px 0px;
padding: 15px 0px;
}
#eo-music .aplayer-list.aplayer-list-hide {
bottom: 0% !important;
}
#eo-music ol {
max-height: 60vh !important;
padding-right: 0px;
}
#eo-music ol>li {
display: flex;
margin: 0 10px;
}
#eo-music ol>li span {
color: var(--font-color);
}
#eo-music ol>li span.aplayer-list-title {
width: 30%;
}
#eo-music ol>li.aplayer-list-light {
background: #33a673;
padding: 5px 20px;
border-radius: 10px;
}
#eo-music ol>li.aplayer-list-light span {
color: #fff;
}
#eo-music ol>li span.aplayer-list-title{
max-width: 55%;
width: auto;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
}
#eo-music ol>li span.aplayer-list-author {
position: absolute;
right: 10px;
width: auto;
max-width: 35%;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
}
#eo-music ol>li.aplayer-list-light span.aplayer-list-author {
right: 15px;
}
/* 歌词信息 */
#eo-music .aplayer-body {
width: 100%;

position: fixed;
margin: auto;
left: 0;
right: 0;
top: 100px;
/* height: auto; */
}
#eo-music .aplayer-info .aplayer-lrc {
margin-top: 40px;
/* height: 400%; */
height: auto;
max-height: 200%;
min-height: 100%;
-webkit-mask-image: linear-gradient(to bottom,#000,#000,#000,#000,#0000,#0000);
}
#eo-music .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
color: #33a673;
}
/* 控制按键和进度条 */
#eo-music .aplayer-info .aplayer-controller {
bottom: 100px;
}
#eo-music .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 30px;
}
#eo-music .aplayer-info .aplayer-time {
bottom: -40px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-time-inner {
position: absolute;
width: 100%;
margin-right: 0;
margin-top: -33px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-dtime {
position: absolute;
right: 30px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-ptime {
position: absolute;
left: 35px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-back {
margin: auto;
right: 110px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-play {
margin: auto;
right: 0;
left: 0;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-forward {
margin: auto;
left: 110px;
right: 0;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-order {
position: absolute;
left: 22px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-loop {
position: absolute;
right: 25px;
}
#eo-music .aplayer-info .aplayer-time .aplayer-icon-menu {
display: inline;
position: absolute;
right: 25px;
top: -90px;
}
}
  • Enter the root directory configuration file _config.butterfly.yml
  • Find the head of the inject section and modify it as follows
inject:
head:
- <link rel="stylesheet" href="/css/music.css">
  • Add music.js
  • In \the path to your hexo\node_modules\hexo-theme-butterfly\source\js to create music.jsThen copy the following style and paste it in.
  • The code has made some changes, and it is basically no problem after testing.
    • Generally, document.getElementById('footer').style.display = 'center'; the former is flex,footer has tendency to confuse, a litter bit of chaotic.
var urlinfo = window.location.pathname;
var overtime;

qq_musicpage();
function qq_musicpage() {
if (urlinfo != '/music/') {
document.querySelector("#web_bg").classList.remove("bgCls");
document.getElementById('web_bg').style.backgroundImage = 'none';
document.getElementById('footer').style.display = 'center';
document.getElementsByClassName('pace-running')[0].style.background = 'var(--global-bg)';
document.getElementsByTagName('body')[0].style.background = 'var(--global-bg)';

clearInterval(overtime);
}else {
document.querySelector("#web_bg").classList.add("bgCls");
document.getElementById('footer').style.display = 'none';
document.getElementById('content-inner').style.background = 'none';
document.getElementById('page').style.margin = 'auto';
document.getElementById('page').style.background = 'rgba(0,0,0,0)';
document.getElementsByTagName('body')[0].style.background = '#0d0d0d';

overtime = window.setInterval('setOverTime()', '500');
}

document.body.onmousedown = function(event) {
if (event.button == 0) {
var targ = event.target;
var tname = targ.tagName;
var tClassname = targ.classList[1];
var tidname = targ.id;

if (urlinfo == '/music/'){
if (tname == 'svg') {
var tsvg = targ.parentNode;
if(tsvg.classList[1] == 'aplayer-icon-menu' || tClassname == 'aplayer-icon-menu') {
setTimeout(function() {
document.getElementById('menu-mask').style.display = "block";
document.getElementById('menu-mask').style.animation = "0.5s ease 0s 1 normal none running to_show";
}, 100);
}
}else if (tname == 'path') {
var tpath = targ.parentNode;
var tpath2 = tpath.parentNode;
if(tpath2.classList[1] == 'aplayer-icon-menu') {
setTimeout(function() {
document.getElementById('menu-mask').style.display = "block";
document.getElementById('menu-mask').style.animation = "0.5s ease 0s 1 normal none running to_show";
}, 100);
}
}

if (tidname == 'menu-mask') {
var domHtml = domAplyerList();
domHtml.classList.remove("aplayer-list-hide");
}
}
}
}
}
function domAplyerList() {
var htmldom = document.getElementById('eo-music');
var htmldom2 = htmldom.childNodes[3];
return htmldom2;
}
function setOverTime() {
imgs = document.getElementById('eo-music').getElementsByClassName('aplayer-pic')[0].style.backgroundImage;
document.getElementById('web_bg').style.backgroundImage = imgs;
}
  • Enter the root directory configuration file _config.butterfly.yml
  • Find the bottom of the inject section and modify it as follows
inject:
head:
- <link rel="stylesheet" href="/css/music.css">
bottom:
- <script src="/js/music.js"></script>

You’re done!

How to add movie interface

Plugin here.

# 根目录执行以下命令
# npm install hexo-douban --save
# 将下面的配置写入站点的配置文件 _config.yml
douban:
id: xxxx # 你的豆瓣ID
builtin: false # 是否将hexo douban命令默认嵌入进hexo g、hexo s,使其自动执行hexo douban 命令。默认关闭。当豆瓣条目较多时,建议关闭。
item_per_page: 10 # 每页展示的条目数,默认 10 。
meta_max_line: 4 # 每个条目展示的详细信息的最大行数,超过该行数则会以 "..." 省略,默认 4 。
customize_layout: page # 自定义布局文件。默认值为 page 。
book:
path: books/index.html # 生成页面后的路径,默认生成在 //yourblog/books/index.html 等下面。如需自定义路径,则可以修改这里。
title: 'This is my book title' # title: 该页面的标题。
quote: 'This is my book quote' # 写在页面开头的一段话,支持html语法。
option: # 该页面额外的 Front-matter 配置,参考Hexo 文档。无特别需要,留空即可。
movie:
path: movies/index.html
title: 'This is my movie title'
quote: 'This is my movie quote'
option:
game:
path: games/index.html
title: 'This is my game title'
quote: 'This is my game quote'
option:
song:
path: songs/index.html
title: 'This is my song title'
quote: 'This is my song quote'
option:
timeout: 10000
# 展示帮助文档
hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
-b, --books Generate douban books only
-g, --games Generate douban games only
-m, --movies Generate douban movies only
-s, --songs Generate douban songs only
## 安装了hexo douban之后,不能用hexo d,因为hexo douban跟hexo deploy 的前缀都是hexo d。

The official project README is relatively clear. After grabbing your id, configure the homepage. Before hexo douban, remember to hexo clean. There may be crawling failures, and you can grab it after a few more tries.

Replace default icon (Font awesome)

  • Open iconfont, login account.
  • Choose the icon you need, put it in the library, and add it to the item in the shopping cart
  • On the project details page, click Font class, click no code yet, and click generate text. The website will automatically generate a CSS link, copy the corresponding link.
  • Inject css snippets in the theme configuration file inject>head
  • Fill in the icon where it needs to be used, such as Menu, and the format of the image is iconfont icon name.