Coder Social home page Coder Social logo

kia126.github.io's Introduction

Jekyll主题: SimpleGray

这是一个由造轮子工程师设计的jekyll站点主题,中文名称:极简灰

利用这个模板可以帮助你在GitHub上快速的搭建一个极简风格的博客站点。

SimpleGray

如何使用

开始之前

首先请确保你已经了解GitHub Pagesjekyll是如何使用的(推荐阅读:Publishing a Blog with GitHub Pages and JekyllJekyll-Bootstrap,扩展了解:Octopress)。

获得源代码

直接clone这个仓库到本地:

$ git clone --recursive git://github.com/mytharcher/SimpleGray.git your-repo-name

注意!

除非你想改进这个主题,否则请不要fork此项目作为你博客的起点,因为fork后你的所有提交和推送都会在整个network图中显示出来。

所以更推荐你使用clone的方式创建自己的站点,以免给所有使用此主题的人造成干扰。

修改站点信息

要将这个主题修改为自己的站点,有更多的工作要做。一部分变量可以直接在_config.yml里配置。这里列了一个清单,可以按此步骤进行修改。

  1. 站点名称

    修改_config.yml文件中的变量:name为站点名称,host为站点域名。

  2. 博客的分类

    作者在jekyll的使用过程中一直未找到方便管理分类列表的方式,所以在这个主题里使用了两组变量和文件夹配置来管理博客文章的分类。鉴于一般分类不会太多,暂时使用手动处理也不会太麻烦。

    首先修改_config.yml文件中的custom.category(Map)和custom.categories(List)两组变量,务必互相对应。

    然后参照category/default目录对应之前的变量设置更多分类索引文件夹,并修改其中的index.html,用对应分类的变量名替换之前的。

    完成之后就可以在文章中使用你自己定义的分类了。

  3. 作者信息

    你应该看到_config.yml中有一部分meta变量的内容都是作者相关的信息,恩,就是这了,修改里面author信息块就可以了。

    其中Gravatar头像标识需要使用你自己的gravatar注册的邮箱MD5值替换,就可以在页面上显示自己的头像了。

    PS: 页面右侧作者信息块中有个隐藏的作者邮件地址,为了防止被爬虫抓取,我把邮件地址写在了assets/css/site.css里,打开看看,你能找到!

  4. Disqus云评论代码

    _config.ymlauthor配置部分也有disqus一项,配置为你创建的站点短名称标识串即可。之后每一篇日志后就会显示评论列表了,但这个功能只有在真实线上域名的时候才会生效。

  5. 站内搜索

    如果你需要站内搜索功能,那么最好的办法就是申请Google Custom Search(CSE)服务。

    主题中已经配置了作者站点的站内搜索为默认引擎,具体设置也在_config.yml中的author部分,gcse字段。将其中引擎用户ID字符串改为你自己的即可。

  6. 安装Google Analytics或其他站点统计代码

    主题作者对访问量不是很敏感,所以没有安装统计代码。如果需要安装,可以在_layout/page.tpl文件中加入统计代码,之后每个生成的页面就都可以被统计到了。

  7. 修改CNAME

    按照jekyll官方的说明,使用你自己的域名替换CNAME文件中的内容,如果有多个别名,每行一个。

基于Reveal.js的PPT模板

SimpleGray默认引入了Reveal.js作为演示页面的展示引擎。在任意一篇博客中把layout变量设置为presentation(即使用演示模板)就可以将文章页转化为一个PPT浏览。具体语法请参照Reveal.js主页中的说明。

JavaScript相关扩展功能

这个主题使用了作者造轮子工程师开发的elf+js,这是一个和jQuery一样简单的JS基础库,详细的请点击链接进入官网了解。

全站相关的JS都在assets/js/site.js一个文件里,不大,提供了几个功能:

  • 代码高亮初始化

  • Disqus评论初始化

  • 站内搜索初始化

  • 滚动页面时自动延迟加载对应在显示区域内的文章

    _config.ymlcustom中新增一个配置项scrollingLoadCount,用于配置滚屏时自动加载的文章数量,“0”为不在滚屏时加载。

其他自己摸索吧,代码就那么点,都很简单的,哥实在懒得写了。

基于此主题的站点

如果你也使用了这个主题,可以项目wiki里添加你的站点链接。

kia126.github.io's People

Contributors

kia126 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.