HiHi 的 Blog
0%

hexo Blog搭建

发表于 更新于 分类于 阅读次数： Valine：

hexo基本操作

  • $ hexo \ c –> hexo\ clean $ 清空缓存
  • $ hexo\ g –> hexo\ generate $ 生成网站静态文件到默认设置的public文件夹
  • $ hexo\ d –> hexo\ deploy$ 自动生成网站静态文件，并部署到设定仓库
  • $ hexo\ s –> hexo\ server $ 启动本地服务器

主题配置

  1. 下载主题文件到 themes 文件夹

  2. 修改站点配置文件 _config.yml

    找到 $ themes $ 这一行，修改为对应主体名字

    image

部署网站

  1. 修改站点配置文件 _config.yml

    1
    2
    3
    4
    5
    #配置部署
    deploy:
      type:  git # 规定
      repository:  https://github.com/0Jmins0/Jmins0.github.io.git #仓库地址
      branch:  main #规定
    1
    2
    3
    #配置url(否则部署到github上会显示不出来主题)
    url:  https://0jmins0.github.io/Jmins0.github.io
    root:  /Jmins0.github.io/

  2. 根目录 $ hexo\ g + hexo\ d$ 部署到网站

加入数学插件

  1. 下载 mathjax

    1
    npm install hexo-math --save

  2. 修改主题中的配置文件 _config.yml 

    1
    2
    enable: true
    per_page: true

  3. 在文章中打开 mathjax 开关

    1
    2
    3
    4
    ---
    title: hello word
    mathjax: true
    ---

设置头像

  1. 在主题配置文件 _confid.yml中 找到 avatar 去掉注释启用
  2. round 设置为 true ——> 圆形头像
  3. 将 next/images/avatar.gif 替换为个人头像

设置标题、作者、连接

打开根目录的配置文件，位置如下：

1
2
3
4
5
6
7
title: HiHi 的 Blog #标题
subtitle: '' #副标题 
description: '欢迎来到我的小站！' #描述
keywords:
author: HiHi # 作者
language: zh-CN #语言
timezone: '' # 时区

设置侧边栏社交链接

打开主题配置文件，将相应连接启用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/0Jmins0/Jmins0.github.io || fab fa-github
  E-Mail: 3234252073@qq.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

首页设置阅读全文

方法一：在主题配置文件搜索auto_except ，将 enable 改为 true 。

方法二：在文章中间添加 <!--more-->，则语句前面显示在预览中。

添加动态背景

  1. 打开主题配置文件，搜索canvas 找到 3D library

  2. 下载需要的依赖，到 next/source/lib 文件夹，并改名为 three

  3. 下载依赖https://github.com/theme-next/theme-next-canvas-nest改名为canvas-nest

  4. 修改主题配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # JavaScript 3D library.
    # Dependencies: https://github.com/theme-next/theme-next-three
    three:
      enable: false
      three_waves: false
      canvas_lines: false
      canvas_sphere: false

    canvas_nest:
      enable: true

添加评论功能

  1. 登录 leanCloud ，并创建 APP。

  2. 找到 数据存储——结构化数据 创建Class 命名为Comment

  3. 找到设置-应用凭证 分别复制AppID AppKey到配置

  4. 修改主题配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Valine
    # For more information: https://valine.js.org, https://github.com/xCss/Valine
    valine:
      enable: true
      appid: w0hgFFpgYXDb0kYsJiqe3NCG-gzGzoHsz
      appkey: T65gVRVHNmIpYFP6QAUXbWB8
      notify: false # Mail notifier
      verify: false # Verification code
      placeholder: Just go go # Comment box placeholder
      avatar: mm # Gravatar style
      guest_info: nick,mail,link # Custom comment header
      pageSize: 10 # Pagination size
      language: # Language, available values: en, zh-cn
      visitor: true # Article reading statistic
      comment_count: false # If false, comment count will only be displayed in post page, not in home page
      recordIP: false # Whether to record the commenter IP
      serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
      #post_meta_order: 0

  5. 只在文章界面设置评论功能，关闭标签页等页面的评论功能

    1
    comments: false//加在对应页面 .md文件的front matter中

添加搜索功能

添加插入图片功能

  1. 在博客根目录 _config.yml中，修改 post_asset_folder:false为 true

  2. 在博客根目录打开 git bash here 下载 ：npm install hexo-asseet-image --save

  3. 修改插件

    • 路径：根目录 –>node_modules –> hexo-asset-image –>index.js
    • 第58行，修改
      • $(this).attr('src', config.root + link + src);
      • 改成$(this).attr('src', src);

  4. 在和文章并列的地方新建和文章同名的文件夹，并在里面存放要引用的照片

  5. 引用方法：![标注](test.jpg)