我的jekyll配置和修改

主要記錄使用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頁面
  • 使用多說評論
  • 修改博客主體為寬屏模式

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/285117.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/285117.shtml
英文地址,請注明出處:http://en.pswp.cn/news/285117.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

[轉]白話阿里巴巴Java開發手冊高級篇

不久前&#xff0c;阿里巴巴發布了《阿里巴巴Java開發手冊》&#xff0c;總結了阿里巴巴內部實際項目開發過程中開發人員應該遵守的研發流程規范&#xff0c;這些流程規范在一定程度上能夠保證最終的項目交付質量&#xff0c;通過在時間中總結模式&#xff0c;并推廣給廣大開發…

C語言試題165之求三色旗問題

??個人主頁:個人主頁 ??系列專欄:C語言試題200例 ??推薦一款刷算法、筆試、面經、拿大公司offer神器?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 題目:有一根繩…

spring boot微服務通用部署啟動腳本

2019獨角獸企業重金招聘Python工程師標準>>> 通用springboot微服務啟動、停止腳本。 #!/bin/bash # # chkconfig: - 20 80 # description: Starts and stops the App. # author:vakingeENVdev RUNNING_USERvakinge ADATEdate %Y%m%d%H%M%S APP_NAMEpassport-serve…

day10 多媒體(文字 圖片 音頻 視頻)

1計算機表示圖形的幾種方式bmp:以高質量保存 用于計算機jpg:以良好的質量保存 用于計算機或者網絡png:以高質量保存圖片大小的計算公式&#xff1a;圖片的總像素*每個像素的大小 (多出的一點是圖片的信息)單色&#xff1a;每個像素最多可以表示2種顏色 要么是黑要么是…

VB實現6大排序算法---動態過程展示(建議收藏)

VB實現6大排序算法&#xff1a;插入排序、基數排序、快速排序、希爾排序、選擇排序、歸并排序。可以隨機生成指定個數的數據&#xff0c;顯示排序過程&#xff0c;給出排序結果&#xff0c;計算排序算法消耗的時間。 生成隨機數&#xff1a; 排序結果&#xff1a; 插入排序&…

C# 實現 Actor并發模型 (案例版)

啥是Actor模型Actor (英語翻譯 演員) 這個概念要回溯到面向對象程序設計的本身上來&#xff0c;更偏向于現實世界&#xff0c;現實世界就是由單個個體&#xff08;人&#xff09;與其他個體或(人&#xff09;通訊&#xff08;消息&#xff09;組成的現實世界&#xff0c;所以&a…

oracle--number

1. oracle的number類型是oracle的內置類型之一&#xff0c;是oracle的最基礎數值數據類型。在9iR2及其以前的版本中只支持一種適合存儲數值數據的固有數據類型&#xff0c;在10g以后&#xff0c;才出現了兩種新的數值類型&#xff0c;即推出本地浮點數據類型(Native Floating-P…

超詳細C語言版數據結構:圖的深度優先遍歷(推薦收藏)

文章目錄一、鄰接矩陣存儲圖的深度優先遍歷過程分析二、結果分析三、C語言編程實現圖的深度優先遍歷四、圖的遍歷及其應用一、鄰接矩陣存儲圖的深度優先遍歷過程分析 對圖1這樣的無向圖&#xff0c;要寫成鄰接矩陣&#xff0c;則就是下面的式子&#xff1a; 一般要計算這樣的問…

Navicat Premium 64 bit 12.1.25

Navicat Premium可讓你以單一程序同時連接到 MySQL、MariaDB、SQL Server、SQLite、Oracle 和 PostgreSQL 數據庫&#xff0c;是一個可多重連接的數據庫管理工具&#xff0c;它讓管理不同類型的數據庫更加方便。 官方下載地址&#xff1a;https://www.navicat.com.cn/download/…

C語言試題166之整數逆序輸出

??個人主頁:個人主頁 ??系列專欄:C語言試題200例 ??推薦一款刷算法、筆試、面經、拿大公司offer神器?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 題目:將一個從…

[JMX一步步來] 7、用JDK5.0的JConsole來連接MBean

前面所有看效果都是通過Html網頁來看的。JDK5.0自帶了一個jmx客戶端&#xff0c;叫jconsole&#xff0c;位于c:\jdk\bin\jconsole.exe。我們來用用這個客戶端來連接Mbean Server。一、vm參數方式1、還是用第一篇的那個HelloAgent&#xff0c;修改HelloAgent&#xff0c;將第一句…

記一次 .NET 某新能源系統 線程瘋漲 分析

一&#xff1a;背景 1. 講故事前段時間收到一個朋友的求助&#xff0c;說他的程序線程數瘋漲&#xff0c;尋求如何解決。等我分析完之后&#xff0c;我覺得這個問題很有代表性&#xff0c;所以拿出來和大家分享下&#xff0c;還是上老工具 WinDbg。二&#xff1a;WinDbg 分析 1…

【原創】請避免GO語言中的攜程空跑(CPU突然激增)

其實GO語言從1.6版本開始非常不錯了&#xff0c;GC性能優化非常到位&#xff0c;并且各種并行設計比從新實現一套C版本的確是方便不少。 語言包也很多&#xff0c;庫也相對穩定&#xff0c;完全可以適用于生產環境。 本文主要是給剛剛入門新手注意一個攜程空跑的問題&#xff0…

在Linux上啟動oracle 11g OEM

[rootfmw ~]# su - oracle[oraclefmw ~]$ emctl start dbconsole轉載于:https://blog.51cto.com/weichanglong/1762783

[轉]ES7、ES8、ES9、ES10新特性大盤點

ES7、ES8、ES9、ES10新特性大盤點 本文轉自&#xff1a;https://mp.weixin.qq.com/s/8bov6788ivV0sHzmwrn5lw 以下文章來源于前端工匠 &#xff0c;作者浪里行舟君 前端工匠 我是浪里行舟&#xff0c;Github博客4000star作者&#xff0c;致力于打造一系列能夠幫助初中級工程師…

熱榜!!!數據結構與算法:C語言版---數組與稀疏矩陣---強勢來襲!

數組是各種計算機語言中經常使用到的重要數據結構&#xff0c;一般的說&#xff1a;在內存中申請一片連續地址的存儲空間、存儲這些數、就稱為數組。 在C語言中&#xff0c;申請連續的存儲空間是很容易的事情&#xff0c;但難在多維數組的組織、以及數組數據的壓縮上&#xff…

C語言試題167之字符串加密和解密算法

??個人主頁:個人主頁 ??系列專欄:C語言試題200例 ??推薦一款刷算法、筆試、面經、拿大公司offer神器?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 題目:在本實例…

第一聲問候

前一篇《Emacs 是一臺計算機》理解了 Emacs 身為計算機的本質之后&#xff0c;在 Emacs 里編程就順理成章了。不過&#xff0c;在此之前&#xff0c;還需要略微介紹一下 Emacs 最基本的操作。 系統的不一致&#xff0c;令人有點煩躁 現在&#xff0c;也可以坦然地說&#xff0c…

破解支付寶AR紅包

支付寶新出的AR紅包沒多久&#xff0c;就有人破解了&#xff0c;大致原理是將上面的像素條遮擋下面的黑條&#xff0c;基本上得到模糊的圖就可以掃到紅包。不過現在大多是ps解決&#xff0c;那得有多麻煩啊&#xff0c;所以我用java寫了一個&#xff0c;效果還不錯。 先截屏&am…

在 Windows 上搭建配置 Jenkins 然后編譯打包 VS 項目

在 Windows 上搭建配置 Jenkins 然后編譯打包 VS 項目獨立觀察員 2022 年 7 月 6 日一、安裝1、下載并安裝 JRE &#xff08;Java 運行環境&#xff09;。2、下載 Windows 版本的 Jenkins 安裝包并安裝。3、安裝 Visual Studio&#xff0c;以供編譯項目使用。4、安裝 Advanced …