simple

这是针对移动端开发的响应式 Jekyll 主题,效果看 demo,源码在 GitHub,觉得不错点个 star。

主题特性包括但不限于:

  1. 在线编辑、新建、发布文章
  2. GitHub 官方语法写作
  3. MathJax 支持属性公式渲染
  4. mermaid 提供流程图渲染
  5. 支持 B 站、YouTube 视频嵌入
  6. Gitalk 提供评论支持
  7. 原生 JS 实现站内搜索

快速搭建

你可以选择直接在 GitHub 上操作,或者在本地上修改主题再发布到自己的仓库里。

线上操作

  1. fork 本仓库
  2. 修改仓库名为 username.github.io,创建 master 分支并设置为默认分支。
  3. 修改 _config.yml 文件中的相应个人信息。

浏览器访问 https://username.github.io 查看新网站。

本地运行

  1. 本地安装 Jekyll
  2. clone 主题到本地
  3. 进入主题根目录后运行 jekyll serve

浏览器中输入 http://localhost:4000 预览。

网站样式设置

可通过修改 _sass/_variables.scss 文件中的 CSS 变量改变主题样式,包括但不限于

  1. 通过 --font 修改字体
  2. 通过 --body-bg 修改网页背景的颜色
  3. 通过 --heading-color 修改标题的颜色
  4. 通过 --link-color 修改链接的颜色

针对移动端开发的响应式 Jekyll 主题的更多相关文章

  1. 移动端开发之响应式开发和bootstrap基础

    响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...

  2. Web移动前端开发-——bootstarp响应式框架

    移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕 ...

  3. 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

    在线演示1 本地下载     申请达人,去除赞助商链接 如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢 ...

  4. Bootstrap3.1开发的响应式个人简历模板

    在线演示 使用bootstrap3快速开发一个响应式的个人简历,如果有兴趣了解如何开发,请访问GB课程库,地址如下: Bootstrap3构建响应式前端设计师简历模板 http://www.gbtag ...

  5. 2015年最有价值的30个响应式WORDPRESS主题

    http://www.chinaz.com/design/2015/0521/408204.shtml 必须承认,Wordpress依然是目前最流行.最易用的内容管理系统,合理地使用Wordpress ...

  6. 10款免费的响应式 WordPress 主题下载

    响应式和现代设计风格的 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中禁用/启用响应模式.下面这个列表收集了10 ...

  7. 15款免费的响应式 WordPress 主题下载

    响应式设计主题最适合杂志网站,博客网站,想要在自己网站上展示自己作品的用户.支持视网膜显示使其在 iPad,iPhone,Mackbook,iMac 等设备上有更高的分辨率. 响应式和现代设计风格的多 ...

  8. 12款支持移动设备的响应式 WordPress 主题

    响应式和现代设计风格的多用途 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中启用响应模式. 今天,这个列表收集了 ...

  9. 12款免费的响应式 WordPress 主题下载

    响应式和现代设计风格的多用途 WordPress 主题能够非常灵活的适应所有设备.而高级主题能够更轻松定制,您可以从主题选项中禁用/启用响应模式.多用途的响应式设计的主题是最适合杂志网站,博客网站,想 ...

随机推荐

  1. 数据挖掘入门系列教程(十二)之使用keras构建CNN网络识别CIFAR10

    简介 在上一篇博客:数据挖掘入门系列教程(十一点五)之CNN网络介绍中,介绍了CNN的工作原理和工作流程,在这一篇博客,将具体的使用代码来说明如何使用keras构建一个CNN网络来对CIFAR-10数 ...

  2. 【linux题目】第一关

    详细的解答:https://github.com/Zoe233/Linux/blob/master/[题目]5.Linux了解程度测试题解析.ipynb 1. 创建一个目录/data 解答: mkdi ...

  3. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  4. 求x>0时,y=x^3-6x^2+15的极值

    解: 当x→∞时,y也→∞,所以y没有最大值. y=x3-6x2+15=-4*(x/2)*(x/2)*(6-x)+15 而根据几何平均数小于等于算术平均数的定理,(x/2)*(x/2)*(6-x)在x ...

  5. elementUI字体图标不显示问题

    原文链接: 点我 自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误: GET http://localhost:9090/WEB-INF/ ...

  6. Codeforce-CodeCraft-20 (Div. 2)-A. Grade Allocation

    n students are taking an exam. The highest possible score at this exam is m. Let ai be the score of ...

  7. 图论--网络流--费用流--POJ 2156 Minimum Cost

    Description Dearboy, a goods victualer, now comes to a big problem, and he needs your help. In his s ...

  8. P1495 CRT,P4777 EXCRT

    updata on 2020.4.11 修正了 excrt 的一处笔误 CRT 求解方程: \[\begin{cases} x \equiv a_1 \pmod {m_1}\\ x \equiv a_ ...

  9. 【Kafka】监控及运维——kafka-eagle

    目录 简单介绍 概述 安装部署 一.环境要求 二.下载源码包并解压 三.准备数据库 四.修改配置文件 五.配置环境变量 六.启动kafka-eagle 七.成功运行 简单介绍 概述 Kafka-eag ...

  10. 【Hadoop离线基础总结】Hive的基本操作

    Hive的基本操作 创建数据库与创建数据库表 创建数据库的相关操作 创建数据库:CREATE TABLE IF NOT EXISTS myhive hive创建表成功后的存放位置由hive-site. ...