美文网首页
针对移动端开发的响应式 Jekyll 主题

针对移动端开发的响应式 Jekyll 主题

作者: professordeng | 来源:发表于2020-05-23 17:15 被阅读0次

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 主题

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

  • 响应式布局---bootstrap框架

    移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进...

  • js基础(6)

    27、移动端响应式布局开发 响应式布局开发 1、什么是响应式布局开发?把我们开发完成的产品,能够让其适配不同的设备...

  • 四十二、移动端web开发之响应式布局

    一、移动端web开发 1.1、响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同...

  • 再识移动端开发(动态REM)

    前言:之前写过一篇博客介绍响应式移动端开发,而本文会介绍一种非响应式的移动端开发技术:动态REM。看了这两篇文章,...

  • HTML移动端开发

    移动端开发流程详解(建议使用Bootstrap响应式布局) 头部代码 Foo

  • 响应式

    什么是响应式开发:可以响应不同的布局: a) 在移动互联日益成熟的时候,桌面浏览器上开发的网页已经不能满足移动端的...

  • Web工具&框架

    快速开发工具 bootstrap 响应式布局,移动设备优先bootstrap官网 Swiper 移动端滑动效果 S...

  • 有生之年还能免费使用的优质WordPress主题推荐(二)

    9012年,免费的优质WordPress主题第二波! 一、Sweet 主题特点: 1、响应式设计,完美兼容移动端设...

  • 移动端开发-02(响应式)

    1. 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划...

网友评论

      本文标题:针对移动端开发的响应式 Jekyll 主题

      本文链接:https://www.haomeiwen.com/subject/lwdlahtx.html