个人博客分页功能

引言：jekyll官方提供了分页插件，但是文档说的不是很清楚，有兴趣的可以去看看Pagination

集成Pagination

• 修改_config.yml, 在空白位置写入以下代码

  plugins:
    - jekyll-paginate
    
  paginate: 10
  paginate_path: "/page:num/"
  

• 修改Gemfile

  # 将这个注释掉
  # gem "jekyll", "~> 3.8.5"
  
  # This is the default theme for new Jekyll sites. You may change this to anything you like.
  gem "minima", "~> 2.0"
  
  # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
  # uncomment the line below. To upgrade, run `bundle update github-pages`.
  # 放开这条命令的注释，并且在终端执行 bundle update
  gem "github-pages", group: :jekyll_plugins
  
  # If you have any plugins, put them here!
  group :jekyll_plugins do
    # gem "jekyll-feed", "~> 0.6"
    # 加入下面这行代码
    gem "jekyll-paginate"
  end
  

• 将站点根目录下的index.md文件后缀改为html
• 将首页显示博客列表的div块里的html代码改为以下代码

  <!-- 由于在代码块中写liquid语言，会被执行，因此代码块中用[替换{，用]替换}。请大家自行替换回去。 -->
  [% for post in paginator.posts %]
  <ul class="breadcrumb" style="margin-left: 0px;">
  	<li style="width: 100%"><a class="postlink" href="[[ post.url | prepend: site.baseurl ]]">[[ post.title ]]</a><span
  		 style="float: right; color: #999999; font-weight: 300;">[[ post.date | date: "%Y-%m-%d" ]]</span></li>
  </ul>
  [% endfor %]
    
  <!-- Pagination links -->
  [% if paginator.total_pages > 1 %]
  <footer style="margin-bottom: 0px; text-align: center;">
    
    
  	<ul class="pagination" style="margin: 0px;">
  		<li>
  			[% if paginator.previous_page %]
  			<a href="[[ paginator.previous_page_path | relative_url ]]">
  				&laquo;
  			</a>
  			[% else %]
  			<span style="color: rgb(105,105,105);">&laquo;</span>
  			[% endif %]
  		</li>
  		[% for page in (1..paginator.total_pages) %]
  		<li [% if page==paginator.page %] class="active" [%- endif-%]>
  			<a [% if page==1 %] href="[[ paginator.previous_page_path | relative_url ]]" [%- else -%] href="[[ site.paginate_path | relative_url | replace: ':num', page ]]"
  			 [%- endif-%]>[[page]]</a>
  		</li>
  		[% endfor %]
  		<li>
  			[% if paginator.next_page %]
  			<a href="[[ paginator.next_page_path | relative_url ]]">
  				&raquo;
  			</a>
  			[% else %]
  			<span style="color: rgb(105,105,105);">&raquo;</span>
  			[% endif %]
  		</li>
  	</ul>
    
    
  </footer>
  [% endif %]
  

• 重新启动 jekyll serve 查看效果

  注意：当博客数量不足两页时，分页会自动隐藏