diff --git a/README.md b/README.md index 0cd6241..0ddddb2 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,5 @@ -## TinyBlog有什么特性 -1. 完全静态,以至于没有任何生成程序 -2. 支持Markdown常用语法 -3. 支持Github用户添加评论 - -## 为什么要写 TinyBlog -有时候只想简单的写一篇文章,WordPress毫无疑问过于臃肿,Jekyll需要安装,而我想要一种更简单的更新博客方式,受到开源项目[Simple](https://github.com/isnowfy/simple)的启发,我用几个晚上的时间写了一个极简的静态博客. - -每次写文章只有一个步骤,push写好的md文章到`./blog`目录下, that's all . - -## TinyBlog 教程 -1. 从[TinyBlog的Github主页](https://github.com/YangHanqing/tinyblog)fork一份到你的仓库,更改项目名称为`your_name.github.io`,几分钟后Github会自动为你开通[your_name.github.io](yanghanqing.github.io)的个人主页 - -2. 修改`about me.md`文件作为你的个人介绍,为了更快的加载速度,也可以选择写死在`index.html`中 - -3. 写好markdown文件后,保存到`./blog`目录下,依次执行下面的语句即可.如果你不熟悉Git如何使用,请参考Github提供的相关教程. - - > git add . - > git commit -m "Update blog" - > git push - -4. 如果修改了CNAME,记得core.js中把`user`改为自己的账户名,否则通过URL自动获取. - -5. 分享文章给他人,可以通过在链接后加如下参数 `?title=文章名` - -6. 建议新文章发布后,评论栏留空,并点击一下提交评论按钮,这样会用你自己的账户创建issue,以后如果comment有更新,不会打扰到第一个评论的人. - -## 迭代方向 -* 修复未知Bug(没有做测试,也没有考虑Github通讯不佳的情况) -* 支持响应式布局(第一次写前端,很手生) -* 基本上整个网站有交互就有AJAX,所以需要美化和增加相应的Loading提示 -* 支持文章按发布时间排序(Github没有获取单独文件update时间的api,所有第一版没有处理,初步想法是通过 `001#TITLE`这样的命名规范来处理文章顺序) -* 做一个支持MD语法的Chrome扩展来更新博客,不过如果做了扩展,和Jekyll也没什么区别了,再议. -* 改成 ReactJS 驱动来练练手 - -## 评论功能 -评论这个功能我是取巧了,利用Github API在项目issues下新建comment来存储,实现了原本需要第三方插件才能完成的功能. -## 许可 -MIT - - +## ZhjGo博客 +感谢YangHanqing 的代码，https://github.com/YangHanqing/tinyblog diff --git "a/blog/Markdown\350\257\255\346\263\225.md" "b/blog/Markdown \350\257\255\346\263\225.md" similarity index 100% rename from "blog/Markdown\350\257\255\346\263\225.md" rename to "blog/Markdown \350\257\255\346\263\225.md" diff --git "a/blog/\346\265\213\350\257\225\344\270\213.md" "b/blog/\346\265\213\350\257\225\344\270\213.md" new file mode 100644 index 0000000..8969384 --- /dev/null +++ "b/blog/\346\265\213\350\257\225\344\270\213.md" @@ -0,0 +1,312 @@ +# Markdown 语法和 MWeb 写作使用说明 + +## Markdown 的设计哲学 + +> Markdown 的目标是实现「易读易写」。 +> 不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标籤或是格式指令所构成。 +> Markdown 的语法有个主要的目的：用来作为一种网路内容的*写作*用语言。 + + + + + +## 标题 + +Markdown 语法： + +``` +# 第一级标题 `

` +## 第二级标题 `

` +###### 第六级标题 `

` +``` + +效果如下： + +# 第一级标题 `

` +## 第二级标题 `

` +###### 第六级标题 `

` + + + +## 强调 + +Markdown 语法： + +``` +*这些文字会生成``* +_这些文字会生成``_ + +**这些文字会生成``** +__这些文字会生成``__ +``` + +在 MWeb 中的快捷键为： `CMD + U`、`CMD + I`、`CMD + B` +效果如下： + +*这些文字会生成``* +_这些文字会生成``_ + +**这些文字会生成``** +__这些文字会生成``__ + +## 换行 + +四个及以上空格加回车。 + +## 列表 + +### 无序列表 + +Markdown 语法： + +``` +* 项目一 无序列表 `* + 空格键` +* 项目二 + * 项目二的子项目一 无序列表 `TAB + * + 空格键` + * 项目二的子项目二 +``` + +效果如下： + +* 项目一 无序列表 `* + 空格键` +* 项目二 + * 项目二的子项目一 无序列表 `TAB + * + 空格键` + * 项目二的子项目二 + +### 有序列表 + +Markdown 语法： + +``` +1. 项目一 有序列表 `数字 + . + 空格键` +2. 项目二 +3. 项目三 + 1. 项目三的子项目一 有序列表 `TAB + 数字 + . + 空格键` + 2. 项目三的子项目二 +``` + +效果如下： + +1. 项目一 有序列表 `数字 + . + 空格键` +2. 项目二 +3. 项目三 + 1. 项目三的子项目一 有序列表 `TAB + 数字 + . + 空格键` + 2. 项目三的子项目二 + +### 任务列表（Task lists） + +Markdown 语法： + +``` +- [ ] 任务一 未做任务 `- + 空格 + [ ]` +- [x] 任务二 已做任务 `- + 空格 + [x]` +``` + +效果如下： + +- [ ] 任务一 未做任务 `- + 空格 + [ ]` +- [x] 任务二 已做任务 `- + 空格 + [x]` + +## 图片 + +Markdown 语法： + +``` +![GitHub set up](https://assets-cdn.github.com/images/modules/logos_page/Octocat.png) +格式: ![Alt Text](url) +``` + + +效果如下： + +![GitHub set up](https://assets-cdn.github.com/images/modules/logos_page/Octocat.png) + +## 链接 + +Markdown 语法： + +``` +email +[GitHub](http://github.com) +自动生成连接 +``` + + + +Email 连接： +[连接标题Github网站](http://github.com) +自动生成连接像： 这样 + +## 区块引用 + +Markdown 语法： + +``` +某某说: +> 第一行引用 +> 第二行费用文字 +``` + +效果如下： + +某某说: +> 第一行引用 +> 第二行费用文字 + +## 行内代码 + +Markdown 语法： + +``` +像这样即可：`` `code` +``` + + +效果如下： + +像这样即可：`` `code` + +## 多行或者一段代码 + +Markdown 语法： + + ```js + function fancyAlert(arg) { + if(arg) { + $.facebox({div:'#foo'}) + } + + } + ``` + + +效果如下： + +```js +function fancyAlert(arg) { + if(arg) { + $.facebox({div:'#foo'}) + } + +} +``` + +## 顺序图或流程图 + +Markdown 语法： + + ```sequence + 张三->李四: 嘿，小四儿, 写博客了没? + Note right of 李四: 李四愣了一下，说： + 李四-->张三: 忙得吐血，哪有时间写。 + ``` + + ```flow + st=>start: 开始 + e=>end: 结束 + op=>operation: 我的操作 + cond=>condition: 确认？ + + st->op->cond + cond(yes)->e + cond(no)->op + ``` + +效果如下（ `Preferences` - `Themes` - `Enable sequence & flow chart` 才会看到效果 ）： + +```sequence +张三->李四: 嘿，小四儿, 写博客了没? +Note right of 李四: 李四愣了一下，说： +李四-->张三: 忙得吐血，哪有时间写。 +``` + +```flow +st=>start: 开始 +e=>end: 结束 +op=>operation: 我的操作 +cond=>condition: 确认？ + +st->op->cond +cond(yes)->e +cond(no)->op +``` + +更多请参考：, + +## 表格 + +Markdown 语法： + +``` +第一格表头 | 第二格表头 +--------- | ------------- +内容单元格 第一列第一格 | 内容单元格第二列第一格 +内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格 +``` + +效果如下： + +第一格表头 | 第二格表头 +--------- | ------------- +内容单元格 第一列第一格 | 内容单元格第二列第一格 +内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格 + + +## 删除线 + +Markdown 语法： + + 加删除线像这样用： ~~删除这些~~ + +效果如下： + +加删除线像这样用： ~~删除这些~~ + +## 分隔线 + +以下三种方式都可以生成分隔线： + + *** + + ***** + + - - - + +效果如下： + +*** + +***** + +- - - + + +## Math + +Markdown 语法： + + +``` +$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$ +``` + +效果如下： + + +$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$ + + + +## TOC + +Markdown 语法： + +``` +[TOC] +``` + +效果如下： + +[TOC] + + diff --git a/css/new.css b/css/new.css new file mode 100644 index 0000000..e32b32b --- /dev/null +++ b/css/new.css @@ -0,0 +1,78 @@ +@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600"); +.more-pens { + position: fixed; + left: 20px; + bottom: 20px; + z-index: 10; + font-family: "Montserrat"; + font-size: 12px; +} + +a.white-mode, +a.white-mode:link, +a.white-mode:visited, +a.white-mode:active { + font-family: "Montserrat"; + font-size: 12px; + text-decoration: none; + background: #212121; + padding: 4px 8px; + color: #f7f7f7; +} + +a.white-mode:hover, +a.white-mode:link:hover, +a.white-mode:visited:hover, +a.white-mode:active:hover { + background: #edf3f8; + color: #212121; +} + +body { + margin: 0; + padding: 0; + overflow: hidden; + width: 100%; + height: 100%; + background: #000000; +} + +.title { + z-index: 10; + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + font-family: "Montserrat"; + text-align: center; + width: 100%; +} + +.title h1 { + position: relative; + color: #EEEEEE; + font-weight: 600; + font-size: 60px; + padding: 0; + margin: 0; + line-height: 1; + text-shadow: 0 0 30px #000155; +} + +.title h1 span { + font-weight: 600; + padding: 0; + margin: 0; + color: #BBB; +} + +.title h3 { + font-weight: 200; + font-size: 20px; + padding: 0; + margin: 0; + line-height: 1; + color: #EEEEEE; + letter-spacing: 2px; + text-shadow: 0 0 30px #000155; +} \ No newline at end of file diff --git a/index.html b/index.html index fdee969..cd26aae 100644 --- a/index.html +++ b/index.html @@ -7,119 +7,154 @@ - - - - this is title - - - - - - - - - - - - - - - - - - - - - - + + + + ZhjGo博客 + + + + + + + + + + + + + + + + + + - - - -
-
- -
- - -
-
- -

About Me

-
HelloWorld! 你好 世界！
- -
-
-
- - - - -
-
    -
-
-
-
-
-
- - - + + + + + + + + + - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/js/core.js b/js/core.js index 70ca324..e58bc07 100644 --- a/js/core.js +++ b/js/core.js @@ -12,10 +12,10 @@ $(document).ready(function() { blogListURL = 'https://api.github.com/repos/' + user + '/' + user + '.github.io/contents/blog'; issuesList = 'https://api.github.com/repos/' + user + '/' + user + '.github.io/issues'; issuesHTML = 'https://github.com/' + user + '/' + user + '.github.io/issues' - readmeURL = 'https://raw.githubusercontent.com/' + user + '/' + user + '.github.io/master/About Me.md'; + readmeURL = 'https://raw.githubusercontent.com/' + user + '/' + user + '.github.io/master/index.html'; - $("#header").text(user + "'s Blog"); + $("#header").text("ZhjGo Blog"); $("#commentsList").removeAttr('data_comments_url'); $("#tips").html("我们不会获取您的用户名和密码,评论直接通过 HTTPS 与 Github API交互,
如果您开启了两步验证,请在博客的Github issues下添加 Comment"); diff --git a/js/new.js b/js/new.js new file mode 100644 index 0000000..76f50b8 --- /dev/null +++ b/js/new.js @@ -0,0 +1,122 @@ +var _createClass = function() { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + return function(Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +var max_particles = 1000; + +var tela = document.createElement('canvas'); +tela.width = $(window).width(); +tela.height = $(window).height(); +$("body").append(tela); + +var canvas = tela.getContext('2d'); + +var Particle = function() { + function Particle(canvas, progress) { + _classCallCheck(this, Particle); + + var random = Math.random(); + this.progress = 0; + this.canvas = canvas; + + this.x = $(window).width() / 2 + (Math.random() * 200 - Math.random() * 200); + this.y = $(window).height() / 2 + (Math.random() * 200 - Math.random() * 200); + this.s = Math.random() * 1; + this.a = 0; + this.w = $(window).width(); + this.h = $(window).height(); + this.radius = random > .2 ? Math.random() * 1 : Math.random() * 3; + this.color = random > .2 ? "#2E4765" : "#b5ff00"; + this.radius = random > .8 ? Math.random() * 2 : this.radius; + this.color = random > .8 ? "#2E4765" : this.color; + + // this.color = random > .1 ? "#ffae00" : "#f0ff00" // Alien + this.variantx1 = Math.random() * 300; + this.variantx2 = Math.random() * 400; + this.varianty1 = Math.random() * 100; + this.varianty2 = Math.random() * 120; + } + + _createClass(Particle, [{ + key: 'render', + value: function render() { + this.canvas.beginPath(); + this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); + this.canvas.lineWidth = 2; + this.canvas.fillStyle = this.color; + this.canvas.fill(); + this.canvas.closePath(); + } + }, { + key: 'move', + value: function move() { + this.x += Math.cos(this.a) * this.s; + this.y += Math.sin(this.a) * this.s; + this.a += Math.random() * 0.8 - 0.4; + + if (this.x < 0 || this.x > this.w - this.radius) { + return false; + } + + if (this.y < 0 || this.y > this.h - this.radius) { + return false; + } + this.render(); + this.progress++; + return true; + } + }]); + + return Particle; +}(); + +var particles = []; +var init_num = popolate(max_particles); + +function popolate(num) { + for (var i = 0; i < num; i++) { + setTimeout(function() { + particles.push(new Particle(canvas, i)); + }.bind(this), i * 20); + } + return particles.length; +} + +function clear() { + canvas.globalAlpha = 0.05; + canvas.fillStyle = '#000155'; + canvas.fillStyle = '#000021'; // Alien + canvas.fillRect(0, 0, tela.width, tela.height); + canvas.globalAlpha = 1; +} + +function update() { + particles = particles.filter(function(p) { + return p.move(); + }); + if (particles.length < init_num) { + popolate(1); + } + clear(); + requestAnimationFrame(update.bind(this)); +} +update(); \ No newline at end of file diff --git a/list.html b/list.html new file mode 100644 index 0000000..e483913 --- /dev/null +++ b/list.html @@ -0,0 +1,132 @@ + + + + + + + + + ZhjGo博客 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + +
+
+ + + +
+

HelloWorld!

+

你好 世界！

+

555

+
+ +
+
+
+ + + + + + + + + + \ No newline at end of file