浏览器推荐: Chrome >> Firefox >> Safari;
不支持 IE8-; IE9+ 未测试.
主题核心过滤功能使用 HTML5 的 data属性.
大类: 不能有英文的.; (可以有:-)不然不能过滤出对应标签&文章.
标签: 不能有下划线_; 不能有斜杆/;不能有空格(有空格是多标签.本主题不支持)
.
├─ 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 配置
一个类下的 这个类下的所有文件名都是一个年份的有效.
|-- 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
......
这个是最简单的自定义排序方法!!!
fork 我的主题到你的github. 并重命名该项目.名字格式参考:Xu-Jian.github.io 不管什么办法. 新建一个github项目. 把我主题所有文件弄到你项目里面.然后把项目重命名 用户名..github.io 格式
下载该项目到本地电脑(一般放桌面).
电脑安装jekyll 环境(全局模式/不需要cd到特定文件夹);
> 安装好全局环境: 系统可以认识jekyll命令. 但是文件夹还是不能进行jekyll命令操作,必须进行下一步.
一个电脑只需安装一次.(已经安装过就跳过这步).
- sudo gem install jekyll bundler
这里其实安装了两个: jekyll & Bundler
终端cd到 下载的文件夹里面:
- jekyll new . --force
这个是不覆盖原来内容的命令.如果是空的文件夹 可以使用:jekyll new .
这里的 . 是当前文件夹的意思
- bundle install
这步会帮你安装各种依赖文件
- bundle exec jekyll serve
这步开启本地预览: 打开浏览器 http://localhost:4000 有内容就对了.
将文档保存(修改)为「日期 + 标题」的模式,如:「2015-04-27-Like-Kissing.md」.
将 md 文档放到 _posts
文件夹里. 再去刷新浏览器的本地预览 就能看到变化了.
GitHub for Mac 客户端 commit 和 sync,稍等片刻新添加的博文就会自动发布到博客里啦.
浏览器输入 Xu-Jian.github.io (把xu-jian 改成你自己的github账户名) 能看博客效果.
渲染所有文件
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
主要配置文件:codePen_url
_includes
→ topbar.html → 看注释就会了main.css → #cateDiv / #tagDiv / #fileNameDiv → 修改 flex-basis: ???px;
main.cs 这里要注意下 拖动条的颜色. 拖动条有点宽(容易拖动啊)由是左右两部分组成的. 修改背景颜色 记得这里也一起改掉. 总的 3条拖动条:
default.html → arrowNav div下 → 绝对定位
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
自己放一个 png到博客根目录就可以了.
根目录CNAME 文件(注意文件没有后缀的).
如果有独立域名请修改该文件;
如果没有,则删掉该文件;
topbar.html → 找ID= githubstar → 按照注释改. 由于国内网络环境.这个严重影响加载.不建议开启.
默认开启所有除了 CDN 的文件. 包括 main.css man.js 如果你修改了 css 文件.要查看修改后效果. 最简单的就是清空浏览器缓存.再重新加载.