合并 Jekyll 多种类型的页面 发布于 2017-10-12 15:48 更新于 2018-08-12...还好多数时候我记得，就像我亲自记得 3 岁时候的一些故事一样。 但今天大脑被一些凌乱的事情撑爆了，心情极度低落。正好近期学着写博客，于是想把一些胡思乱想的事情写在自己的站点上。...阅读本文，将学到如何用 Jekyll 做多种类型的页面，并在首页的列表中将这些不同种类的页面合并按日期排序。...---- 制作除博客之外的新页面类型 Jekyll 不止支持博客（post）页面类型，也可以支持自定义页面类型。当然博客是它唯一的内建类型（hard-coded type）。...第二步：添加自定义页面类型文件夹 需要在 Jekyll 项目根目录建立一个 _article 文件夹，此名称与第一步的类型名称一致，前面加下划线。
想在github page上构建自己的博客，前几个星期就动手搞了起来，但由于自己对于前端这些东西不是很熟，所以断断续续的，直到今天才把所有东西都搞懂，而且构建出自己的github博客了。...这部分网上有很多教程，同学们尽量选择时间上近一些的教程，久一些的可能页面选项都不一样了。 最终输入自己的账号名对应的网址，能够看到构建的页面，就算第一步成功了。...我们提交_config.yml、html、md这些文件，推送到远程的服务器仓库上，github内置的jekyll程序会帮我们，利用这些提交的文件，生成html的静态页面。...这些静态页面就是github page博客上看到的东西。 既然逻辑是这样的，那么我们就要根据jekyll的规则来写_config.yml和html、md这些文件。...jekyll会根据_config.yml中的说明来生成静态页面。 _config.yml是全局的一些配置。
在github上创建一个公开的项目，这个就不用解释了。 ? 按照箭头的顺序，创建一个公开的项目。 2.进入项目 ----> setting ?...3、打开settings，有一个Github Pages 的设置，点击 source 中的本来的 None ，使其变成 master 分支，也就是作为部署github pages 的分支，然后点击 save...4、页面刷新之后，再看 github pages 设置框处，多了一行网址。 5、直接访问对应的网址中你的页面。 ?
GitHub 是开发者的乐园，作为一个开发者应该多去逛一逛。 本节示例将会实现如下所示的效果： 正如同学们在上面看到的，这个设计跟 GitHub 的登录表单非常像。...首先还是跟往常一样新建一个 HTML 页面，在文件中输入英文 !...在登录页面添加徽标 接下来在 class=“wrapper” 的 div 的最顶部添加一个图标。在这里使用了 GitHub 网站的 logo。...创建新帐户的选项 最后，我们来添加一个新账户的选项，在 class=“form” 的 div 后面添加如下代码。如果你去看 GitHub 网站的登录表单，也会看到这个选项。...登录页面的效果就实现啦！
Jekyll 介绍 Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...我选择直接从Github下载我的博客相关的内容（对应地址为：https://github.com/bihe0832/bihe0832.github.io） 对于基于Jekyll的静态站点的目录结构，可以参考官网提供的...在项目根目录直接命令行运行 jekyll build 即可查看构建结果 ➜ blog git:(master) ✗ jekyll build Configuration file: /github...静态网站服初始化一般需要约 3 分钟 qcloud_jekyll_hosting.png 将静态页面部署到托管服务 你阔以直接选择将构建好的静态页面上传到托管服务，但是考虑到博客的更新频率，还是选择使用官方提供的工具来上传
GitHub Pages Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名...Github Pages 支持 自动利用 Jekyll 生成站点，也同样支持纯 HTML 文档，将你的 Jekyll 站点托管在 Github Pages 上是一个不错的选择。...仓库空间不大于1G 每个月的流量不超过100G 每小时更新不超过 10 次 Github Pages 使用 Jekyll 来构建内容，那么 Jekyll 是什么呢？...Jekyll 介绍 Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。
如果你没有一个名为 index.md（或者 index.html）的文件，我们会使用你的 README 文件作为站点的首页，就和你在 GitHub 浏览一个仓库时看到的一样。...如果你没有在你的站点配置文件里指定主题（或者根本就没有站点配置文件），我们将设置一个最小化的、和其它在 GitHub 上的 Markdown 文件的外观及体验相匹配的默认主题。...虽然这些改动应该不会影响大多数现有站点的建设，但对于早期的 Jekyll 用户来说有两个潜在的陷阱： 如果你的站点遍历了所有页面（例如， forpageinsite.pages），你可能会发现现在有额外的页面...所以， GitHub Pages 生成过程是可以尽可能透明和可定制的，所有上面提到的特性都是以 Jekyll 的开源插件的形式实现的，也就是 Jekyll Optional Front Matter ,...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全
这里我fork了官方的单页面webpack模版，并做了动态构建的优化。...v-router的webpack模版页面 访问 http://localhost:8088/pages/module/detail.html 是我写的一个示例简单页面 二、多页面构建原理 多页面构建的原理并不复杂...，开发构建速度慢的问题会越来越严重，博主的项目有几十个页面，每个npm run dev都到等待几十秒时间。...理想的情况是，npm run dev的时候，只构建一个页面，每次访问到新页面的时候，再重新构建这个新页面的内容。...w=1515&h=942&f=png&s=129183] 项目github : https://github.com/xyc-cn/webpack 参考资料: Webpack实战 - 使用动态 entry
简单实践构建一个简单的用户管理页面可以让我们演示如何使用 EasyUI 来创建常见的用户界面，并实现基本的数据展示和操作功能。...5.1 构建一个简单的用户管理页面5.1.1 页面布局首先，我们需要创建一个包含用户列表、添加用户按钮和编辑用户对话框的页面布局。<!...下面是一个使用 EasyUI 实现数据图表展示的示例。5.2 使用 EasyUI 实现数据图表展示5.2.1 页面布局首先，我们需要创建一个包含图表容器和一些控制按钮的页面布局。<!...用户可以在页面上选择不同类型的图表（柱状图、折线图、饼图），然后点击对应的按钮，页面就会加载相应类型的模拟数据并绘制图表。...5.3 开发一个基于 EasyUI 的任务管理系统5.3.1 页面布局我们需要创建一个包含任务列表、添加任务按钮和编辑任务对话框的页面布局。<!
Jekyll 是采用Ruby语言实现的将纯文本转换为静态博客网站的利器，也是本站点的关键技术。本文将对Jekyll中的进阶内容进行说明。...基本过程 Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...值得注意的是，如果需要托管在 Github 或者其他提供 Pages 服务的站点，服务商不一定提供运行插件的环境。...教程链接 免费构建自己的博客-开发环境安装 免费构建自己的博客-编写第一篇博客 免费构建自己的博客-管理博客代码与发布到Github 免费构建自己的博客-Jekyll进阶 免费构建自己的博客-进一步丰富博客
前 言 我的这个博客站点大约始建于2010年以前，使用过 dlog、pjblog、zblog 等博客程序，也手动建立使用过纯静态 HTML 页面，大约2010年开始使用 WordPress。...最后我甚至动了想把 hexo 转换成 jekyll 念头，因为 hexo 和 jekyll 结构基本一样，完全支持.md的文章格式，更重要的是 GitHub Pages 原生的支持 jekyll，几乎不需要任何设置...但是不久发现了一个大问题，GitHub Pages 不支持 jekyll 插件。...没错，简单的借助 jekyll 插件实现的比如翻页，搜索等功能，在 GitHub Pages 几乎实现不了，这样就很绝望了。于是一切再次停下来。...在自己的 GitHub 仓库里修改网站，或者拟写 markdown 格式的日志，webify 会自动构建和部署，生成新的静态页面并发布。
即可以看到页面的一个 3D 层级关系，像是这样： 这个功能有几个不错的作用： 页面层级概览 快速厘清页面 z-index 层级之间的关系 用于排查一些重绘过程（滚动过程）页面卡顿 当然，也会存在一些问题...同时，虽然可以快速厘清页面 z-index 层级之间的关系，但是有的时候没法很好的快速看清整个页面嵌套关系。 同时，它只能看整个页面的概览，无法选取部分节点进行观察。...本文，就将介绍一种，快速通过 CSS，构建页面深度关系的 3D 视图，快速清晰的厘清页面 DOM 层级及深度之间的关系。并且可以运用在不同的节点单独进行观察。...我们需要用到元素本身，和元素的两个伪元素，构建元素的立体效果。...这里我尝试的是，当前正在写作的 Github Issues 页面，看看效果： 当然，可能颜色没有搭配的特别好，但是要知道，整儿页面的 DOM 结构是相当之复杂的。
对于博客网站，可以使用 Next.js 静态生成功能来构建博客页面。...你可以查看它的 GitHub 和官网了解更多。 4.Jekyll star 数 45K+。 Jekyll 是一个基于 Ruby 的静态站点生成器，支持多种主题和插件。...Jekyll 提供了丰富的文档和社区支持，使用起来也比较简单。Jekyll 也是非常流行的静态网站生成器之一。 你可以查看它的 GitHub 和官网了解更多。 5.Nuxt star 数 44K+。...Eleventy 自称是 Jekyll 的替代品，旨在以更简单的方法来制作更快的静态网站。 你可以参照它的 GitHub和官网来了解更多的细节。 13.Pelican star 数 10K+。...Brunch 的主要特点包括： 快速构建 - Brunch 可以快速构建站点和应用程序，通过缓存和增量编译等技术可以提高构建速度。
Jekyll 是一个简单的博客形态的静态站点生产机器，通过它，我们可以搭建一个完整的可发布的静态博客网站。...创建完成后，点击进入我们刚刚创建的云环境，进入云环境管理界面： 在云环境管理界面，在右侧的网站托管中，我们可以将刚刚项目中生成好的静态页面给上传上去。...首先，安装cloudbase cli: npm install -g @cloudbase/cli 执行登录命令： tcb login 在弹出的页面确认授权: 授权成功后，在项目中运行： jekyll...One More Thing Jekyll 也可以运行在 GitHub Page 上，但是有时，我们需要忍受Github Page龟速的问题。...所以，建议在腾讯云云开发的静态网站托管中，部署我们的Jekyll博客站点。
事实上，静态网站的使用在增加。 在本文中，您将看到三种最好的静态站点生成器的比较，它们的优点、缺点以及您应该使用它们的原因。 静态站点生成器使构建静态站点轻而易举。...变身怪医（Jekyll） Jekyll由Tom Preston-Werner在2009年发布，是这个列表中最老的静态站点生成器。 Jekyll是用Ruby编写的，全世界都在使用。...由于加入了GitHub——Tom Preston-Werner是GitHub的联合创始人——Jekyll获得了开源社区的大量关注和贡献。...与Hugo一样，Jekyll也附带一个HTTP服务器，通常用于生成博客。它也经常用于生成投资组合。 虽然Jekyll对页面内容使用Markdown，但它也使用液体模板语言来处理页面。...结论 静态站点生成器有助于使静态站点易于构建、修改和扩展。在本文中，您已经看到了三种最好的静态站点生成器。您应该能够更好地决定下一个静态站点项目使用哪种工具。 有什么问题吗?
Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...) ├── .jekyll-metadata (该文件帮助 Jekyll 跟踪哪些文件从上次建立站点开始到现在没有被修改，哪些文件需要在下一次站点建立时重新生成。...该文件不会被包含在生成的站点中。)...把整个文件都push到github上去 git add --all #添加到暂存区 git commit -m "提交jekyll默认页面"
您可以使用Jekyll主题选择器在网上创建和发布GitHub页面。如果您喜欢在本地工作，您可以使用GitHub桌面或命令行。...GitHub页面站点的软限制为每小时10个构建。...请注意，在发布时页面总是可以公开访问的，即使它们的存储库是私有的。 GitHub页面的类型页面默认的域&主机位置在GitHub位置上，用于构建您的页面站点。...来自主分支的内容将用于构建和发布您的GitHub页面站点。 您只能为用户或组织页面存储库使用自己的帐户名称。这样的存储库乔/ bob.github。io不会构建用户页面站点。...进一步阅读GitHub页面 请参阅“ 自定义GitHub页面 ”了解更多关于使用批准的Jekyll插件和GitHub Pages网站，创建自定义404页面以及查看可用存储库元数据的更多信息。
站点 先看看阮一峰的《搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门》，看完对整个站点应该就有了一个大概的认识。...在jekyll templates中可以看到，是支持include的，只需要在根目录下创建一个名为_includes的目录，把页面片放到这个目录中，然后用下面的语法加载对应的页面片文件即可： {% include...添加RSS 要方便定阅，可以添加RSS输出到我们的站点上，大体分为三步： 1.修改设置文件 name: 站点名称 description: 站点说明 url: 站点URL 2.在github上有一个jekyll-rss-feeds...评论系统 网上有几个可以嵌入到静态站点的评论系统，像多说、友言、畅言等等，还有Jekyll模板里默认使用的DISQUS。...Sublime Text Snippet scopes hexo 如何搭建一个独立博客——简明Github Pages与Hexo教程 Hexo在github上构建免费的Web应用 hexo你的博客 Git
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
