Jekyll 博客搭建笔记 1

时间 2020-02-10

标签 jekyll 博客搭建笔记繁體版

原文原文链接

新建一个 blog的文件夹

mkdir blog
cd blog  
vi _config.yml  // 建立并保存  _config.yml 文件 :wq 保存退出

建立几个必要文件

_includes // 在布局文件中可经过 include [filename] 引用
_layouts // 布局文件
_posts // 存放重要博客文章
assets // 静态文件

配置 _config.yml 文件

经过site[variableName]访问这些配置信息，部分可迁移至_data中javascript

下面是个人配置，其余具体参照官方文档 —— 配置css

# Site settings
author: kasmine
title: Kasmine Blog
SEOTitle: 廖晓娟的博客 | Kasmine Blog
header-img: assets/img/home-bg.jpg
post-img: assets/img/post-bg.jpg
email: momo736929286@gmail.com
description: ""
keyword: ""
# url: "https://www.kasmine.cn"              # your host, for absolute URL
baseurl: "/kasmine.blog"  
imgurl: "/kasmine.blog/assets/img"
# baseurl: ""                             # 本地调试使用
# imgurl: "/assets/img"

# Basic settings

# 添加sass
# @see http://markdotto.com/2014/09/25/sass-and-jekyll/
sass: 
  sass_dir: _scss
  # style: compressed


# SNS settings
RSS: false
weibo_username:     kasmine
# zhihu_username:     kasmine
github_username:    Me-Momo
#twitter_username:  kasmine
facebook_username:  kasmineLiao
# linkedin_username:  firstname-lastname-idxxxx

# Build settings
# from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead.
highlighter: rouge
# permalink: pretty
permalink: /:year/:month/:day/:title.html
paginate: 10
exclude: ["less","node_modules","Gruntfile.js","package.json","README.md","README.zh.md"]
anchorjs: true                          # 如何设置

# Gems
# from PR#40, to support local preview for Jekyll 3.0
gems: [jekyll-paginate]

markdown: kramdown
kramdown:
  input: GFM                            # use Github Flavored Markdown !important

# Analytics settings TODO:
# Google Analytics
ga_track_id: 'UA-89922034-1'            # Format: UA-xxxxxx-xx
# ga_domain:

# Sidebar settings
sidebar: true                           # whether or not using Sidebar.
sidebar-about-description: "认真学习 n(*≧▽≦*)n <br />拥抱大前端 "
sidebar-avatar: /assets/img/avatar-kasmine.jpg      # use absolute URL, seeing it's used in both `/` and `/about/`

# Catalog settings
catalog: true

建立_includes

主要是一些nav,footer等等公共组件html

header.html
footer.html
nav.html
siderbar.html

等等，根据实际抽取公共部分前端

建立_layouts

default.html // 基础布局
post.html // 文章布局
page.html // 页面布局

可按照本身的需求扩展java

添加 anchor-js自定义锚点

@see https://www.bryanbraun.com/anchorjs/node

function async(u, c) {
            var d = document,
                t = 'script',
                o = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
            o.src = u;
            if (c) {
                o.addEventListener('load', function (e) {
                    c(null, e);
                }, false);
            }
            s.parentNode.insertBefore(o, s);
        }
        async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
            anchors.options = {
                visible: 'always',
                placement: 'left',
                icon: '?  '
            };
            anchors.add('.custom-link')
        })

使用 canonical URL

优化搜索引擎搜索jquery

<!-- Canonical URL -->
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

The SEO benefit of rel=canonicalgit

Choosing a proper canonical URL for every set of similar URLs improves the SEO of your site. Because the search engine knows which version is canonical, it can count all the links towards all the different versions, as links to that single version. Setting a canonical is similar to doing a 301 redirect, but without actually redirecting.github

来源： https://yoast.com/rel-canonical/ajax

使用 Pygments

实现代码的高亮

<!-- Pygments Github CSS -->
<link rel="stylesheet" href="{{ "/assets/css/syntax.css" | prepend: site.baseurl }}">

添加目录

主要原理就是查找博文页面的 h标签，而后动态添加 id,并添加侧边栏导航

@see https://huangxuan.me/

<!-- Side Catalog -->
<script type="text/javascript">
    function generateCatalog (selector) {
        var P = $('div.posts-container'),a,n,t,l,i,c;
        a = P.find('h1,h2,h3,h4,h5,h6');
        a.each(function () {
            n = $(this).prop('tagName').toLowerCase();
            i = "#"+$(this).prop('id');
            t = $(this).text();
            c = $('<a href="'+i+'" rel="nofollow">'+t+'</a>');
            l = $('<li class="'+n+'_nav"></li>').append(c);
            $(selector).append(l);
        });
        return true;    
    }
    generateCatalog(".catalog-body");
    // toggle side catalog
    $(".catalog-toggle").click((function(e){
        e.preventDefault();
        $('.side-catalog').toggleClass("fold")
    }))
    /*
     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
     */
    async("/js/jquery.nav.js", function () {
        $('.catalog-body').onePageNav({
            currentClass: "active",
            changeHash: !1,
            easing: "swing",
            filter: "",
            scrollSpeed: 700,
            scrollOffset: 0,
            scrollThreshold: .2,
            begin: null,
            end: null,
            scrollChange: null,
            padding: 80
        });
    });
</script>

使用命令行参数

jekyll server --port PORT // 选择本身想要的端口
jekyll server -watch   // 实现jekyll 实时更新

其余插件推荐

请看Jekyll博客搭建笔记第三篇

评论区配置

参考：这篇文章

第三方插件

jquery.tagcloud.js

原文地址