“jekyll组装”

发表于 | 分类于 ， ，
  |   字数统计 1427

安装组件以及配置环境首先要保证一个网络友好或极速的环境，以避免组件缺失造成各种各样的奇葩难解的错误。Jekyll源代码可定制化很强，各个主题结构布局也是差异悬殊，我们也只有细读官方文档结合主题内容展示，以此来寻找线索脉络。

主题组件套用

套用jekyll-theme-chirpy主题里的插件，bundle install安装过程出现了问题。

解决办法 csdn-An error occurred while installing nokogiri (1.6.2)

1
2
3
 
An error occurred while installing nokogiri (1.6.2), and Bundler cannot
continue.
Make sure that `gem install nokogiri -v '1.6.2'` succeeds before bundling.

Solution: bundle config build.nokogiri –use-system-libraries bundle install

关于nokogiri的说明，它实际上就是一个Ruby解析HTML/XML的ruby库，bundle config build.nokogiri --use-system-libraries每次Bundler需要安装nokogiri gem时,它都会传递您指定的位置。

图标定义

将其他图标设置定义成sidebar.html中的HOME图标前缀设置

1
 
        <i class="fa-fw fas  ml-xl-3 mr-xl-3 unloaded"></i>

在_tabs文件夹中创建gallery添加画廊照片图片 fa-camera-retro

1
2
3
4
5
 
---
title: gallery
icon:  fa-camera-retro
order: 5
---

图标设计来自 fontawesome

页脚时间

https://api.github.com/repos/, 输入用户以及项目名称，并使用 create_at 查看时间。

在页脚中定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 <div class="showtime" style="text-align: center;">
      <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <span id="busuanzi_container_site_uv"><i class="fa fa-eye"></i><span id="busuanzi_value_site_uv"></span></span>
      <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
  <script>
      var now = new Date(); 
      function createtime() { 
          var grt= new Date("3/21/2018 07:27:00");//此处修改你的建站时间或者网站上线时间 
          now.setTime(now.getTime()+250); 
          days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
          if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
          mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
          snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
          document.getElementById("timeDate").innerHTML = "笔记应用在线 "+dnum+" 天 "; 
          document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
      } 
  setInterval("createtime()",250);
  </script>
    </div>

jekyllthemes实验问题点🧪

⚠️：在fork theme-chirpy基础上，所使用minima主题，导致_post的文章内容异常，样式也不能切换成minma主题。

分页例子

阅读源插件jekyll-paginate文档，再来看看使用的主题对分页使用方式

  • 写的不明所以（时间、支持）
  • 主题实现方案不一，代码适配兼容方面上手体验太差
  • 使用bundle可以查看我们套用主题的一些安装插件

由此也得知：一些插件也是跟于主题适配相关，比如说在_includes、_layouts或是一些新建文件夹加入一些特殊的代码等等。

1
2
3
 
paginate: 10
paginate_path: "/blog/page:num" 
#“blog”前不输入“/”，很有则会以“blog”为主页

解决分页规划返回链接问题，以及用户点击链接前往索引或不存在页面造成的死链页面。

1
2
3
4
 
# config.yml
permalink: /:year/:month-:day-:hour.:minute.html
# topbar.html
<a href="/archives/"}

图标布局

基于默认主题的覆盖安装

常规的使用Jekyll new创建博客文件，额外安装主题并将bundle info主题文件复制到当前博客目录下，得到警告提示：

1
2
3
4
5
6
7
8
9
10
11
 
   Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/chanlonhoo/Desktop/myblog/_site/about/index.html
                     - about.markdown
                     - /Users/chanlonhoo/Desktop/myblog/_tabs/about.md
                    
          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/chanlonhoo/Desktop/myblog/_site/index.html
                     - index.html
                     - index.markdown

删掉由minima主题生成的about.markdown、index.markdown即可。

_config.yml for git

有关于下面两列错误，只需要git init与git add . 以及 git commit -m "commit"即可

1
2
 
fatal: not a git repository (or any of the parent directories): .git
fatal: ambiguous argument 'HEAD': unknown revision or path not in the working tree.

分页

分页文件夹生成控制

jekyllcn-分页功能，官方已停止使用的，相对支持文档也少。利用官网给出的信息，我们做出设置如下：

config.yml

1
2
 
paginate: 10
paginate_path: "blog/page:num"

_includes/post-paginator.html

1
2
3
4
5
6
7
8
 

{% if show %}
<!-- show number -->
      <li class="page-item {% if i == paginator.page %} active{% endif %}">
        <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}blog/page{{ i }}/{% endif %}">{{ i }}</a>
      </li>
{% else %}

这样在_site生成的分页文件夹就整合在一块了，不会发生凌乱。另外在css中除了user- select还有pointer-events: none;，可以禁止用户去点击或者说是误触某一个元素。

简书-_qisen-独立博客Jekyll进阶技巧

moonagic-Jekyll文章列表摘要设置

配置环境跨平台想法

在经过windows平台下hexo+Next配置后稳定了较长时间，但由于个人办公迁移到Mac，又得重新配置。重新配置也是各种报错频繁，兼容性问题较多。所以就想到：反正都是内容写作，hexo、Jekyll上手适应性远不如Wordpress。

后来发现docker能满足这一需求，有必要再了解及使用docker。