【Jekyll】留言功能、新建页面、Unity3D项目上传

一、前言

前段时间分享了使用GitHub Pages + Jekyll搭建自己的技术博客，今天就完善一下留言功能，讲一下新建页面怎么做，Unity3D项目上传到个人技术博客怎么做

二、新建页面

在jekyll这个框架下新建页面是很简单的，在pages目录下，新建一个md文件：



输入以下表头：

---
layout: page
title: 新页面
titlebar: NewPage
menu: NewPage
permalink: /NewPage
---

layout：布局就用页面的布局
title：标题
titlebar：标题栏
menu：菜单栏，这个用于_config.yml文件中的.menu菜单的显示
permalink：这个页面的链接

完整：

---
layout: page
title: 新页面
titlebar: NewPage
menu: NewPage
permalink: /NewPage
---

<div class="row">
    <div class="col-md-12">
        <ul id="posts-list">
            {% for post in site.posts %}
                {% if post.category=='NewPage' %}
                <li class="posts-list-item">
                    <div class="posts-content">
                        <span class="posts-list-meta">{{ post.date | date: "%Y-%m-%d" }}</span>
                        <a class="posts-list-name bubble-float-left" href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
                        <span class='circle'></span>
                    </div>
                </li>
                {% endif %}
            {% endfor %}
        </ul> 
    </div>
</div>
<script>
    $(document).ready(function(){
        // Enable bootstrap tooltip
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    });
</script>

上面这个代码主要就是获取到post文件夹中，博客的类别，然后根据年月日显示出来。

可以了

三、分页功能

添加分页功能：

		<!-- Pagination -->
        {% include pagination.html %}

完整代码：

---
layout: page
title: 新页面
titlebar: NewPage
menu: NewPage
permalink: /NewPage
---

<div class="row">
    <div class="col-md-12">
        <ul id="posts-list">
            {% for post in site.posts %}
                {% if post.category=='NewPage' %}
                <li class="posts-list-item">
                    <div class="posts-content">
                        <span class="posts-list-meta">{{ post.date | date: "%Y-%m-%d" }}</span>
                        <a class="posts-list-name bubble-float-left" href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
                        <span class='circle'></span>
                    </div>
                </li>
                {% endif %}
            {% endfor %}
        </ul> 
		<!-- Pagination -->
        {% include pagination.html %}
    </div>
</div>
<script>
    $(document).ready(function(){
        // Enable bootstrap tooltip
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    });
</script>

这就可以了，是不是很神奇，其实这都是Jekyll帮我们已经处理完了，我们只需要调用就行了。
pagination.html的代码：

{% if paginator.total_pages > 1 %}
<div class="pagination text-align">
    <div class="btn-group">

        {% if paginator.previous_page %}
        {% if paginator.previous_page == 1 %}
        <a href="/" class="btn btn-outline">&laquo;</a>
        {% else %}
        <a href="/page{{paginator.previous_page}}" class="btn btn-outline">&laquo;</a>
        {% endif %}
        {% else %}
        <button disabled="disabled" href="javascript:;" class="btn btn-outline">&laquo;</button>
        {% endif %}

        {% if paginator.page == 1 %}
        <a href="javascript:;" class="active btn btn-outline">1</a>
        {% else %}
        <a href="/" class="btn btn-outline">1</a>
        {% endif %}

        {% for count in (2..paginator.total_pages) %}
        {% if count == paginator.page %}
        <a href="javascript:;" class="active btn btn-outline">{{count}}</a>
        {% else %}
        <a href="/page{{count}}" class="btn btn-outline">{{count}}</a>
        {% endif %}
        {% endfor %}

        {% if paginator.next_page %}
        <a href="/page{{paginator.next_page}}" class="btn btn-outline">&raquo;</a>
        {% else %}
        <button disabled="disabled" href="javascript:;" class="btn btn-outline">&raquo;</button>
        {% endif %}

    </div>
</div>
{% endif %}

分页代码，不太懂。。。有兴趣可以研究一下

四、留言功能

这个留言版怎么开启已经在这篇文章讲过了 GitHub Pages + Jekyll搭建自己的技术博客，不知道怎么开启的可以再看一下，今天就讲一下页面中怎么添加留言板功能
代码：

<!-- Comments -->
<div class="comment">
    {% include comments.html %}
</div>

哎，对，就这。。。

完整代码：

---
layout: page
title: 新页面
titlebar: NewPage
menu: NewPage
permalink: /NewPage
---

<div class="row">
    <div class="col-md-12">
        <ul id="posts-list">
            {% for post in site.posts %}
                {% if post.category=='NewPage' %}
                <li class="posts-list-item">
                    <div class="posts-content">
                        <span class="posts-list-meta">{{ post.date | date: "%Y-%m-%d" }}</span>
                        <a class="posts-list-name bubble-float-left" href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
                        <span class='circle'></span>
                    </div>
                </li>
                {% endif %}
            {% endfor %}
        </ul> 
		<!-- Pagination -->
        {% include pagination.html %}
		<!-- Comments -->
		<div class="comment">
         {% include comments.html %}
		</div>
    </div>
</div>
<script>
    $(document).ready(function(){
        // Enable bootstrap tooltip
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    });
</script>

可以啦。

然后留言板可能出现一下问题：

Error:Network Error

网络错误，等一会就好了，或者换个浏览器，或者清理一下缓存，反正都不是大问题

Error:Validation Failed

这个是因为由于label太长导致的，文章名称经URL编码后添加到issues的label里，但是label的长度上限是50个字符，所以有些文章就会报错了。

怎么解决呢？
先找到 /_includes/comments.html 文件
找到以下内容：

var gitalk = new Gitalk({
            id: decodeURI('{{ page.url }}'),
            clientID: '{{ site.gitalk.clientID }}',
            clientSecret: '{{ site.gitalk.clientSecret }}',
            repo: '{{ site.gitalk.repo }}',
            owner: '{{ site.gitalk.owner }}',
            admin: ['{{ site.gitalk.owner }}'],
            labels: ['gitment'],
            perPage: 50,
        })

ID处加上 decodeURI 函数，可以把 page.url 为 ‘/%E7%A8%8B%E5%BA%8F%E5%91%98/2019/08/27/java-url-urlconnection.html’ 转成 “/程序员/2019/08/27/java-url-urlconnection.html”
转了以后 id 的长度就变短了，然后问题就解决了。

五、Unity3D项目上传

这里主要讲一下Unity3D打包出来的WebGL文件怎么上传的，首先将项目打包出来，平台选择WebGL：

1、然后将整个文件夹复制到/assets/Game目录下，因为assets文件夹里面的资源可以直接被调用
2、在/pages文件里面新建一个Game_Tetris.md文件
3、修改Game_Tetris.md

---
layout: page
title: Unity3D开发小游戏
titlebar: Game_Tetris
menu: Game_Tetris
subtitle:  <span class="mega-octicon octicon-person"></span>&nbsp;&nbsp; 恬静的小魔龙，程序猿一枚
css: ['about.css', 'sidebar-popular-repo.css', '../../bower_components/flag-icon-css/css/flag-icon.min.css']
permalink: /Game_Tetris
---

表头模板基本不变，然后修改一下title、titlebar、permalink的参数。

然后打开index.html文件，将内容复制过来

重要的是这几个链接修改一下：

完整代码

---
layout: page
title: Unity3D开发小游戏
titlebar: Game_Tetris
menu: Game_Tetris
subtitle:  <span class="mega-octicon octicon-person"></span>&nbsp;&nbsp; 恬静的小魔龙，程序猿一枚
css: ['about.css', 'sidebar-popular-repo.css', '../../bower_components/flag-icon-css/css/flag-icon.min.css']
permalink: /Game_Tetris
---

<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity3D 俄罗斯方块游戏</title>
    <link rel="shortcut icon" href="/assets/Game/Game_Tetris/TemplateData/favicon.ico">
    <link rel="stylesheet" href="/assets/Game/Game_Tetris/TemplateData/style.css">
    <script src="/assets/Game/Game_Tetris/TemplateData/UnityProgress.js"></script>  
    <script src="/assets/Game/Game_Tetris/Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "/assets/Game/Game_Tetris/Build/Game_Tetris.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
	<div class="about">
		<span><h1><font color="#FF0000">Unity3D开发《俄罗斯方块》游戏</font></h1></span><br>
		<span><h3><font color="#0000FF">操作说明：箭头上下左右控制，一行填满就消除</font></h3></span><br>
		<span><h3><font color="#AAAAFF">使用说明：加载比较慢，黑屏是正常，稍等一下就行了</font></h3></span><br>
	</div>
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">全屏</div>
      </div>
    </div>
	<!-- Comments -->
    <div class="comment">
       {% include comments.html %}
    </div>
  </body>
</html>

效果如下：

有什么疑问，可以在下面留言，博客看到会第一时间回复的。

欢迎点赞，评论，转发