博客分类

简介

博客就是一个用于发表文章，供网友阅读、留言的网站

博客类型

  1. 静态博客
    • 静态博客只能展示文章内容，无法与读者进行交互
  2. 动态博客
    • 不止可以展示静态文章，也可以添加各种交互功能，根据读者的操作展示不同内容

搭建方式

  1. 代码搭建
    • 通过博客框架代码实现博客
  2. 博客平台
    • 通过博客平台创建博客账户

静态博客搭建

简介

  • 使用的技术
    • 博客框架 Hexo
    • 博客主题 Butterfly
    • 部署平台 GitHub
  • 技术说明
    • 博客框架 可以快速创建一个博客所具有的相关功能的代码框架
    • 博客主题 可以为所创建的博客网站设置展现方式
    • 部署平台 将博客网站放在服务器或相关平台，才可以被所有网友访问到

搭建

GitHub配置

GitHub pages 静态页面有两种创建方式

  1. 用户 GitHub pages
    • 特点
    • 配置
      • 新建仓库
      • 仓库名称：xxx.github.io
        • xxx：github的用户名
      • 点击仓库的设置
        • 选择【代码和自动化】下的【页面】
        • Code and automation——pages
        • 选择代码所在分支
        • 保存
  2. 仓库 GitHub pages
    • 特点
    • 配置
      • 新建仓库
      • 仓库名称：yyy
        • xxx：github的用户名
        • yyy：仓库名称
      • 点击仓库的设置
        • 选择【代码和自动化】下的【页面】
        • Code and automation——pages
        • 选择代码所在分支
        • 保存

博客框架 Hexo

  1. 环境和工具

    • Node.js
    • git
    • hexo-cli

  2. 安装

    • Node.js
    • git
    • hexo-cli
      • 官网：https://hexo.io/zh-cn/
      • 通过安装的 Node.js 中包含的 npm 包管理工具下载 hexo-cli
      • npm i hexo-cli -g

  3. 搭建 Hexo 相关命令

    1. 初始化创建 Hexo 相关文件
      hexo init
    2. 打包博客内容
      hexo g
    3. 本地服务器中预览
      hexo s
      1. 指定临时端口：hexo s -p 端口号
    4. 其他命令
      • 清除缓存和生成的文件
        hexo clean
      • 将打包代码发布到github
        hexo d
      • 提交搜索信息
        hexo algolia

  4. 配置 Hexo

    1. Hexo 配置文件 _config.yml 中，url 属性要设置为 gitHub pages 的完整路径，否则样式和js应用不上

博客主题 Butterfly

  1. 安装

  2. 配置到 Hexo

    • 打开Hexo配置文件 _config.yml
    • 修改参数 theme 的值为 butterfly
    • theme: butterfly

GitHub平台

  1. 创建 GitHub 仓库

    • 仓库名称必须为 GitHub 账户登录身份 + github + io
    • xxxx.github.io

  2. 提交博客代码到 GitHub 仓库

    • 提交的代码是在 Hexo 框架中 public 目录下的所有代码
    • public 目录的生成方式，是调用 hexo 指令打包生成的部署文件
    • 生成命令：hexo d

使用博客

配置 Hexo

使用本地图片

  • _config.yml 文件下，修改 post_asset_folder 为 true
  • post_asset_folder: true
  • 创建博文时候 hexo new 博文 ，会在博文相同目录 _posts 下，生成同名目录，图片即可放在此同名目录中
  • 图片引用使用 标签插件 相关代码进行展示
    {% asset_img [class names] slug [width] [height] [title text [alt text]] %}

配置博客

Butterfly配置文档

  • 博客功能的相关配置，在 Butterfly GitHub上有详细说明
  • 在 GitHub 中找到文档 Butterfly Docs
  • 文档目录：Butterfly配置的所有分类
  • 目录：Butterfly配置分类中，对应分类记录的相关功能的具体配置

添加搜索功能

  • 查看 Butterfly 文档中，主题配置2 目录，搜索系统
  • 创建托管搜索引擎 Algolia 账户
  • 登陆后从官网首页点击 Dashboard 进入控制面板
  • 创建 index
  • 获取 API key 相关参数

  • 修改 hexo 站点根目录下的 _config.yml，添加相关代码。
    • 注意：permalink 需改为 path，搜索到文章即可打开相应博文，否则需要修改源码
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      algolia:
        appId: "xxxx"
        apiKey: "xxxxxxxxxxxxxxxxxx"
        adminApiKey: "xxxxxxxxxxxxxxxxxxx"
        chunkSize: 5000
        indexName: "xxxxx"
        fields:
          - content:strip:truncate,0,500
          - excerpt:strip
          - gallery
          - path[permalink]
          - photos
          - slug
          - tags
          - title
  • 安装 hexo-algoliasearch 模块，用来收集站点内容发送给 Aloglia
    npm i hexo-algoliasearch -S
  • 配置 _config.butterfly.yml ， algolia_search 配置部分，将enable 改为true
    1
    2
    3
    4
    algolia_search:
      enable: true
      hits:
        per_page: 6
  • hexo g 进行打包
  • hexo algolia 给algolia提交搜索信息
  • 发布
  • 注意事项
    1. 本地服务可以正常显示搜索框，但是部署到服务器就不能显示，public/css/index.css 文件中少了相关搜索框样式。我的做法是将本地显示的样式，手动添加到 public/css/index.css 文件中。此种做法可以解决问题，但是不合理
    2. 使用命令 hexo clean 清除了生成的文件和缓存，再生成新的 public 文件，再本地预览 hexo s。public/css/index.css 文件中生成了正常的搜索框样式

自定义样式

可以自定义代码样式和页面所有样式（比如修改了页面大小）
source 目录下创建的文件夹，打包后的项目根目录会生成相同目录，并且具有目录中的相同文件

参考资料 参考资料
  1. 修改 hexo 配置文件 _config.yml 的 highlight 选项
  2. 设置 butterfly 配置文件 _config.butterfly.yml 的 highlight_theme:false
  3. source 目录下创建 self 文件夾
  4. self 文件夹下创建 .css 样式文件
  5. butterfly 配置文件添加 inject 选项
    • 文件路径从域名之后开始， / 表示域名
      1
      2
      3
      4
      inject:
        head:
          - <link rel="stylesheet" href="/library/self/Kimbiedark.css">
          - <link rel="stylesheet" href="/library/self/my.css">

自定义侧边栏

参考资料
  1. source 目录下创建 _data 文件夹
  2. _data 文件夹下创建 widget.yml 文件
  3. 文件中内容根据上面参考资料填写
  4. HTML选项内容
    1. 可以直接书写 HTML标签
    2. 也可以使用 script 标签引入JS脚本，使用JS脚本生成HTML标签字符串，字符串使用 document.write() 函数进行显示
      1
      2
      3
      4
      5
      6
      top:
        - class_name:
          id_name:
          name: 常用笔记
          icon: fas fa-heartbeat
          html: <script type="text/javascript" src="/library/self/everyblog.js"></script>
      1
      2
      3
      4
      5
      6
      7
      8
      var my_div = "<div class='my_everyblog_a'>"
      for(i of my_blog){
          var my_a = `<a target="_self" href="${i.url}">${i.name}</a>`
          var my_br = "</br>"
          my_div = my_div + my_a + my_br
      }
      my_div += "</div>"
      document.write(my_div)
  5. 生成的 HTML 标签定义clss属性，在自定义的css文件中给其定义样式即可

博客文章

新建博客文章

  • hexo new 文件名
    • 博客文档在 _posts 目录下生成
  • hexo new page 目录名
    • 在 source 目录下新建目录，并在目录中生成 index.md 文件
    • 分类页：hexo new page categories
    • 标签页：hexo new page tags
    • 友情链接：hexo new page link