ro1992613.github.io/collection.html at master · ro1992613/ro1992613.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>GitBlog</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <style>
        html,body{
          height: 100%;
          width: 100%;
      }
      a {
          color:#474747;
      }
    .box {
        box-shadow: 5px 5px 2px #888888;
        transition: all .2s ease;
    }

 .box:hover {
  box-shadow: 10px 10px 5px #888888;
}
  </style>
</head>

<body>
    <header class="am-topbar">
        <h1 class="am-topbar-brand">
            <a href="javascript:void(0);">GitBlog</a>
        </h1>
        <div class="am-collapse am-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li><a href="index.html">首页</a></li>
				<li><a href="admin/index.html#/view/all">新的首页</a></li>
                <li><a href="collection.html">专辑</a></li>
                <li><a href="admin/index.html">后台</a></li>
                <li><a target="_blank" href="https://github.com/ro1992613/gitblog">gitblog项目</a></li>
            </ul>
        </div>
    </header>
    <div style="width:100%;height: auto;display:flex;">
        <div style="flex:12;padding: 5px;height: auto;">
            <div class="am-panel am-panel-default">
                <div class="am-panel-hd">专辑列表</div>
                <div class="am-panel-bd" style="height: auto;">
                    <ul class="am-avg-sm-4" id="collection-list">

                    </ul>
                </div>
            </div>

        </div>
        <div style="flex:4;padding: 5px;">
            <section class="am-panel am-panel-default">
                <div class="am-panel-bd">
                    <iframe height="50"  frameborder="0" scrolling="no" hspace="0"  src="https://i.tianqi.com/index.php?c=code&id=12&icon=1&num=2&site=12">
                    </iframe>
                </div>
            </section>
            <section class="am-panel am-panel-default">
                    <div class="am-panel-hd">关于项目</div>
                    <div class="am-panel-bd">
                        <p>做过很多个的博客了，发现自己做博客最大的问题就是，没钱！虽然也会买一些云服务器，但是还是觉得好贵啊！</p>
                        <p>后来听说可以用github做博客，自己也折腾过hexo之类的东东，但始终用起来很不爽！毕竟是别人定制的东西，很多diy的地方都不是那么尽人意！</p>
                        <p>所以最后决定自己写一个，反正git的页面就是些静态页面呗！自己写个内容管理系统还不是手到擒来！后台用springboot很容易就搞定了，数据库在几番研究后使用了非常轻量的嵌入式数据库，h2！然后数据移植的问题也搞定了！用vue随意搭了个管理页面，写上几个模板，新鲜出炉的gitblog就做好了！</p>
                        <p>接下来，优化模板的样式，增加标签功能，把管理页面嵌入博客，加入评论！！！！</p>
                        <a class="am-btn am-btn-success am-btn-sm"  target="_blank" href="https://github.com/ro1992613/gitblog">查看更多 →</a>
                    </div>
                    </section>
                    <section class="am-panel am-panel-default">
                    <div class="am-panel-hd">文章目录</div>
                    <ul class="am-list blog-list" id="simple-list">
                        <li><a href="#">Google fonts 的字體（sans-serif 篇）</a></li>
                    </ul>
                    </section>
        </div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="store.js"></script>
    <script>
        function addHtml_simple(v){
            var html='<li><a target="_blank" href="'+v.id+'.html"><i class="am-icon-book"></i>'+v.title+'</a></li>';
            return html;
        }

        $(function() {
            $("#simple-list").html("");
            data.map(function(v,index){
                if(index<=10){
                    var html=addHtml_simple(v);
                    $("#simple-list").append(html);
                }
            });
            $("#collection-list").html("");
            collection.map(function(v,index){
                var html='<li class="box"><div style="margin-bottom:2px;margin-left: 15px;" class="am-panel am-panel-primary">';
                html=html+'<div class="am-panel-hd"><i class="am-icon-cog"></i>'+v.collection_name+'</div>';
                html=html+'<div class="am-panel-bd" style="height: auto;">';
                html=html+'<a style="width:100%" class="am-btn am-btn-primary" href="collection_list.html?collection_id='+v.collection_id+'" target="_blank">';
                html=html+'<i class="am-icon-spinner am-icon-spin"></i>前往</a></div></div></li>';
                $("#collection-list").append(html);
            });
        });
    </script>
</body>
</body>

</html>