aoaohexo-all-butterfly

aoaoIT技术管理 > 脚本开发运营 hexo www webserver

发布时间 : 2023-06-01 23:28

阅读 :

1.hexo安装

1.1 Windows hexo 安装

1.1.1 安装Nodejs & Git

NODEJS地址：Nodejs官网nodejs.org 下载 | Node.js 中文网 (nodejs.cn)
GIT地址：Git (git-scm.com)

ℹNodejs下载版本有LTS、Current，建议使用：LTS:Long Time Support,Current是当前最新版本

npm install -g cnpm –registry=https://registry.npm.taobao.org

1.1.2 安装hexo

# C:\Users\focus>npm install hexo-cli -g
# C:\Users\focus>hexo -v
网络不行执行
# npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g

ℹnpm install -g 全局安装文件在： C:\Users\focus\AppData\Roaming\npm\node_modules\hexo-cli

Tips:npm install -g 全局安装文件在： C:\Users\focus\AppData\Roaming\npm\node_modules\hexo-cli

Tips:npm install -g 全局安装文件在： C:\Users\focus\AppData\Roaming\npm\node_modules\hexo-cli

1.1.3 初始化hexo

执行hexo init

hexo init
hexo clean #清除缓存
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo n "aoao第一篇博客" == hexo new "aoao第一篇博客" #新建文章

1.1.4 下载主题

next:next

butterfly:🦋butterfly

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2.Github集成免费发布网站

2.1 域名注册（可选步骤）

一年30到80不等，我腾讯云注册的 week.wiki

2.2 Github注册及创建仓库

hwmail.github.io

2.3 配置本地网站部署到Github

git config --global user.name "hwmail"
git config --global user.email "hwmail@hwmail.vip"
ssh-keygen -t rsa -C "hwmail@hwmail.vip" 回车 回车 回车
打开复制"C:\Users\hwmail\.ssh\id_rsa.pub"
粘贴到Github设置-SSH Key
执行测试是否成功：ssh git@github.com

修改网站目录下_config.yml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: git@github.com:hwmail/hwmail.github.io.git
  branch: master

npm install hexo-deployer-git --save
hexo clean && hexo g && hexo d && hexo s

2.4 绑定域名配置域名指向

2.4.1 域名记录配置

CNAME类型、主机记录@、值hwmail.github.io

CNAME类型、主机记录www、值hwmail.github.io

2.4.2 新建一个CNAME文件

“D:\hexo\source\CNAME”

week.wiki

2.4.3 Github上面绑定域名

Custom domain

week.wiki 点 Save

3.Butterfly主题配置

3.1 菜单栏定制

电影菜单：

官网：https://github.com/mythsman/hexo-douban
$ npm install hexo-douban --save

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件)

douban:
  id: 162448367
  book:
    path: books/index.html
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    path: movies/index.html
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    path: games/index.html
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000

豆瓣ID获取 https://www.zhihu.com/question/19634899

启动命令：hexo clean && hexo douban -m && hexo g && hexo deploy

menu:
   首页: / || fas fa-home
   分类: /categories/ || fas fa-folder-open
   标签: /tags/ || fas fa-tags
   归档: /archives/ || fas fa-archive
   生活：|| fas fa-list:
     Music: /music/ || fas fa-music
     Movie: /movies/ || fas fa-video
   友链: /link/ || fas fa-link
   关于我: /about/ || fas fa-heart

# 新建分类页
$ hexo new page "categories"
# 新建标签页
$ hexo new page "tags"
# 新建关于我
hexo new page "tags"
  194  hexo new page "categories"
  195  hexo new page "pages"
  196  hexo new page "tags"
  197  hexo new page "about"
  198  hexo new page "archives"
  199  hexo new page "link"
  200  hexo new page "list"
  201  hexo new page "music"
  204  hexo new page "movies"

# 修改categories-index.md type
title: categories
date: 2022-11-27 21:15:24
type: categories

3.2 头像区定制

    # Avatar (頭像)
avatar:
  # img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  img: /img/favicon.png
  effect: false
  #  按钮
    button:
      enable: true
      icon: fab fa-github
      text: 内站hwmail.vip
      link: https://hwmail.vip
  # 描述定制
              card_author:
    enable: true
    description: 生活、IT笔记、其它

3.3 首页面定制

# Loading Animation (加載動畫)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:
=== 
# The banner image of home page
index_img: /img/coco.jpg

增加首页打字效果
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Effect Speed Options (打字效果速度參數)
  startDelay: 300 # time before typing starts in milliseconds
  typeSpeed: 150 # type speed in milliseconds
  backSpeed: 50 # backspacing speed in milliseconds
  # loop (循環打字)
  loop: false
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  
  source: false
  
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
     - 任何事物都是两面的、没有绝对的对绝对的错。
     - hehe ha ha。

3.4 页脚配置

footer:
  owner:
    enable: true
    since: 2010
  custom_text:联系方式QQ:2516726319 邮箱：hi@week.wiki 邮箱2：jlwu@vip.163.com
  copyright: false # Copyright of theme and framework
  
  打开themes\\layout_partial\footer.ejs修改。

3.5 开启打赏功能

reward:
  enable: true
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: wechat
    - img: /img/alipay.jpg
      link:
      text: alipay

3.6 网站统计

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 2005/10/10

3.7 增加搜索功能

local_search:
  enable: true
  preload: true
  CDN:

3.8 SEO 优化

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://week.wiki
# permalink: :year/:month/:day/:title/
permalink: posts/:hash/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

3.9 站点地图

$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

sitemap:
    path: sitemap.xml
    tag: false
    category: false
baidusitemap:
    path: baidusitemap.xml

3.10 配置网站信息

# Site
title: week.wiki
subtitle: ''
description: ''
keywords:
author: aoao
email: jlwu@vip.163.com
language: zh-CN
timezone: ''

3.11 hexo多层分类

父子分类：

categories:
- 后端
- 笔记

并列分类：

categories:
- [后端]
- [笔记]

同一分类不同子类

categories:
- [学习,html]
- [学习,http]

3.12 hexo公告栏

  card_announcement:
    enable: true
    content: 1、网站建中，有什么意见建议请联系
             2、我的邮箱jlwu@vip.163.com

3.14 友情链接友链

1、hexo new page link

2、vi /sources\link\index.md

---
title: tags
date: 2022-09-09 14:31:10
type: "link"
---

3、新建 source/_data/link.yml

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架
 
- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

3.15 增加emoji表情插件

   安装插件： npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

    githubEmojis:
      enable: true
      className: github-emoji
      inject: true
      styles:
      customEmojis:

3.16 分类导航

一、首先是分类条，在themes/butterfly/layout/includes/处新建文件categoryBar.pug

3.17 代码框展开/关闭

修改主题配置文件_config.butterfly.yml。中的highlight_shrink属性。

highlight_shrink: true #代码框不展开，需点击 '>' 打开

    1

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码。

    true 全部代码框不展开，需点击>打开
    false 代码框展开，有>点击按钮
    none 不显示>按钮

3.18 文章置顶

已经支持文章置顶功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

3.19 文章封面

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:
  - /img/p1
  - /img/p2
  - /img/p3

3.20 动态彩带

canvas_fluttering_ribbon:
  enable: true
  mobile: true # false 手机端不显示 true 手机端显示

4. hexo layout 布局

hexo\scaffolds\post.md

title: {{ title }}
date: {{ date }}
cover: /img/music1.jpg
top: 99
categories:
- 一级
- 二级
tags: [t1,t2]

description: 摘要

推荐手动截取文章内容，在首页显示。在想要截取的地方添加
<!--more -->

5.hexo聊天评论系统

5.1 hexo live chat system

crisp live系统：https://crisp.chat/zh/

theme configure
chat_btn: true
chat_hide_show: true

打开crisp官网并注册账号。找到 【设置】->【网站设置】->【设置说明】，找到你的网站ID。

# crisp
# https://crisp.chat/en/
crisp:
  enable: true
  website_id: xxxxxxxx

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xieaoao@qq.com QQ:1296454177