主要记录使用jekyll搭建博客时的一些配置和修改。

注意: >使用时请删除{和%以及{和{之间的空格。

预览文章

source ~/.bash_profile
jekyll server

添加about me 边栏

参考the5fire的技术博客在index.html页面加入如下代码:

<section>
<h4>About me</h4>
<div>一个Java方案架构师,主要从事hadoop相关工作。<a href="/about.html">更多信息</a>
<br/>
<br/>
<strong><font color="red"><a href="/atom.xml" target="_blank">订阅本站</a></font></strong>
<br/><br/>
联系博主:javachen.june[a]gmail.com
</div>
</section>

添加about页面

在根目录创建about.md并修改,注意:文件开头几行内容如下

title: About
layout: page
group: navigation

设置固定链接

在 _config.yml 里,找到 permalink,设置如下:

permalink: /:categories/:year/:month/:day/:title

修改,markdown实现为redcarpet

首先通过gem安装redcarpet,然后修改_config.yml:

redcarpet:extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "strikethrough", "superscript", "with_toc_data", "highlight", "prettify"]

首页添加最近文章

在index.html页面

<section>
<h4>Recent Posts</h4>
<ul id="recent_posts">{ % for rpost in site.posts limit: 15 %}
<li class="post">
<a href=""></a>
</li>{ % endfor %}
</ul>
</section>

首页为每篇文章添加分类、标签、发表日期以及评论连接

在index.html页面找到<h3><a href="{ { BASE_PATH }}{ { post.url }}">{ { post.title }}</a></h3>,在下面添加:

 <div class="c9">Categories:{ %for cg in post.categories % }<a href="/categories.html#-ref"></a>{ %if forloop.index < forloop.length % },{ %endif%}{ %endfor%}|Tags:{ %for cg in post.tags %}<a href="/tags.html#-ref"></a>{ %if forloop.index < forloop.length %},{ %endif%}{ %endfor%}|Time:<time date="{ { post.date|date: '%Y-%m-%d' }}"></time><a href='#comments' title='分享文章、查看评论' style="float:right;margin-right:.5em;">Comments</a>
</div>

修改h1、h2等标题字体

主要是参考图灵社区的css,在assets/themes/twitter/css/style.css中添加如下css代码:

h1,h2,h3,h4,h5,h6{margin:18px 0 9px;font-family:inherit;font-weight:normal;color:inherit;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999999;}
h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
h3{font-size:18px;line-height:27px;}h3 small{font-size:14px;}
h4,h5,h6{line-height:18px;}
h4{font-size:14px;}h4 small{font-size:12px;}
h5{font-size:12px;}
h6{font-size:11px;color:#999999;text-transform:uppercase;}

添加返回顶部功能

同样是参考了图灵社区的css和网上的一篇js实现。在assets/themes/twitter/css/style.css

.backToTop {display: block;width: 40px;height: 32px;font-size: 26px;line-height: 32px;font-family: verdana, arial;padding: 5px 0;background-color: #000;color: #fff;text-align: center;position: fixed;_position: absolute;right: 10px;bottom: 100px;_bottom: "auto";cursor: pointer;opacity: .6;filter: Alpha(opacity=60);
}

assets/themes/twitter/js添加jquery和main.js,main.js内容如下:

jQuery.noConflict();
jQuery(document).ready(function(){var backToTopTxt = "▲", backToTopEle = jQuery('<div class="backToTop"></div>').appendTo(jQuery("body")).text(backToTopTxt).attr("title","Back top top").click(function() {jQuery("html, body").animate({ scrollTop: 0 }, 120);}), backToTopFun = function() {var st = jQuery(document).scrollTop(), winh = jQuery(window).height();(st > 200)? backToTopEle.show(): backToTopEle.hide();    //IE6下的定位if (!window.XMLHttpRequest) {backToTopEle.css("top", st + winh - 166); }};backToTopEle.hide(); jQuery(window).bind("scroll", backToTopFun);jQuery('div.main a,div.pic a').attr('target', '_blank');
});

添加文章版权说明

_includes/themes/twitter/post.html中文章主体下面添加如下代码:

<hr>
<div class="copyright">
<p><strong>本文固定链接:</strong><a href='{ {page.url}}'>http://blog.javachen.com/2013/08/31/my-jekyll-config.html</a></p>
<p><strong>原创文章,转载请注明出处:</strong><a href='{ {page.url}}'>JavaChen Blog</a></p>
</div>

并在assets/themes/twitter/css/style.css中添加如下css代码:

.copyright {
margin: 10px 0;
padding: 10px 20px;
line-height: 1;
border-radius: 5px;
background: #f5f5f5;
}

添加read more功能

参考Jekyll - Read More without plugin,在index.html找到 ,然后修改为:

{ % if post.content contains "<!-- more -->" %}
{ { post.content | split:"<!-- more -->" | first % }}
<h4><a href='{ {post.url}}' title='Read more...'>Read more...</a></h4>
{ % else %}
{ { post.content}}
{ % endif %}

然后,在文章中添加<!-- more -->即可。

添加搜索栏

参考Jekyll Bootstrap - Create Simple Search box,在_includes/themes/twitter/default.html导航菜单下面添加:

<form class="navbar-search pull-left" id="search-form"><input type="text" id="google-search" class="search-query" placeholder="Search">
</form

添加js:

jQuery("#search-form").submit(function(){var query = document.getElementById("google-search").value;window.open("http://google.com/search?q=" + query+ "%20site:" + "http://blog.javachen.com");
});

其他

  • 添加404页面
  • 使用多说评论
  • 修改博客主体为宽屏模式

我的jekyll配置和修改相关推荐

  1. mysql免安装如何改密码_mysql免安装版配置与修改密码的教程

    第一步:配置环境变量(我的解压路径:G:\mysql\mysql-5.7.21-winx64 ) MYSQL_HOME=你解压的路径 PATH = ;%MYSQL_HOME %\bin; PATH变量 ...

  2. 泰拉瑞亚服务器config修改,泰拉瑞亚配置怎么修改_泰拉瑞亚配置修改方法介绍...

    泰拉瑞亚配置怎么修改呢,还有很多玩家还不知道的,下面小编为玩家们带来了泰拉瑞亚配置修改方法介绍,一起来看看吧. 泰拉瑞亚配置修改方法介绍 Config文件 (1)Wiki链接 http://terra ...

  3. mysql数据库密码安全参数_MySQL 密码参数配置与修改 validate_password

    MySQL 密码参数配置与修改 validate_password 场景 通过root用户创建travel_agency数据库,目标是,新建一个用户然后对仅对该用户开放travel_agency数据库 ...

  4. jekyll 配置环境变量——zsh

    jekyll 配置环境变量--zsh 在尝试使用github搭建个人主页的过程中,遇到了一些问题,这里记录下. 在安装ruby.gem之后,通过gem安装jekyll后,执行jekyll -v命令时遇 ...

  5. mysql密码参数_MySQL 密码参数配置与修改 validate_password

    MySQL 密码参数配置与修改 validate_password 场景 通过root用户创建travel_agency数据库,目标是,新建一个用户然后对仅对该用户开放travel_agency数据库 ...

  6. yum mysql的安装目录在哪_linux下yum安装 mysql 及详细配置及修改mysql默认目录

    linux下yum安装 mysql 及详细配置及修改mysql默认目录. 一.[root@sample ~]# yum -y install mysql-server ← 安装MySQL -..略 I ...

  7. Windows ❀ 使用CMD配置或修改IP地址与DNS命令

    文章目录 Windows配置IP地址 1.Manual手动配置地址 2.DHCP自动获取地址 Windows配置IP地址 下面以192.168.1.1/24.网关192.168.1.254.DNS11 ...

  8. linux redhat配置网卡,Linux_RedHat服务器网卡阵列配置攻略,网卡阵列配置1.修改vi /etc/rc.d/r - phpStudy...

    RedHat服务器网卡阵列配置攻略 网卡阵列配置1.修改vi /etc/rc.d/rc.local文件,增加以下内容(注意这里添加的是eth0.eth1两个网口) 复制代码代码如下: ifenslav ...

  9. Android Studio 默认配置路径修改

    前言 Android Studio 安装完成后,默认会在 C 盘对应用户目录下生成存储和缓存目录文件,我们需要迁移文件并配置索引路径,使 AS 到新目录读取我们的配置 .android:我们在 AVD ...

最新文章

  1. pp助手苹果版_生日助手时间管理软件免费版下载-生日助手倒计时app苹果版下载ios...
  2. android程序表白,几条曲线构建Android表白程序
  3. java操作redis并发_使用Redis incr解决并发问题的操作
  4. r语言算巢式设计方差分析_R语言学习笔记(七):方差分析
  5. 统计物理中积分计算和态密度计算要点
  6. 正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码,这样做会导致应用程序挂起。
  7. 我的世界服务器无限开号,我的世界开挂指令大全表一览!39条命令无限可能性
  8. 【背包DP练习】洛谷 P5020货币系统 P1757通天之分组背包 P1064[NOIP2006 提高组]金明的预算方案 P5322 [BJOI2019]排兵布阵
  9. window7系统的电脑如何调节亮度?
  10. 一年降本 40%:基于云服务的技术成本精细化运营策略
  11. 中旅投资计划战略入股开元森泊,成为其第二大股东
  12. C++实现聊天程序(QQ类型)
  13. phpexcel的读取和导出
  14. 1370:最小函数值(minval)
  15. 并查集——奇偶性(Parity)
  16. 实用记账本,告别月光不是梦
  17. java定义一个圆_JAVA:定义一个圆类Circle,成员变量:半径 radius;
  18. FPGA之动态数码管显示实验
  19. Android稳定性测试工具Monkey的使用
  20. 物理学建模及仿真平台Chrono安装

热门文章

  1. propattr区别和用法,以多选框为例
  2. enum操作--获取枚举里的最大值
  3. [单选题]$array = array('a','b','c','d'); $array_now = array_splice($array,2); print_r($array_now);...
  4. 大话设计模式笔记 享元模式
  5. richTextBoxFontClass
  6. Silverlight中使用MIRIA进行触屏编程
  7. osx doc to html,macos – 在OSX上安装Git HTML帮助
  8. 安卓APP_ 布局(8) —— 基于 RecyclerView 的 ViewPager2翻页
  9. java 混码_kotlin java 混合代码 maven 打包实现
  10. java map的理解_java中的hashmap理解