網頁設計/JQuery

Simple Works Gallery

contents

  1. 1. 起源
  2. 2. 下載
  3. 3. 使用
    1. 3.1. html
    2. 3.2. css
  4. 4. hexo plugin

起源

鄰近要大學推研究所的時刻，自己做過什麼作品來說，對於推甄時相當重要，一直都沒有好好整理過自己做過什麼，有多少能拿出檯面的項目，現在發現除了 ACM 解題和曾經幫別人寫的作業以外，沒有幾項可以吸引到人的。一樣做一個 hexo tag plugin，將作品展示櫃用一個 generator.js 的方式，將展示櫃內容呈現出來，傳入的方式為 json。同樣地，你可以在這個部落格上方的 Works 看到相關作品介紹。

下載

Download on Github

使用

仍然以 github 上的 project 為優先版本。以下的內容也許不是最新版本。

html

當前採用 json 的原因是因為可以藉由較簡單的方式，以及往後可能使用 ajax 的方式運作。這樣彈性也許會比較大。

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
<script type="text/works-gallery">
{
  "works" : [
      {
        "title": "Chat Room Application",
        "cover": "http://i.imgur.com/oUO30I6.jpg",
        "description": "計算機網路－一個簡單的網路聊天室<br/> Socket programming practice (Java)",
        "download": ["https://github.com/morris821028/hw-ChatRoom"],
        "demo": [],
        "video": ["https://www.youtube.com/watch?v=7ExCn1ipKeg"]
      },
      {
        "title": "Magic Circle",
        "cover": "http://i.imgur.com/Fv8ebBY.jpg",
        "description": "jquery-magic-circle, write funny for friends",
        "download": ["https://github.com/morris821028/jquery-magic-circle"],
        "demo": ["http://morris821028.github.io/jquery-magic-circle"],
        "video": ["https://www.youtube.com/watch?v=TWqmGeuIJLo"]
      },
      {
        "title": "Hex Image Gallery",
        "cover": "http://i.imgur.com/VMf2G1v.png",
        "description": "create beautiful hexagon shapes with CSS3, jquery, write funny for friends",
        "download": ["https://github.com/morris821028/jquery-hex-gallery"],
        "demo": ["http://morris821028.github.io/jquery-hex-gallery/"],
        "video": []
      }
  ]
}
</script>

css

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
.wg-container
{
    background: none repeat scroll 0% 0% #2d2d2d;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px 0;
    color: #ccc;
    line-height: 25.6px;
    margin: 0 -20px;
    overflow: auto;
    padding: 15px 20px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
.wg-container hr
{
    background: #333;
    background-image: -moz-linear-gradient(to right, #333, #ccc, #333);
    background-image: -ms-linear-gradient(to right, #333, #ccc, #333);
    background-image: -o-linear-gradient(to right, #333, #ccc, #333);
    background-image: -webkit-linear-gradient(to right, #333, #ccc, #333);
    border: 0;
    height: 5px;
}
.wg-item
{
    list-style: none;
}
.wg-item .inner
{
    height: 160px;
}
.wg-item li
{
    display: block;
    float: left;
    margin: 16px;
    width: 45%;
}
.wg-item li .header
{
    border: 4px solid #b4b4b4;
    box-shadow: 1px 1px 1px 1px #ccc;
    cursor: pointer;
    float: left;
    height: 256px;
    margin: 5px;
    moz-box-shadow: 1px 1px 1px 1px #ccc;
    overflow: hidden;
    position: relative;
    webkit-box-shadow: 1px 1px 1px 1px #ccc;
    width: 100%;
}
.wg-item li .header:hover a
{
    moz-transform: scale(1.2);
    ms-transform: scale(1.2);
    o-transform: scale(1.2);
    transform: scale(1.2);
    webkit-transform: scale(1.2);
}
.wg-item li .header a
{
    left: 0;
    moz-transition: all 300ms ease-out;
    ms-transition: all 300ms ease-out;
    o-transition: all 300ms ease-out;
    position: absolute;
    transition: all 300ms ease-out;
    webkit-transition: all 300ms ease-out;
}
.wg-item li .image
{
    background-size: cover;
    display: block;
    height: 95%;
    moz-background-size: cover;
    padding: .5em;
    webkit-background-size: cover;
    width: 100%;
}
.wg-item li h3
{
    font-size: 24px;
    font-weight: normal;
    line-height: 22px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}
.wg-item li h3 a:hover
{
    text-decoration: none;
}
.wg-item li ul.links
{
    float: right;
}
.wg-item li .links li
{
    display: block;
    margin-left: 5px;
    margin-right: 0 !important;
    width: initial;
}
.wg-item li .links li a
{
    background: #65a9d7;
    border-radius: 5px;
    box-shadow: 0 1px 0 #000;
    color: #fff;
    font-family: Georgia,Serif;
    font-size: 16px;
    padding: 5.5px 11px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    vertical-align: middle;
    webkit-border-radius: 5px;
    webkit-box-shadow: 0 1px 0 #000;
}
.wg-item .description
{
    font-size: 16px;
    margin: .2em 0;
    text-align: left;
}

hexo plugin

我已經把產生方式寫在 hexo-tag-oj 裡頭，下載使用 hexo-tag-plugin

不過相關的 js 還有 css 要自己擺放，請參考上面的描述項目。

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
{\% ojblock works \%}
{
  "works" : [
      {
        "title": "Chat Room Application",
        "cover": "http://i.imgur.com/oUO30I6.jpg",
        "description": "計算機網路－一個簡單的網路聊天室<br/> Socket programming practice (Java)",
        "download": ["https://github.com/morris821028/hw-ChatRoom"],
        "demo": [],
        "video": ["https://www.youtube.com/watch?v=7ExCn1ipKeg"]
      },
      {
        "title": "Fuzzy System",
        "cover": "http://i.imgur.com/C44Hbrg.png",
        "description": "計算型智慧－廣義型演算法最佳化<br/>Car simulation implements PSO, GA, and fuzzy system (Java)",
        "download": ["https://github.com/morris821028/hw-FuzzySystem"],
        "demo": [],
        "video": ["https://www.youtube.com/watch?v=kt2mu679elU"]
      },
      {
        "title": "UML Editor",
        "cover": "http://i.imgur.com/JCCweao.png",
        "description": "物件導向程式設計－UML 編輯器架構設計<br/>OO design practice & make UML Editor (Java)",
        "download": ["https://github.com/morris821028/hw-UML-Editor"],
        "demo": [],
        "video": ["https://www.youtube.com/watch?v=DKDFy6uFk8Y"]
      },
      {
        "title": "MapleStory 遊戲仿作",
        "cover": "http://i.imgur.com/i62nNgG.png",
        "description": "由於硬碟損壞代碼沒有救回來，只剩下舊版，收錄於 chat room 製作中的一環，由於課程時間不夠，沒有做完。 (Java)",
        "download": ["https://github.com/morris821028/hw-ChatRoom"],
        "demo": [],
        "video": ["https://www.youtube.com/watch?v=TWqmGeuIJLo"]
      },
      {
        "title": "Magic Circle",
        "cover": "http://i.imgur.com/Fv8ebBY.jpg",
        "description": "jquery-magic-circle, write funny for friends",
        "download": ["https://github.com/morris821028/jquery-magic-circle"],
        "demo": ["http://morris821028.github.io/jquery-magic-circle"],
        "video": ["https://www.youtube.com/watch?v=TWqmGeuIJLo"]
      },
      {
        "title": "Hex Image Gallery",
        "cover": "http://i.imgur.com/VMf2G1v.png",
        "description": "create beautiful hexagon shapes with CSS3, jquery, write funny for friends",
        "download": ["https://github.com/morris821028/jquery-hex-gallery"],
        "demo": ["http://morris821028.github.io/jquery-hex-gallery/"],
        "video": []
      }
  ]
}
{\% endojblock \%}