blog's People
blog's Issues
关于
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 [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
建站感受1
测试
1212313131313
test
311313131313
从反对“0和"看人物创作
有时候不必因为一些刻板印象而把一件事或一个人想得过于极端,大多数情况都不只是单纯的“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访问
由于某些原因,国内访问Github会异常缓慢,在clone仓库时甚至只有10k以下的速度,下载半天有时还会失败需要从头再来,甚是让人恼火。
本文介绍通过修改系统hosts文件的办法,绕过国内dns解析,直接访问GitHub的CDN节点,从而达到加速的目的。不需要科学上网,也不需要海外的服务器辅助。
1 获取GitHub官方CDN地址
查询以下三个链接的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的速度。
一些想法1
虽然还没有准备好,但时间的悬崖已经悄然挪到了脚下。此刻是踌躇不前,安心等待坠落的失重感再次降临,还是渴望长出翅膀,告别自己已经驻足二十多年的古老土地,追索更加广袤的天穹深处,这是不得不作出的选择。此时选择的纠结感又不请再来了,而且比上一次更加容易使人焦虑,更加让人难以抉择。
很多人从来都是容易满足的,像《霍比特人》中那条迷恋财富的巨龙,终日沉醉地躺在这片抢夺而来的堆满金玉的大殿中,直到这片土地的故主推开殿门,它也迎来了最后的命运。
舒适的沉醉和欢愉都在一个人享受他们之时标好了价格,有时这个价格对于一般人来说必然是难以承受的。更加严重的是面对这个无法偿还的价格人们往往会产生挫败感,对自己曾今的作为懊恼不已。但是我时常在想如果让他们重新选择一次,他们也未必能做得更好。人类唯一要吸取的教训是人类必然永远无法吸取教训。其实很多人在面对失败时都会去猜测和推断失败的原因,而且往往能够列举一份详尽的清单,但是认错完全不等于改错,对于错误的认知在很大程度上只是为了满足自己的一种补偿感,当人再次去做一件事时他也未必会吸取上一次失败的教训。
这样的例子不胜枚举,但永远也无法说服谁让他真正改变自己的行动。
这就说到了知行合一的概念。我并未真正研究过知行合一,对它的解读也必然不够深入,但在我的认知中,所谓知行合一即使认知和实践结合,在有了一定的认同的**观点后,运用智慧和毅力去将这个想法付诸实践,并且坚持不懈。所以我认为知行合一看似是一个极为朴素的真理,但想做到的确是非常困难的事。可以说对于它的实践贯穿一个人生活的始终。在生活中人们为许多事都提出了一定的规范,这其中包括很多对自己的要求。但即使想要成功地实践这些自己已经认同的事,如果缺乏外力的助推和逼迫,那么也是极为需要意志力的,所以需要我们在不断的尝试中尽可能一次比一次做得更好,逐渐提升自己转化理论为实践的能力。
这篇说了很多废话,文笔粗陋得自己都有点看不下去。其实想说的想法还是很简单,就是不要拖延不要偷懒,想做的事是赶快去做,有时会很困难,但还是要多想多抓紧,just do it!
友链
使用typora + picgo + jsdeliver + github可以达到什么效果 ?
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一个操作权限
先进入settings, 然后进入developer settings, 建立一个新的token就可以了
把这些权限全勾选上
下载picGo并进行配置
https://github.com/Molunerfinn/PicGo 下载picGo
配置如上图设置, 其中仓库名, 存储路径改成你自己的
自定义域名 处, 我们为了得到jsdeliver的加速, 改为https://cdn.jsdelivr.net/gh/你的github用户名/仓库名@master 的形式
typora的自动上传配置
配置插入图片时上传图片和picGo路径 即可
插件和快捷键设置
-
picgo-plugin-github-plus插件可以自动同步picGo相册和github仓库
-
picGo快捷键设置比如我这里设置了ctrl + shift + c上传剪切板图片并获取markdown图片链接, (配合snipaste截图软件使用效果更佳)
效果展示
操作 : 截图 --- ctrl + c赋值 --- ctrl+shift+c上传并获取链接 --- 粘贴进typora
作者: roccoshi
出处:https://www.cnblogs.com/roccoshi/p/13183890.html
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.