搭建博客遇到的问题

关于中文目录

使用UTF-8编码时当category为中文时,在通过url进入文章时报错

  1. "\xAE\xBE" from GBK to UTF-8

修改_config.yml文件将

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

修改为

  1. permalink: /:year/:month/:day/:title

关于内容摘要

想要输出摘要的截至地方,打上标签

  1. <!--break-->

然后使用(记得将\去掉)

  1. \{\{ post.content | split:'<!--break-->' | first }}

关于搜索

需要加入的文件

  1. jquery.js
  2. jquery-ui.js
  3. jquery-ui.css

在根目录下新建一个search.xml

  1. \---
  2. layout: none
  3. \---
  4. <\?xml version="1.0" encoding="UTF-8" \?>
  5. <articles>
  6. {\% for post in site.posts %\}
  7. <article>
  8. <title>{\{ post.title }\}</title>
  9. <url>{\{ site.url }\}{\{ post.url }\}</url>
  10. <date>{\{ post.date | date_to_utc | date: '%Y-%m-%d'}\}</date>
  11. </article>
  12. {\% endfor %\}
  13. </articles>

注意去掉\

导航加上搜索框

  1. <div class="navbar-form navbar-right">
  2. <input class="form-control" type="text" id="blog-search" size="30" placeholder="Search" required />
  3. </div>

新建search.js

  1. $(function() {
  2. $.ajax({
  3. url: "/search.xml",
  4. dataType: "xml",
  5. success: function( xmlResponse ) {
  6. var data = $( "article", xmlResponse ).map(function() {
  7. return {
  8. value: $( "title", this ).text() + ", " +
  9. ( $.trim( $( "date", this ).text() ) ),
  10. url: $("url", this).text()
  11. };
  12. }).get();
  13. $( "#blog-search" ).autocomplete({
  14. source: data,
  15. minLength: 0,
  16. select: function( event, ui ) {
  17. window.location.href = ui.item.url;
  18. }
  19. });
  20. }
  21. });
  22. });

搜索实现完毕

关于分页

相关代码

代码高亮有两种

使用google-code-prettify

https://code.google.com/p/google-code-prettify/downloads/list

下载 google-code-prettify

博客中使用的样式是 desert.css

  1. <link href="/google-code-prettify/desert.css" rel="stylesheet">
  2. <script src="/google-code-prettify/prettify.js"></script>
  1. $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto');
  2. window.prettyPrint && prettyPrint();

修改为全部显示行号

  1. li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }

使用Pygment

参考

TOC

* auto-gen TOC:

{:toc}

段落首行缩进

  1. p {
  2. text-indent:30px;
  3. }
  4. li P {
  5. text-indent:0px;
  6. }
问题1 博客3 jekyll2