开源作业总结报告

针对本次开源作业的总结

博客主题和选取原因

我选择了Hexo的icarus主题作为生成博客的工具，其主要有以下原因：

• Hexo使用node.js，生成速度超快，几百个页面可以瞬间完成渲染。
• 无论是在本地测试还是部署到Github pages都十分方便
• 支持markdown的所有功能，还能整合多种插件，具有极强的可扩展性。
• icarus是一个比较成熟的主题，可修改空间很大，可支持移动端，可以增加多种多样的功能且有文档支撑非常方便。

页面布局和设计思路

首页

分为三栏，分别展示作者信息，目录，归档，最新文章，标签统计信息，以及所有文章缩略的信息。

文章详情

展示文章笔记，也包含发表时间，更新时间等信息

目录页

归档页

标签页

功能实现和技术选择

• 在windows11下进行

安装Hexo

• 首先需要安装nodejs和git，接着使用npm进行安装hexo的包

  $ npm install hexo-cli -g

• 初始化一个博客项目

  $ hexo init blog
  $ cd blog

• 启动服务
  默认端口为4000，即访问localhost:4000

  $ hexo server

选择安装主题

可以在hexo.io下找到想要的模板，这里选择的模板是icarus

• 将选择的模板拉取到blog/themes目录下面
• 安装依赖并设置hexo的主题为icarus

  $ npm install hexo-theme-icarus
  $ hexo config theme icarus

• 生成新的post.md文件

  $ hexo new  "my post"

• 启动服务

  $ hexo server

部署到github

• blog仓库与远程仓库绑定

  $ git remote remove origin
  $ git remote add origin 你的仓库地址

• 安装部署插件

  $ npm install hexo-deployer-git --save

• 生成静态文件

  $ hexo g

• 部署到远程，修改_config.yml文件，并新建远程仓库，其名称为kxkllday.github.io

  url: http://kxkllday.github.io
  root: /
  deploy:
    type: 'git'
    repo: https://github.com/kxkllday/kxkllday.github.io.git
    branch: main

• 部署

  $ hexo d

遇到的问题和解决办法

图片显示异常，没有办法显示出来

方法1，但在这里没用

• 安装相关插件

  $ npm install hexo-asset-image --save

• 修改_config.yml配置

  post_asset_folder: true

  将图片存在与md文件同名的文件夹下面

首页一开始没有办法仅仅展示部分缩略信息

在md文件在front-matter中使用如下代码分割开来需要展示在首页的缩略信息以及不展示的更多信息

<!-- more -->