在github中搭建用org-mode和org2jekyll发布及用lunr.js中文搜索的jekyll静态独立博客

网上相关教程繁多，搜索阅读即可完成此步。

wget -N http://nodejs.org/dist/node-latest.tar.gz
tar xzvf node-latest.tar.gz && cd node-v*
./configure
make
sudo make install

wget https://cache.ruby-lang.org/pub/ruby/2.3/ruby-2.3.0.tar.gz
tar xzvf ruby-2.3.0.tar.gz
./configure
make
sudo make install

gem install bundler , emacs Gemfile ,

group :jekyll_plugins do
  gem 'jekyll', '3.1.2'
  gem 'jekyll-last-modified-at'
  gem 'nokogiri'
  gem 'therubyracer'
  gem 'stringex'

bundle install

npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt
npm install

注意此处安装的顺序应该是，先npm install -g grunt-cli，再sudo npm install grunt 如果使用gem安装grunt，目前会造成grunt版本过低，是0.0.3版，实际应该是0.4.5版以上。 或者选择安装的版本号 sudo npm install grunt@v0.4.5 --save-dev

.
├── _amsf
│   └── _config.yml
├── _app
│   └── ......
├── ATTRIBUTION.md
├── CHANGELOG.md
├── _config.dev.yml
├── _config.init.yml
├── _config.yml
├── CONTRIBUTING.md
├── CONVENTIONS.md
├── _deploy.yml
├── Gemfile
├── Gemfile.lock
├── Gruntfile.coffee
├── LICENSE
├── package.json
├── README.md
└── TODOS.md

其中_config.yml就是博客的配置文件，在该文件中，Almace Scaffolding主题将源文件放到专门的_app文件夹中， source: _app ，另一个_amsf文件夹负责本主题的升级。 其他_lanyouts, _includes, _posts, _drafts等在其他主题中放置配置和草稿、文章的文件夹挪至_app中，本文后面提到的标签云、搜索、评论等功能在这些文件中配置。

├── assets
│   ├── fonts
│   ├── img
│   │   ├── img_2016_05_02__13_27_36.png
│   │   └── ......
│   ├── _less
│   │   └── user.less
│   ├── svg
│   │   └── kai.svg
│   └── themes
│       └── curtana
│           ├── css
│           │   └── app.css
│           ├── _js
│           │   ├── app.js
│           │   └── lightense.js
│           └── _less
│               ├── app.less
│               ├── colors.less
│               ├── common.less
│               ├── components
│               │   └── randomized.less
│               ├── mixins.less
│               ├── plugins.less
│               ├── print.less
│               ├── reset.less
│               └── variables.less
├── _data
│   ├── authors.yml
│   ├── curtana.yml
│   └── nav.yml
├── _drafts
├── favicon.ico
├── favicon.svg
├── feed-atom.xml
├── feed-json.json
├── _includes
│   ├── _amsf.html
│   └── themes
│       └── curtana
│           ├── includes
│           │   ├── archive_list
│           │   ├── back_top_button
│           │   ├── categories_list
│           │   ├── contacts_list
│           │   ├── content.html
│           │   ├── css-variables.html
│           │   ├── fixed_container
│           │   ├── footer.html
│           │   ├── header.html
│           │   ├── links_list
│           │   ├── open-graph.html
│           │   ├── page-item.html
│           │   ├── post-search.html
│           │   ├── post-tags.html
│           │   ├── recent_posts_list
│           │   ├── repos_list
│           │   ├── search_box
│           │   ├── tag_cloud
│           │   └── top.html
│           └── layouts
│               ├── default.html
│               ├── page.html
│               └── post.html
├── js
│   ├── date.format.js
│   ├── jquery.js
│   ├── jquery.lunr.search.js
│   ├── lunr.js
│   ├── lunr.min.js
│   ├── mustache.js
│   ├── search.js
│   ├── search.min.js
│   ├── URI.js
│   └── URI.min.js
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _org
│   ├── 2014-04-01-custom-css.md.bak
│   └── ......
├── _pages
│   ├── about.md
│   ├── archives.html
│   ├── art.html
│   ├── ......
│   ├── email-signup.md
│   ├── email-subscribed.md
│   ├── email-unsubscribed.md
│   ├── email-verify.md
│   ├── error.md
│   ├── index.html
│   ├── search.md
│   └── tags.html
├── _plugins
│   ├── debug.rb
│   └── jekyll_lunr_js_search.rb
├── _posts
│   ├── attitude
│   │   └── 2015-07-27-848.md
│   ├── fiction
│   ├── .......
├── robots.txt
└── sitemap.xml

对于一般github博客来说， 使用一个复杂功能的主题，可能需要的东西比较多，因此可以从选用其他简洁主题开始。 如果使用官方原主题，会在方便使用的基础上更具有网页发布的功能

具体位置是/_includes/themes/curtana/includes

<a href="{{ site.JB.tags_path }}" title="查看所有标签"><i class="icon-fixed-width icon-tags"></i> 标签云</a>
<span title="标签总数">{{ site.tags | size }}</span>
<div id="tag-cloud">
{\% assign first = site.tags.first \%}
{\% assign max = first[1].size \%}
{\% assign min = max \%}
{\% for tag in site.tags offset:1 \%}
  {\% if tag[1].size > max \%}
    {\% assign max = tag[1].size \%}
  {\% elsif tag[1].size < min \%}
    {\% assign min = tag[1].size \%}
  {\% endif \%}
{\% endfor \%}
{\% assign diff = max | minus: min \%}
{\% if diff != 0 \%}
  {\% for tag in site.tags \%}
    {\% assign temp = tag[1].size | minus: min | times: 36 | divided_by: diff \%}
    {\% assign base = temp | divided_by: 4 \%}
    {\% assign remain = temp | modulo: 4 \%}
    {\% if remain == 0 \%}
      {\% assign size = base | plus: 9 \%}
    {\% elsif remain == 1 or remain == 2 \%}
      {\% assign size = base | plus: 9 | append: '.5' \%}
    {\% else \%}
      {\% assign size = base | plus: 10 \%}
    {\% endif \%}
    {\% if remain == 0 or remain == 1 \%}
      {\% assign color = 9 | minus: base \%}
    {\% else \%}
      {\% assign color = 8 | minus: base \%}
    {\% endif \%}
    <a href="{{ site.JB.tags_path }}#{{ tag[0] }}-ref" style="font-size: {{ size }}pt; color: #{{ color }}{{ color }}{{ color }};">{{ tag[0] }}</a>
  {\% endfor \%}
{\% endif \%}
</div>

---
layout: default
title: Tags Cloud
permalink: /tags/
desc: 標签雲・ ワークス・TBC
---
<div id="search">
  <form action="/search" method="get">
    <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
  </form>
</div>

<div class="span4" style="text-align: center;">
  <div class="row-fluid">
    <div class="span12 padded">
      <h3 style="color:#333333">Tags Cloud</h3>
</dev>
</dev>
</dev>
<ul class="tag-cloud">
  {\% for tag in site.tags \%}
<a style="font-size: {{ tag | last | size | times: 1000 | divided_by: site.tags.size | plus:70 }}%"  href="#{{ tag | first | slugize }}">
  &nbsp  {{ tag | first | tags }}  &nbsp
</a>
{\% endfor \%}
</ul>

<div class="span4" style="text-align: left;">
 <h2>列表</h2>
  
<div id="archives">
{\% for tag in site.tags \%}
  <div class="archive-group">
    {\% capture tag_name \%}{{ tag | first }}{\% endcapture \%}
    <li style="color:#ff00b4"
        id="#{{ tag_name | slugize }}">{{ tag_name }}</li>
    <a name="{{ tag_name | slugize }}"></a>
    {\% for post in site.tags[tag_name] \%}
    <article class="archive-item">
      <div><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></div>
    </article>
    {\% endfor \%}
  </div>
{\% endfor \%}
</div>
</div>

其中 <a style="font-size: {{ tag | last | size | times: 1000 | divided_by: site.tags.size | plus:70 }}%" href="#{{ tag | first | slugize }}"> 中的 times 控制标签云中字体大小比例变化，如果标签较小的话把数值设小点。 markdown的文件头（—三个中横线中的内容）用来生成 单独页面。

<style>
{\% for tag in site.tags \%}
.tag-cloud {
list-style: none;
word-break:keep-all;
padding: 0;
padding-right: 6%;
text-align: justify; 
font-size: 16px;
a{
display: inline-block;
margin: 0 12px 12px 0; 
}}
# archives {
  padding: 5px;
}
.archive-group {
margin: 15px;
border-top: 1px solid #ddd;
}
.archive-item {
margin-left: 12px;
}
.post-tags {
  text-align: left;
}
{\% endfor \%}
</style>

其中 word-break:keep-all; 和 display: inline-block; 用来控制标签云中的关键词不断行（在iphone 5s的浏览器上仍然无效）， padding-right: 6%; 用来控制右侧的空白距离， .post-tags { text-align: left; 用来控制标签在文章的左侧还是右侧。

{\% include {{ amsf_theme_base }}/includes/post-tags.html \%}

上面路径要修改正确。

项目地址是slashdotdash/jekyll-lunr-js-search

安装插件后可以实现，搜索网上有教程。

C-c，C-e，h或m 原生功能，对于单个文件没有问题，但是对于网站特别是jekyll静态网站，因为涉及文件头和网站结构，因此更适合下面方式。

通过配置.emacs快速截图，预定义保存位置，自动生成带时间戳的图片并自动插入文中。

(defun my/img-maker ()
  "Make folder if not exist, define image name based on time/date"
  (setq myvar/img-folder-path (concat default-directory "../assets/img/"))

                                        ; Make img folder if it doesn't exist.
  (if (not (file-exists-p myvar/img-folder-path)) ;[ ] refactor thir and screenshot code.
      (mkdir myvar/img-folder-path))

  (setq myvar/img-name (concat "img_" (format-time-string "%Y_%m_%d__%H_%M_%S") ".png"))
  (setq myvar/img-Abs-Path (concat myvar/img-folder-path myvar/img-name)) ;Relative to workspace.

  (setq myvar/relative-filename (concat "./assets/img/" myvar/img-name))
  (insert "[[" myvar/relative-filename "]]" "\n")
  )

(defun my/org-screenshot ()
  "Take a screenshot into a time stamped unique-named file in the
 sub-directory (%filenameIMG) as the org-buffer and insert a link to this file."
  (interactive)
  (my/img-maker)
                                        ;(make-frame-invisible)
  (lower-frame)
  (call-process "import" nil nil nil myvar/img-Abs-Path)

  (raise-frame)
                                        ;(make-frame-visible)
  (org-display-inline-images)
  )

目前配置的目录"./assets/img/"在生成的html文件中，会多出一个“. 目录”，但如果没有这个点,生成的格式为img src=file: ///又会多出file：//导致无法识别根目录。 目前我解决办法是修改自动生成的 [[]] 链接为img src=/assets/img。