# blog-page

**Repository Path**: kevinlu98/blog-page

## Basic Information

- **Project Name**: blog-page
- **Description**: 一个高端好看个人博客页面
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-04
- **Last Updated**: 2023-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一套还可以的个人博客前端页面

## 介绍

### 背景介绍

> 因为最近准备出一套用Java从零到一的个人博客视频教程，就写了一套前端页面给教程用，当然大家喜欢的话也可以拿去自己用，纯静态，响应式的，不过只做了手机和电脑，平板没有处理，到时大家也可以做成其它博客的主题之类的都可以

### 所用框架

- 引了bootstrap依赖，本来是想用bootstrap的栅格系统和一些其它组件呢，后来直接用媒体查询处理了响应式，bootstrap在项目中反而用的不多

- 关于博文的排版css我写了，就在`detail.css`这个文件里，如果大家用的话记得在文章的父容器加上id属性

- 字体图标用了`fontawesome4.7`，这套图标库大家应该都很熟悉了吧
- 代码高亮大家可以直接引用[prism.js](https://prismjs.com/)，因为大家可能需要的功能不一样，这里我就没加，大家根据需要自行下载

## 页面展示

- 首页

![https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/f1b3632062b64f34b5835ee7c5df06a4.png](https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/f1b3632062b64f34b5835ee7c5df06a4.png)

![https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/6a4640a8574d40bfb88bb0fd02bd74ec.png](https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/6a4640a8574d40bfb88bb0fd02bd74ec.png)

- 文章页(这里我没排版，但排版的css文件写好了，就在`detail.css`)里

![https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/2863c7c1cffa4872aedff701c1df7a31.png](https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/2863c7c1cffa4872aedff701c1df7a31.png)

![](https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/8934ac004f5e48439fc2b7f77dbed6d3.png)

- 分类列表

![https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/5907c1b886f54a12b0d86486acdba7a8.png](https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203204/5907c1b886f54a12b0d86486acdba7a8.png)

其它页面我就不一一列举啦，大家有需要下载就好