CHANSHIYU
GITHUBZERO
  • README
  • 時雨
    • 2017
      • 01 网站动态标题的两种方式
      • 02 RN App 外部唤醒踩坑记
    • 2018
      • 01 不一样の烟火
      • 02 Python 之禅
      • 03 Python 文件操作
    • 2019
      • 01 Aurora 食用指南
      • 02 Godaddy 域名找回记事
      • 03 一个接口的诞生
      • 04 SpringMVC 前后端传参协调
      • 05 主题集成友链访问统计
      • 06 Github Style 博客主题
      • 07 字符编码の小常识
      • 08 WSL 安装 Docker 实录
      • 09 Eriri comic reader
      • 10 Aurora 2.0
      • 11 jsDelivr 全站托管
      • 12 两年工作台变迁史
      • 13 春物
      • 14 一种优雅の笔记方式
    • 2020
      • 01 Telegram 电报机器人
      • 02 她的眼里有星辰
      • 03 文心雕龙
      • 04 软萌木子の有趣笔谈
      • 05 Telegram RSS 订阅频道
      • 06 水月雨银色飞船
      • 07 五年前旧照
    • 2021
      • 01 春宵苦短 2020
      • 02 风花
    • 2022
      • 01 小城新貌
      • 02 原神满级纪念
    • 2023
      • 01 2022 逆旅
      • 02 半透明背景图实现
      • 03 新年攒台海景房
  • 前端
    • JavaScript
      • 01 JavaScript 秘密花园
      • 02 JavaScript 正则技巧
      • 03 从浏览器解析 JS 运行机制
      • 04 Canvas 基础用法
      • 05 Blob Url And Data Url
      • 06 函数节流与函数防抖
      • 07 排序算法初探
      • 08 洗牌算法实现数组乱序
      • 09 正则匹配 match 和 exec
      • 10 正则匹配汉字
      • 11 JSX.Element vs ReactElement
      • 12 可选链与空值合并
      • 13 TypeScript 编码规范
      • 14 Typescript 中 interface 和 type 区别
      • 15 TypeScript 高级类型
      • 16 TypeScript 关键字
      • 17 TypeScript 映射类型
    • CSS
      • 01 Flex 弹性布局
      • 02 Position 定位
      • 03 CSS 逻辑属性
    • Node
      • 01 Node Tips
      • 02 七天学会 NodeJS
    • Note
      • 01 Note
      • 02 Code
      • 03 Snippets
      • 04 Git
    • React
      • 01 React Props Children 传值
      • 02 Use a Render Prop!
      • 03 React Hook
      • 04 React Hook 定时器
      • 05 Fetch data with React Hooks
      • 06 React 和 Vue 中 key 的作用
      • 07 useCallback 的正确使用方式
      • 08 useLayoutEffect 和 useEffect 的区别
      • 09 forwardRef 逃生舱
      • 10 React 条件渲染
    • Vue
      • 01 Vue Tips
      • 02 Vue 构建项目写入配置文件
      • 03 Vue 项目引入 SVG 图标
      • 04 Vue 一键导出 PDF
      • 05 动态可响应对象
      • 06 Vue 引入 SCSS
      • 07 Vue 路由权限控制
    • 实战系列
      • 01 WebSocket 心跳重连机制
      • 02 图片加解密二三事
      • 03 优雅实现 BackTop
      • 04 动态加载 JS 文件
      • 05 常用 DOM 方法比较
      • 06 AbortController 中断 fetch
      • 07 计算字符所占字节数
      • 08 Axios 自定义返回值类型
  • 后端
    • Java
      • 01 面向对象基本特征与原则
      • 02 Java 数据类型
      • 03 Java String
      • 04 Java 只有值传递
      • 05 Java final 与 static
      • 06 Java Object 通用方法
      • 07 Java 继承
      • 08 Java 反射
      • 09 Java 异常
      • 10 Java 容器
      • 11 Java 虚拟机
      • 12 Java IO
      • 13 Java HashMap
      • 14 Java List
      • 15 Java Stream
      • 16 Java 枚举
      • 17 Java 日期与时间
      • 18 Java fail fast
      • 19 Java BiFunction 和 BinaryOperator
    • 并发编程
      • 01 Java 并发
      • 02 synchronized
      • 03 volatile
      • 04 ReentrantLock
      • 05 ReadWriteLock
      • 06 StampedLock
      • 07 CompletableFuture
      • 08 ForkJoin
      • 09 ThreadLocal
      • 10 CountDownLatch
      • 11 ThreadPoolExecutor
      • 12 ExecutorService
      • 13 Atom 原子类
      • 14 BlockingQueue
    • 高效编程
      • 01 30 seconds of java8
      • 02 函数式替代 for 循环
      • 03 Java 字符串拼接
      • 04 单例模式的几种实现
      • 05 HashMap 排序
    • 理论概念
      • 01 Java Servlet
      • 02 Java 服务端分层模型
      • 03 经典排序算法
      • 04 LRU 缓存淘汰算法
      • 05 BloomFilter 判断元素存在
      • 06 Java HashMap 面试大全
      • 07 HTTP 状态码详解
      • 08 Cookie 和 Session
      • 09 基于消息队列的分布式事务解决方案
      • 10 微服务之所见
    • 实战系列
      • 01 AES CBC 加解密
      • 02 Magic 魔数获取文件类型
      • 03 获取请求 IP 地址
      • 04 Kaptcha 与数学公式验证码
      • 05 Netty 获取客户端 IP.md
      • 06 高性能无锁队列 Disruptor.md
      • 07 前后端接入阿里云盾
    • Linux
      • 01 Linux 文件权限系统
      • 02 Linux 常用软件安装
      • 03 CentOS 防火墙
    • MySQL
      • 01 MySQL
      • 02 SQL 语句 where 1=1
      • 03 truncate 和 delete
      • 04 事务
      • 05 关系模型
      • 06 Mybatis
      • 07 MySQL 查看数据库表详情
    • Nginx
      • 01 Nginx 指北
      • 02 nginx gzip 压缩
    • Note
      • 01 Vagrant
      • 02 Docker
      • 03 Lombok
      • 04 Swagger
      • 05 Redis
    • Spring
      • 01 Spring Boot
      • 02 Spring Validation
      • 03 Spring Data
      • 04 Spring 容器
      • 05 Spring AOP
      • 06 Spring Transactional 注解
      • 07 Spring Cloud Netflix
      • 08 Spring Cloud Alibaba
      • 09 Spring Security oAuth2
      • 10 Spring Boot 跨域解决方式
      • 11 Spring Boot 请求拦截
      • 12 Spring Boot 异步编程
      • 13 Spring Boot 定时任务
      • 14 Spring Boot 管理 bean
      • 15 Mybatis 逆向代码生成
      • 16 JWT
      • 17 JPA
      • 18 Apache Shiro
      • 19 Spring 异步请求
  • 书斋
    • ES6 标准入门
      • 01 变量声明与解构赋值
      • 02 语法的扩展
      • 03 数据类型与数据结构
      • 04 Proxy 和 Reflect
      • 05 异步编程 Promise
      • 06 Iterator 和 for of 循环
      • 07 Generator 函数
      • 08 Async 函数
      • 09 Class 类
    • JavaScript 设计模式
      • 01 基础知识
      • 02 设计模式(上)
      • 03 设计模式(下)
      • 04 设计原则和编程技巧
  • 纸函
    • 01 Interview
    • 02 Ceph
    • 03 动态规划
    • 04 Document.designMode
    • 2023-01-10
  • 万藏
    • 文档
      • 01 Git 文档
      • 02 Linux 命令大全
      • 03 七天学会 NodeJS
      • 04 Algorithms
    • 工具
      • 01 Nginx Config
      • 02 ProcessOn
      • 03 Flat Icon
      • 04 Regexper
      • 05 TempMail
      • 06 Carbon
由 GitBook 提供支持
在本页
  • 初始化环境
  • 替换站点标题和图标
  • 配置主题
  • 页面模板
  • 部署

这有帮助吗?

  1. 時雨
  2. 2019

01 Aurora 食用指南

Aurora 是一款动漫风格博客主题,基于 Vue 开发,使用开源的 Github Api 服务,开发至今一直以为主题无人问津,近来有人问起如何食用,故忙里偷闲摸一篇简单食用文档。

相较于 Wordpress 和 Typecho 等博客框架,Aurora 主题最大的优势就是简单轻量与免费,全部使用现有开源免费服务,相对稳定,也不怕 Github 跑路(笑),文章发布与更新也是相当简单,不需要操作服务器与数据库,对新人来说非常友好。

初始化环境

在食用 Aurora 主题之前,需先安装 Nodejs 和 Git 环境,这两步不必细说。环境安装完毕,由于 Aurora 使用 vue 开发,所以需要安装 vue-cli。

npm install -g @vue/cli-service-global

然后将主题 clone 到本地并安装依赖包:

# clone 主题
git clone git@github.com:chanshiyucx/aurora.git

# 进入主题目录
cd aurora

# 安装依赖包
npm install

# 本地预览
npm start

依赖包安装完毕,便可执行 npm start 本地预览效果,访问 http://localhost:8080/, 当然现在看到的是我的博客,接下来需要我们自定义主题。

替换站点标题和图标

首先修改站点标题和图标,替换主题目录 public/assets 下的图标资源,然后修改 public/index.html 的站点标题和描述,同时注意修改 manifest.json 标题。

配置主题

主题配置文件为根目录下 src/config.js,里面每个配置项皆有详细注释,这里对一些基本配置项做简要说明。

配置文章仓库

Aurora 使用 Github api 做后台数据托管。所以需要新建一个仓库来存放文章和一些自定义页面内容。这里新建一个仓库取名为 Blog 为例。

// github 用户名
username: 'chanshiyucx',
// 仓库地址
repository: 'blog',
// token 从中间任意位置拆开成两部分,避免 github 代码检测失效
token: ['0ad1a0539c5b96fd18fa', 'aaafba9c7d1362a5746c'],

配置 Leancloud

/**
 * leancloud 配置 【文章浏览次数】
 */
leancloud: {
  appId: 'b6DWxsCOWuhurfp4YqbD5cDE-gzGzoHsz',
  appKey: 'h564RR5uVuJV5uSeP7oFTBye'
}

LeanCloud 中国版 2019 年 10 月份后开始停止为不绑定自有域名的应用服务,所以需要将节点切换到国际版。

配置 Gitalk

/**
 * Gittalk 配置【评论功能】
 */
gitalk: {
  clientID: '864b1c2cbc4e4aad9ed8',
  clientSecret: '6ca16373efa03347e11a96ff92e355c5cea189bb',
  repo: 'Comment', // 你的评论仓库
  owner: 'chanshiyucx', // 你的 github 账户
  admin: ['chanshiyucx'], // 你的 github 账户
  distractionFreeMode: false // 是否开始无干扰模式【背景遮罩】
}

到此为止,所有主要的配置项皆已完成,剩下的几个配置项非常简单,相信你自己可以配置完善。

页面模板

文章模板

文章模板没有太多的格式约束,只需要在文章正文顶部加上封面配图即可,配图采用的是 markdown 的注释语法,所以并不会在正文里渲染,以后即使你更换博客主题,也不会影响内容的展示。

[pixiv: 41652582]: # "/IMAGES/bg/3.jpg"

由于博客的文章、友链、书单、关于、心情等内容都放在 issues 里,所以需要对它们进行区分,这里主要使用 issues 状态与 Labels 进行分类。

首先需要规定的是文章的 issues 状态都是 open 的,友链、书单、关于、心情页面的 issues 内容都是 closed 状态的。

新建文章的时候 Labels 表示文章标签,Milestone 代表文章的分类,同时在文章正文顶部使用 markdown 注释来设置文章封面图,如下所示:

Tips:通过给正文图片预设尺寸可以获得更流畅的图片加载效果,尺寸设置形如 ?vw=1920&vh=1080,举个栗子:

[预设尺寸](/IMAGES/bg.png?vw=1920&vh=1080)

心情模板

注意心情 issues 状态是 closed 的,且需要打上 Inspiration 的 Labels,其他不做约束。

友链模板

友链页面使用空行做分割,内容示例如下:

## 阁子

link: //newdee.cf/
cover: //i.loli.net/2018/12/15/5c14f329b2c88.png
avatar: //i.loli.net/2018/12/15/5c14f3299c639.jpg

书单模板

书单页面使用空行做分割,内容示例如下:

## ES6 标准入门

author: 阮一峰
published: 2017-09-01
progress: 正在阅读...
rating: 5,
postTitle: ES6 标准入门
postLink: //chanshiyu.com/#/post/12
cover: //chanshiyu.com/yoi/2019/ES6-标准入门.jpg
link: //www.duokan.com/book/169714
description: 柏林已经来了命令,阿尔萨斯和洛林的学校只许教 ES6 了...他转身朝着黑板,拿起一支粉笔,使出全身的力量,写了两个大字:“ES6 万岁!”(《最后一课》)。

关于模板

关于页面以 ## 段落 拆分,其他不做约束。

添加分类

部署

Just enjoy it! 😃

上一页2019下一页02 Godaddy 域名找回记事

最后更新于1年前

这有帮助吗?

由于 Github api 有访问次数限制,所以需要申请 token 来解除访问限制,。将申请的 token 从中间随意拆成两部分填入配置项,拆分的目的避免代码提交的时候 github 对其进行检测,导致 token 失效。

Aurora 主题的文章阅读次数与 Valine 评论系统都是采用 存储。注册一个 Leancloud 账号并新建一个应用,将应用 key 填入相应配置项。 然后创建三个 Class,Comment 用来存储游客评论、Counter 用来存储文章热度、Visitor 用来统计友链访问次数,注意新建时选择表的访问权限无限制。

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。其原理的文章存储是一样的,详细介绍见。

首先需要申请 ,跳转地址填写你的博客域名,如果你使用 github pages 来托管你的网站,你也可以使用 https://chanshiyucx.github.io 域名。最后将生成的 Client ID 和 Client Secret 填入相应配置项。在开发环境调试时 Gitlak 无法展示是正常现象,发布到线上后会正常显示。

为了更好地定制各个页面的展示效果,Aurora 约定一些页面格式以便内容能够正确解析。主要约定 文章、书单、友链、关于 四个页面内容模板。模板参考 。

Aurora 2.0 添加一键部署功能,只需要编辑 build.sh,配置自己的仓库和域名,之后命令行执行 ./build.sh,即可自动打包并上传到指定仓库,将该仓库开启 Github Pages 功能即可在线访问。相关文档参考。

申请地址戳这里
Leancloud
官方文档
GitHub Application
蝉時雨の Issues
自动部署
Github Token
Leancloud_应用_Key
申请 GitHub Application
生成 clientID 和 clientSecret
文章模板
书单、友链、关于标签
添加分类