用 Vue.js 造了个轮子静态博客的轮子，依赖 GitHub，无需本地生成 <(▰˘◡˘▰)>
viko16 · viko16 · 2015-11-20 14:33:51 +08:00 · 10489 次点击这是一个创建于 3278 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://github.com/viko16/vue-ghpages-blog
一只依赖 GitHub API 的静态博客，使用了 Vue.js 组件， webpack 打包
Demo
http://ukn.me/ <- 其实就是我自己的博客
食用方式
- 喜欢代码欢迎 Star
- 喜欢博文欢迎 Watch
- 也想自用的话也可以 Fork ，但请按照 README 上的说明修改
其他
- 目前只有列表页有缓存（ sessionStorage ），以免滥用 API & 还能加速访问呢
- 主要是参考了 Vue.js 的官方示例
- 好像没了，我果然没什么文采不适合写小广告.. (つω⊂)
第 1 条附言 · 2015-11-20 15:16:55 +08:00
 |
1
loading 2015-11-20 14:35:16 +08:00 via Android
404
|
 |
3
viko16 OP |
 |
4
Hello1995 2015-11-20 14:46:45 +08:00 via Android
看起来挺 nice 的，不错。
PS: http://ukn.me/ 这个是你的博客，上面你多了一个 >。 点进去你的博客我就想吐槽《纯数字域名》一文，所谓的“纯数字”就是 32 位的 IP 地址写成十进制…而平时常见的 IPv4 的写法是“点分十进制”。最后，你还混淆了 IP 地址和域名的概念。(也就是说那篇博文标题也是错的) |
 |
5
Slienc7 2015-11-20 14:53:42 +08:00 via Android
@Hello1995
不算混淆概念吧，只是通俗的以吸引读者而已，没必要怎么较真。 不过可以考虑加个"" |
|
7
viko16 OP |
 |
8
jinzhe 2015-11-20 15:03:34 +08:00
VUEJS 群： 240319632
|
 |
9
woailuosj 2015-11-20 15:16:50 +08:00
我也想写个博客练习练习，来群吧！ 240319632
|
 |
10
shunia 2015-11-20 15:38:20 +08:00
/src/setting/index.js:
``` config: { repo: 'viko16/vue-ghpages-blog', path: 'markdown', brance: 'markdown' } ``` brance -> branch 不够傻瓜,最好是把配置全部独立出来放到一个文件里,而且最好是放在根目录下 做的不错,顶楼主 |
|
11
shunia 2015-11-20 15:40:03 +08:00
另外有个想法,可以把样式文件独立出来,通过加载内容一样的原理从其他项目加载过来,达到动态换肤的目的.这样 fork 一个 blog,fork 一个 theme,改好了 blog 的配置之后,每次更新 theme 的文件,就能得到动态的皮肤了.
整天折腾 blog 的不就爱折腾皮肤么. |
 |
12
ChiangDi 2015-11-20 15:54:01 +08:00 via Android
帅呆了，我也要用这个了。
|
 |
13
Moker 2015-11-20 16:03:32 +08:00
无刷新加载 是用了 vue 的双向数据绑定？
|
|
14
viko16 OP @shunia 谢谢指正，错字已改。
另外你这个想法，似乎 theme 也不止样式哦，还有 html 定制什么的，好像独立出来分层就有点多了，毕竟现在用着 vue.js 的 “单文件组件” http://cn.vuejs.org/guide/application.html#单文件组件 @Moker ，是的，也用了 vue-router 做路由切换 |
 |
15
lijinma 2015-11-20 16:34:52 +08:00
SEO 会有问题吗。嘿嘿
|
|
18
viko16 OP @Moker
哈哈， vue-router 结合 vue component 挺好用的 可以参考 https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/main.js#L22-L34 |
 |
19
doublleft 2015-11-20 16:54:56 +08:00
不错 一会儿整上 http://qinshou.me
|
 |
21
wsph123 2015-11-20 17:16:23 +08:00
唔，不错不错。
|
 |
23
jokcy 2015-11-20 17:51:24 +08:00
其实你这么做博客的一个问题就是你怎么做 SEO 。。。
|
 |
24
ferrum 2015-11-20 18:09:04 +08:00
已 star ，最近准备开发一个 SPA 应用，看来看去，决定使用已上手的 Vue.js ，正愁没多少例子可以看呢。
|
 |
27
djyde 2015-11-20 22:56:52 +08:00
4 格缩进，要烧了 233
|
 |
28
jswh 2015-11-22 15:39:34 +08:00
我也正在写一个累死的东西......，而然因为懒癌拖了好久
|
 |
31
fy 2015-11-23 00:40:42 +08:00
这个博客啊， excited 。资慈楼主
|
 |
32
kingme 2015-11-23 12:36:29 +08:00
star & fork ，研究一下。没用过组件，哈哈。我就玩玩双向绑定。
|
|
33
viko16 OP @kingme
其实我自己也是练手的，主要参考了官方的那个示例项目 <(▰˘◡˘▰)> https://github.com/vuejs/vue-hackernews/tree/gh-pages/src/components |
 |
34
xfack 2015-11-23 16:07:34 +08:00
现在问题来了...如果用独立 vps 的话,是不是一定要用 npm!?
|
 |
36
JoyNeop 2015-11-25 17:39:57 +08:00
https://joyneop.xyz/blog/
以前 sync AJAX 写的，最近 async 化重构了一次…… 原理类似，只是顺带加了一些 prefetch 。比较蛋疼的是不能删文章，下次重构会把文章列表数据结构从 array 改为 map 。 |
 |
39
ooTwToo 2015-12-05 00:37:24 +08:00
我能看懂的就只有 pjax/markdown/css 了。
那么，弱弱的问一句，如果不依赖 Github Pages ，如何实现 读取 md 文件？ 还有，能分享下你的 markdown 的 css/js 插件吗？ |
|
40
viko16 OP @ooTwToo
如果不依赖 GitHub ，那么直接读取文件目录也是可以嘀（前提是得按具体情景去写哦，我目前的读取存储都写在 src/store/index.js 里 另外 markdown 的解析我是使用了 marked 这个库，在 Vue 里当作 filter 使用 https://github.com/chjj/marked 至于 css ，自己定制了一些，我列一下位置吧 https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/components/PostView.vue#L76-L109 https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/components/App.vue#L70-L120 |
 |
41
metrue 2017-01-05 15:55:58 +08:00
|
|
42
viko16 OP @metrue 谢谢支持。
按照我目前的工作流， dist/* 是靠 TravisCI 推送到 gh-pages 的，可以参考脚本： https://github.com/viko16/vue-ghpages-blog/blob/develop/.travis.yml#L15-L33 |
Select Language