dnhy / blog Goto Github PK

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 [email protected]: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 api 有访问次数限制，所以需要申请 token 来解除访问限制，申请地址戳这里。将申请的 token 从中间随意拆成两部分填入配置项，拆分的目的避免代码提交的时候 github 对其进行检测，导致 token 失效。

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

配置 Leancloud

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

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

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

配置 Gitalk

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

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

/**

• Gittalk 配置【评论功能】
  */

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

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

页面模板

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

文章模板

文章模板没有太多的格式约束，只需要在文章正文顶部加上封面配图即可，配图采用的是 markdown 的注释语法，所以并不会在正文里渲染，以后即使你更换博客主题，也不会影响内容的展示。
[pixiv: 41652582]: # 'https://raw.githubusercontent.com/chanshiyucx/yoi/master/bg/3.jpg'
由于博客的文章、友链、书单、关于、心情等内容都放在 issues 里，所以需要对它们进行区分，这里主要使用 issues 状态与 Labels 进行分类。

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

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

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

[预设尺寸](https://raw.githubusercontent.com/chanshiyucx/yoi/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 **！”（《最后一课》）。

关于模板

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

添加分类

部署

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

Just enjoy it! 😃
转自https://chanshiyu.com/#/post/41

这次用蝉时雨大佬的主题构建完个人博客，过程让我刷新了许多认知。当我了解到GItHub还可以用来搭建后台和作为服务器时我是满脸黑人问号的，这不应该就是一个普通的代码仓库吗。。。卧槽居然还能这么玩，还玩的这么漂亮！膜拜大佬！

同时我也又双叒叕认识到自己还需要更多的学习，真得知道的太少了，眼界还需要放宽啊少年。

现在要忙考研，这也是一个很需要时间和精力的事情，这阶段其他的事情需要暂且搁置了，毕竟这么重要的任务还是要全身心对待。

哎，等考完了研（有幸不要二战的话），还是想花点时间好好学习一下，再装修一下这个博客，加些自己想要的功能（我真的好想要个时间轴啊啊啊）。

1212313131313

311313131313

有时候不必因为一些刻板印象而把一件事或一个人想得过于极端，大多数情况都不只是单纯的“0和“(不是-1就是1)，往往是0.1、0.2等中间情况居多。

这种“0和“多见于比较单一的人物刻画，不可复刻这样的作品的思维方式。私以为一部作品的价值观可以有绝对的正义和邪恶，但是人物必定是在这两者之间反复徘徊游荡的，既追求绝对的正义也被绝对的邪恶吞噬。虽然程度会有不同，不同时间不同场景面对不同的情况都会有差别，但都具有一定的矛盾性。所以创作者对于人物的多元多角度刻画是必要的，一来可以丰满这个人物，达到更接近真实的效果，二来也是对于人物本身多元性的尊重。

我们会为一些作品中的人物的命运动容，对他们的处境感同身受，很大程度上就是因为这点，我们从他们遭遇和经历上感知到他们和我们一样都是有血肉有**的真实的人。他们的性格往往不是完美的英雄主义，而是同普通人一样有缺点，会在面对一些事情时犯一些错误，甚至会体现许多世俗化的特质，但是他们面对自己的一些处境时又能展现作为普通人的人性光辉，在作出决策时能够用最为平凡质朴的爱对待他人。所以我们会觉得这样的人可爱又美好，因为这样的角色是我们很多普通人的缩影。

ES6 标准入门

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

JavaScript 设计模式与开发实践

author: 曾探
published: 2015-05-01
progress: 正在阅读...
rating: 5
postTitle: JS 设计模式与开发实践
postLink: https://chanshiyu.com/#/post/8
cover: https://cdn.jsdelivr.net/gh/chanshiyucx/yoi@latest/book/JavaScript-设计模式与开发实践.jpg
link: https://www.duokan.com/book/120447
description: 设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。书中介绍了 JavaScript 常用的 16 种设计模式，受益良多。

你不知道的 JavaScript(上卷)

author: Kyle Simpson
published: 2015-04-01
progress: 正在阅读...
rating: 5
postTitle:
postLink:
cover: https://cdn.jsdelivr.net/gh/chanshiyucx/yoi@latest/book/You_Dont_Know_JavaScript(上卷).jpg
link: https://www.duokan.com/book/102758
description: You-Dont-Know-JS 系列目前在 Github 上已获得近 7.5 万 star，说是 2017 年最火的一个项目也不为过，学而不思则殆，重新温故知新。

JavaScript 秘密花园

author: 伊沃·韦特泽尔
published: 未出版
progress: 温习中
rating: 4
postTitle: JavaScript 秘密花园
postLink: https://chanshiyu.com/#/post/6
cover: https://cdn.jsdelivr.net/gh/chanshiyucx/yoi@latest/book/JavaScript-秘密花园.jpg
link: https://www.jb51.net/onlineread/JavaScript-Garden-CN/#intro
description: JavaScript 秘密花园是一个不断更新，主要关心 JavaScript 一些古怪用法的文档。初学者可以籍此深入了解 JavaScript 的语言特性。

由于某些原因，国内访问Github会异常缓慢，在clone仓库时甚至只有10k以下的速度，下载半天有时还会失败需要从头再来，甚是让人恼火。
本文介绍通过修改系统hosts文件的办法，绕过国内dns解析，直接访问GitHub的CDN节点，从而达到加速的目的。不需要科学上网，也不需要海外的服务器辅助。

1 获取GitHub官方CDN地址

打开https://www.ipaddress.com/

查询以下三个链接的DNS解析地址

github.com
assets-cdn.github.com
github.global.ssl.fastly.net

记录下查询到的IP地址。

2 修改系统Hosts文件

打开系统hosts文件(需管理员权限)。
路径：C:\Windows\System32\drivers\etc

在末尾添加三行记录并保存。(需管理员权限，注意IP地址与域名间需留有空格)

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost

  192.30.253.112     github.com

  151.101.72.133    assets-cdn.github.com

  151.101.193.194    github.global.ssl.fastly.net

3 刷新系统DNS缓存

Windows+X 打开系统命令行（管理员身份）或powershell

运行 ipconfig /flushdns 手动刷新系统DNS缓存。

现在打开Github，clone一个项目到本地试试吧，作者这电信的宽带会轻松达到10M/s的速度。

转自https://www.jianshu.com/p/66facbd8926a

虽然还没有准备好，但时间的悬崖已经悄然挪到了脚下。此刻是踌躇不前，安心等待坠落的失重感再次降临，还是渴望长出翅膀，告别自己已经驻足二十多年的古老土地，追索更加广袤的天穹深处，这是不得不作出的选择。此时选择的纠结感又不请再来了，而且比上一次更加容易使人焦虑，更加让人难以抉择。

很多人从来都是容易满足的，像《霍比特人》中那条迷恋财富的巨龙，终日沉醉地躺在这片抢夺而来的堆满金玉的大殿中，直到这片土地的故主推开殿门，它也迎来了最后的命运。

舒适的沉醉和欢愉都在一个人享受他们之时标好了价格，有时这个价格对于一般人来说必然是难以承受的。更加严重的是面对这个无法偿还的价格人们往往会产生挫败感，对自己曾今的作为懊恼不已。但是我时常在想如果让他们重新选择一次，他们也未必能做得更好。人类唯一要吸取的教训是人类必然永远无法吸取教训。其实很多人在面对失败时都会去猜测和推断失败的原因，而且往往能够列举一份详尽的清单，但是认错完全不等于改错，对于错误的认知在很大程度上只是为了满足自己的一种补偿感，当人再次去做一件事时他也未必会吸取上一次失败的教训。

这样的例子不胜枚举，但永远也无法说服谁让他真正改变自己的行动。

这就说到了知行合一的概念。我并未真正研究过知行合一，对它的解读也必然不够深入，但在我的认知中，所谓知行合一即使认知和实践结合，在有了一定的认同的**观点后，运用智慧和毅力去将这个想法付诸实践，并且坚持不懈。所以我认为知行合一看似是一个极为朴素的真理，但想做到的确是非常困难的事。可以说对于它的实践贯穿一个人生活的始终。在生活中人们为许多事都提出了一定的规范，这其中包括很多对自己的要求。但即使想要成功地实践这些自己已经认同的事，如果缺乏外力的助推和逼迫，那么也是极为需要意志力的，所以需要我们在不断的尝试中尽可能一次比一次做得更好，逐渐提升自己转化理论为实践的能力。

这篇说了很多废话，文笔粗陋得自己都有点看不下去。其实想说的想法还是很简单，就是不要拖延不要偷懒，想做的事是赶快去做，有时会很困难，但还是要多想多抓紧，just do it!

阁子

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

蝉时雨

link: https://chanshiyu.com/
cover: https://cdn.jsdelivr.net/gh/dnhy/pic/img/chshy.jpg
avatar: https://cdn.jsdelivr.net/gh/chanshiyucx/yoi/blog/avatar.jpg

typora+picgo+jsdeliver+github打造免费高效的博客图床

picGo下载地址 : https://github.com/Molunerfinn/PicGo

typora官方 : https://typora.io/

github提供免费的10G存储空间, 可以存一大堆图片.
picGo支持github图床, 可以拖动上传或者设置快捷键上传, 免去繁杂的add, commit, push流程

jsdeliver 提供CDN加速, 由于github本身较慢, 配合jsdeliver使用可以使访问和加载速度成倍提升
typora 写md可以配置picGo, 在上传本地图片的同时自动完成上传到picGo对应图床---获取外链的操作

总结下来就是 :

免费
大图片存储空间
方便的外链获取方式
CDN加速访问
以后再进行md文件的转发或者上传时再也不用担心挂图片的问题了

下面介绍下配置过程 :

配置

建立github仓库并获取token#
建仓库就不用说了, token主要是给picGo一个操作权限

如何获取一个github token :

先进入settings, 然后进入developer settings, 建立一个新的token就可以了

把这些权限全勾选上

下载picGo并进行配置

https://github.com/Molunerfinn/PicGo 下载picGo

配置如上图设置, 其中仓库名, 存储路径改成你自己的

自定义域名 处, 我们为了得到jsdeliver的加速, 改为https://cdn.jsdelivr.net/gh/你的github用户名/仓库名@master 的形式

typora的自动上传配置

下载最新版的typora, 打开偏好设置

配置插入图片时上传图片和picGo路径 即可

插件和快捷键设置

1. picgo-plugin-github-plus插件可以自动同步picGo相册和github仓库

2. picGo快捷键设置比如我这里设置了ctrl + shift + c上传剪切板图片并获取markdown图片链接, (配合snipaste截图软件使用效果更佳)
   

效果展示

操作 : 截图 --- ctrl + c赋值 --- ctrl+shift+c上传并获取链接 --- 粘贴进typora

作者： roccoshi
出处：https://www.cnblogs.com/roccoshi/p/13183890.html
版权：本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。