Web开发 个人项目(Jekyll Theme)
JavaScript CSS HTML Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode Sass 成功启用 Feb 8, 2017
src kill firebas Feb 21, 2017
webpack kill firebas Feb 21, 2017
.babelrc webpack ES6 Babel done Feb 11, 2017
.gitignore webpack(js: done) Feb 10, 2017
CNAME 1 Jan 27, 2017
Gemfile 暂停webpack (影响开发...) Feb 13, 2017
Gemfile.lock 暂停webpack (影响开发...) Feb 13, 2017
Icon jekyll 主题. Dec 31, 2016
README.md update url Sep 11, 2017
_config.yml post Feb 16, 2017
entry.js kill firebas Feb 21, 2017
jekyll-theme-CMS-2.2.2.gem 优化 Feb 20, 2017
jekyll-theme-CMS.gemspec 优化 Feb 20, 2017
package.json 初步启用 react Feb 16, 2017
robots.txt kill firebas Feb 21, 2017
sitemap.xml kill firebas Feb 21, 2017
webpack.config.js CSS优化 Feb 16, 2017

README.md

浏览器要求:

浏览器推荐: Chrome >> Firefox >> Safari;
不支持 IE8-; IE9+ 未测试.

主题核心过滤功能使用 HTML5 的 data属性.

CMS-Jekyll:

大类: 不能有英文的.; (可以有:-)不然不能过滤出对应标签&文章.
标签: 不能有下划线_; 不能有斜杆/;不能有空格(有空格是多标签.本主题不支持)

CMS-Jkeyll-Theme Demo

CMS-Jkeyll-Theme Preview:

Done (主要功能)

  • 三级标签过滤 & 统一时间排序: Categories → Tags → fileName
  • 拖动条 + 滚动条 + Nprogress进度条 + PJAX
  • 自动高亮: 点击文件名自动高亮并过滤出对应 Tags & Categories.
  • 文件结构栏: 文章滚动自动高亮标题(h2-h5), 并实现锚点跳转.
  • Service Worker 缓存 (废弃 manifest缓存 )
  • Webpack (SASS & ES6 & CSS内联)
  • 启用 Lazyload

Done (次要功能)

  • Git: Github + Coding 双线部署; Github Star数集成
  • 谷歌网站统计分析 + SSL/HTTPS
  • 所有平台 icon 图标适配
  • 文章可添加meta标签来优化SEO
  • 阿里iconfont 代替 fontawesone
  • 发布主题到 Rubygems
  • 顶栏前后篇 pjax按钮 ( 绑定contentDiv链接实现 )
  • 移动端界面适配
  • 404页面.

ToDo

  • 首页文件列表模块化主题+预览(card-theme)
  • gzip压缩
  • JS 上下键 控制高亮光标.
  • 多主题切换/多布局切换
  • 搜索功能(谷歌CES搜索)
  • 左右抽屉显隐效果 留白问题...
  • 在线编辑功能??
  • 开放UGC???
  • 最爱文章?
  • 移动端左右滑动
  • URL 自动链接
  • 前后篇 高亮设置.
  • 文章分享功能
  • 白噪声功能.
  • require.js 按需加载..
  • 文章阅读进度条.
  • 三级导航条

待定功能

  • 侧边栏: 首次点击文章显示. 然后隐藏掉... 手动开启
  • 文章浏览时间, 浏览量, 字数统计
  • 文章分享功能.

GiveUP

  • 七牛CDN加速 (域名必须备案! HTTPS 还要上传证书信息.... )
  • CDN 请求合并 (CDNJS.com 需年费..)
  • Firebase 数据库(聊天功能. 被墙.实在慢.寻找国内替代)

issues

  • 左右拖动 会选中文字.....

项目架构

. ├─ webpack/ # Webpack 目录
├─ _site/ # jekyll build 默认生成的所有文件都在这里.也就是我们看到的网页文章(每篇文章一个html)
├─ node_modules/ # 就是因为这个文件夹才 必须新建个 src 文件夹. 不然jekyll build.就会处理这个文件夹. 耗时30+秒. 不能忍!!!
├─ src/ # jekyll build 所需要的文件都在这个. 这个文件夹非常重要.
│ ├─ assets/ # 放置需要经由 Webpack 处理的静态文件
│ ├─ components/ # 组件(COMPONENT)
│ ├─ redux/ # Redux 一箩筐
│ │ ├─ actions/ # (ACTION)
│ │ ├─ reducers/ # (REDUCER)
│ │ ├─ store/ # (STORE)
│ ├── routes/ # 路由(ROUTE)
│ ├── services/ # 服务(SERVICE,用于统一管理 XHR 请求,这是从 Vue Demo 中直接复制过来的)
│ ├── utils/ # 工具库(UTIL)
│ │ ├─ HoC/ # 高阶组件(HOC,全称 Higher Order Component)
│ │ ├─ mixins/ # 混合(MIXIN)
│ ├── views/ # 路由视图基页(VIEW)
│ │ ├─ layout/ # 全局布局
│ ├── app.js # 启动文件
│ ├── index.html # 静态基页
├── _config.yml # jekyll 的配置文件
├── CNAME # 博客自定义域名设置
├── entry.js # webpack 入口文件
├── Gemfile # jekyll build 需要
├── Gemfile.lock # jekyll build 需要
├── jekyll-theme-CMS-2.2.2.gem # 主题发布到 Gemruby 需要文件
├── jekyll-theme-CMS.gemspec # 主题发布到 Gemruby 需要文件
├── package.json # npm 配置文件
├── README.md # 项目的 readme 文件
├── webpack.config.js # webpack 配置

排序实例:(主题重点)

  • 所有排序都是按照_Posts里文件名的时间排序. 时间越旧拍越上面.

    一个类下的 这个类下的所有文件名都是一个年份的有效.

|-- Cate1  
|   |--  Tag11  
|          |-- post111 → 2000-01-01-post111.md  
|          |-- post112 → 2000-01-02-post112.md   
|          |-- post113 → 2000-01-03-post113.md  
|   |--  Tag12  
|          |-- post121 → 2000-02-01-post121.md  
|          |-- post122 → 2000-02-02-post122.md  
|          |-- post123 → 2000-02-03-post123.md  
|   |--  Tag13  
|          |-- post131 → 2000-03-01-post131.md  
|          |-- post132 → 2000-03-02-post132.md  
|          |-- post133 → 2000-03-03-post133.md  
|  
|-- Cate2  
|   |--  Tag21  
|          |-- post211 → 2010-01-01-post211.md  
|          |-- post212 → 2010-01-02-post212.md  
|          |-- post213 → 2010-01-03-post213.md  
|   |--  Tag22  
|          |-- post221 → 2010-02-01-post221.md  
|          |-- post222 → 2010-02-02-post222.md  
|          |-- post223 → 2010-02-03-post223.md  
|   |--  Tag23  
|          |-- post231 → 2010-03-01-post231.md  
|          |-- post232 → 2010-03-02-post232.md  
|          |-- post233 → 2010-03-03-post233.md  
|-- Cate3   
|   |--  Tag31  
|          |-- post311 → 2016-01-01-post311.md  
|          |-- post312 → 2016-01-02-post312.md  
|          |-- post313 → 2016-01-03-post313.md  
|   |--  Tag32  
|          |-- post321 → 2016-02-01-post321.md  
|          |-- post322 → 2016-02-02-post322.md  
|          |-- post323 → 2016-02-03-post323.md  
|   |--  Tag33  
|          |-- post331 → 2016-03-01-post331.md  
|          |-- post332 → 2016-03-02-post332.md  
|          |-- post333 → 2016-03-03-post333.md  

排序结果:

Cate1 Tag11 post111
Cate2 Tag12 post112
Cate3 Tag13 post113
      Tag21 post121
      Tag22 post122
      Tag23 post123
      Tag31 post131
      Tag32 post132
      Tag33 post113
            post211
            post212
            post213
            post221
            post222
            post223
            post231
            ......

建议排序方法:

  • 每个大类一个年份.
  • 每个标签一个月份.
  • 每篇文章一个日期.
  • 文章很多还可以用时分秒.

这个是最简单的自定义排序方法!!!

Gitpages 主题安装方法 (Mac) :

  1. fork 我的主题到你的github. 并重命名该项目.名字格式参考:Xu-Jian.github.io 不管什么办法. 新建一个github项目. 把我主题所有文件弄到你项目里面.然后把项目重命名 用户名..github.io 格式

  2. 下载该项目到本地电脑(一般放桌面).

  3. 电脑安装jekyll 环境(全局模式/不需要cd到特定文件夹);
    > 安装好全局环境: 系统可以认识jekyll命令. 但是文件夹还是不能进行jekyll命令操作,必须进行下一步.
    一个电脑只需安装一次.(已经安装过就跳过这步).
    - sudo gem install jekyll bundler
    这里其实安装了两个: jekyll & Bundler

  4. 终端cd到 下载的文件夹里面:
    - jekyll new . --force
    这个是不覆盖原来内容的命令.如果是空的文件夹 可以使用:jekyll new .
    这里的 . 是当前文件夹的意思
    - bundle install
    这步会帮你安装各种依赖文件
    - bundle exec jekyll serve
    这步开启本地预览: 打开浏览器 http://localhost:4000 有内容就对了.

  5. 将文档保存(修改)为「日期 + 标题」的模式,如:「2015-04-27-Like-Kissing.md」.

  6. 将 md 文档放到 _posts 文件夹里. 再去刷新浏览器的本地预览 就能看到变化了.

  7. GitHub for Mac 客户端 commit 和 sync,稍等片刻新添加的博文就会自动发布到博客里啦.

  8. 浏览器输入 Xu-Jian.github.io (把xu-jian 改成你自己的github账户名) 能看博客效果.

jekyll Tips ★★★★★

  • 渲染所有文件 bundle exec jekyll serve
  • 忽略文件更新 bundle exec jekyll serve --unwatch 默认文章一旦改变就重新生成的,当你1000+文章时候 生成一次得好久 还耗费电脑资源!!!
  • 渲染指定数量文件 bundle exec jekyll serve --limit_posts 15

创建主题时.如果文件多 会很耗时.

  • 指定端口预览 bundle exec jekyll serve --port 3999

开启多个本地预览时候用

  • 批量修改文件名

如:每个大类都是一个年份.把某个大类的所有文章都改成一个年份.可以实现自定义排序

  • 批量修改文件内容: 如改标签/大类

改大类名非常方便啊 coda2软件 → 查找功能 → 打开post文件夹 →查找 categories: Blog 替换成 categories: Blogs

  • jekyll博客文件结构 只要看 _layouts 文件夹里面的 default.html. 再结合 _includes 文件夹里面的内容就可以知道了.

    default.html 会用 inclide 语法包含一些 _includes文件夹里面的文件.

主题个性化定制

_config.yml 主要配置文件:

  • 修改书签栏上显示的标题: title
  • 修改博客顶栏的邮箱: email
  • 修改博客顶栏 github 主页链接: githubHomeURL
  • 修改博客顶栏 github readme链接: githubReadmeURL
  • 修改博客顶栏 codePen 链接: codePen_url

增删博客顶部的图标(链接):

  • 增加: 自己搜阿里的 iconfont
  • 删除: _includes → topbar.html → 看注释就会了
  • 链接: topbar.html 里直把href 改成你自己的也可以.

大类/标签/文件 默认宽度

main.css → #cateDiv / #tagDiv / #fileNameDiv → 修改 flex-basis: ???px;

改大类/标签/文件 背景颜色

main.cs 这里要注意下 拖动条的颜色. 拖动条有点宽(容易拖动啊)由是左右两部分组成的. 修改背景颜色 记得这里也一起改掉. 总的 3条拖动条:

  • 标签拖动条: lineLeft-left, lineLeft-right
  • 文章拖动条: lineRight-left, lineRight-right
  • 文章结构条: lineSide-left, lineSide-right

右下角的三个小图标

default.html → arrowNav div下 → 绝对定位

favicon 书签图标

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">

自己放一个 png到博客根目录就可以了.

自定义域名

根目录CNAME 文件(注意文件没有后缀的). 如果有独立域名请修改该文件;
如果没有,则删掉该文件;

Github Star数图标

topbar.html → 找ID= githubstar → 按照注释改. 由于国内网络环境.这个严重影响加载.不建议开启.

service worker 缓存

默认开启所有除了 CDN 的文件. 包括 main.css man.js 如果你修改了 css 文件.要查看修改后效果. 最简单的就是清空浏览器缓存.再重新加载.

版权 MIT