Skip to content

Commit ecb05f9

Browse files
michaelliaomichaelliao
committed
add templates
1 parent 4b6c095 commit ecb05f9

9 files changed

Lines changed: 790 additions & 0 deletions

File tree

‎awesome-python-webapp/www/templates/__base__.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<!--
3+
{% macro pagination(url, page) %}
4+
<ul class="uk-pagination">
5+
{% if page.has_previous %}
6+
<li><a href="{{ url }}{{ page.page_index - 1 }}"><i class="uk-icon-angle-double-left"></i></a></li>
7+
{% else %}
8+
<li class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
9+
{% endif %}
10+
<li class="uk-active"><span>{{ page.page_index }}</span></li>
11+
{% if page.has_next %}
12+
<li><a href="{{ url }}{{ page.page_index + 1 }}"><i class="uk-icon-angle-double-right"></i></a></li>
13+
{% else %}
14+
<li class="uk-disabled"><span><i class="uk-icon-angle-double-right"></i></span></li>
15+
{% endif %}
16+
</ul>
17+
{% endmacro %}
18+
-->
19+
<html>
20+
<head>
21+
<meta charset="utf-8" />
22+
{% block meta %}<!-- block meta -->{% endblock %}
23+
<title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title>
24+
<link rel="stylesheet" href="/static/css/uikit.min.css">
25+
<link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
26+
<link rel="stylesheet" href="/static/css/awesome.css" />
27+
<script src="/static/js/jquery.min.js"></script>
28+
<script src="/static/js/sha1.min.js"></script>
29+
<script src="/static/js/uikit.min.js"></script>
30+
<script src="/static/js/sticky.min.js"></script>
31+
<script src="/static/js/vue.min.js"></script>
32+
<script src="/static/js/awesome.js"></script>
33+
{% block beforehead %}<!-- before head -->{% endblock %}
34+
</head>
35+
<body>
36+
<nav class="uk-navbar uk-navbar-attached uk-margin-bottom">
37+
<div class="uk-container uk-container-center">
38+
<a href="/" class="uk-navbar-brand">Awesome</a>
39+
<ul class="uk-navbar-nav">
40+
<li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li>
41+
<li><a target="_blank" href="http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000"><i class="uk-icon-book"></i> 教程</a></li>
42+
<li><a target="_blank" href="https://github.com/michaelliao/awesome-python-webapp"><i class="uk-icon-code"></i> 源码</a></li>
43+
</ul>
44+
<div class="uk-navbar-flip">
45+
<ul class="uk-navbar-nav">
46+
{% if __user__ %}
47+
<li class="uk-parent" data-uk-dropdown>
48+
<a href="#0"><i class="uk-icon-user"></i> {{ __user__.name }}</a>
49+
<div class="uk-dropdown uk-dropdown-navbar">
50+
<ul class="uk-nav uk-nav-navbar">
51+
<li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li>
52+
</ul>
53+
</div>
54+
</li>
55+
{% else %}
56+
<li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陆</a></li>
57+
<li><a href="/register"><i class="uk-icon-edit"></i> 注册</a></li>
58+
{% endif %}
59+
</ul>
60+
</div>
61+
</div>
62+
</nav>
63+
64+
<div class="uk-container uk-container-center">
65+
<div class="uk-grid">
66+
<!-- content -->
67+
{% block content %}
68+
{% endblock %}
69+
<!-- // content -->
70+
</div>
71+
</div>
72+
73+
<div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
74+
<div class="uk-container uk-container-center uk-text-center">
75+
<div class="uk-panel uk-margin-top uk-margin-bottom">
76+
<p>
77+
<a target="_blank" href="http://weibo.com/liaoxuefeng" class="uk-icon-button uk-icon-weibo"></a>
78+
<a target="_blank" href="https://github.com/michaelliao" class="uk-icon-button uk-icon-github"></a>
79+
<a target="_blank" href="http://www.linkedin.com/in/liaoxuefeng" class="uk-icon-button uk-icon-linkedin-square"></a>
80+
<a target="_blank" href="https://twitter.com/liaoxuefeng" class="uk-icon-button uk-icon-twitter"></a>
81+
</p>
82+
<p>Powered by <a href="http://awesome.liaoxuefeng.com">Awesome Python Webapp</a>. Copyright &copy; 2014. [<a href="/manage/" target="_blank">Manage</a>]</p>
83+
<p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p>
84+
<a target="_blank" href="http://www.w3.org/TR/html5/"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a>
85+
</div>
86+
87+
</div>
88+
</div>
89+
</body>
90+
</html>

‎awesome-python-webapp/www/templates/blog.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
{% extends '__base__.html' %}
2+
3+
{% block title %}{{ blog.name }}{% endblock %}
4+
5+
{% block beforehead %}
6+
7+
<script>
8+
9+
var comment_url = '/api/blogs/{{ blog.id }}/comments';
10+
11+
$(function () {
12+
var $form = $('#form-comment');
13+
$form.submit(function (e) {
14+
e.preventDefault();
15+
$form.showFormError('');
16+
var content = $form.find('textarea').val().trim();
17+
if (content==='') {
18+
return $form.showFormError('请输入评论内容！');
19+
}
20+
$form.postJSON(comment_url, { content: content }, function (err, result) {
21+
if (err) {
22+
return $form.showFormError(err);
23+
}
24+
refresh();
25+
});
26+
});
27+
});
28+
</script>
29+
30+
{% endblock %}
31+
32+
{% block content %}
33+
34+
<div class="uk-width-medium-3-4">
35+
<article class="uk-article">
36+
<h2>{{ blog.name }}</h2>
37+
<p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
38+
<p>{{ blog.html_content|safe }}</p>
39+
</article>
40+
41+
<hr class="uk-article-divider">
42+
43+
{% if __user__ %}
44+
<h3>发表评论</h3>
45+
46+
<article class="uk-comment">
47+
<header class="uk-comment-header">
48+
<img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ __user__.image }}">
49+
<h4 class="uk-comment-title">{{ __user__.name }}</h4>
50+
</header>
51+
<div class="uk-comment-body">
52+
<form id="form-comment" class="uk-form">
53+
<div class="uk-alert uk-alert-danger uk-hidden"></div>
54+
<div class="uk-form-row">
55+
<textarea rows="6" placeholder="说点什么吧" style="width:100%;resize:none;"></textarea>
56+
</div>
57+
<div class="uk-form-row">
58+
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button>
59+
</div>
60+
</form>
61+
</div>
62+
</article>
63+
64+
<hr class="uk-article-divider">
65+
{% endif %}
66+
67+
<h3>最新评论</h3>
68+
69+
<ul class="uk-comment-list">
70+
{% for comment in comments %}
71+
<li>
72+
<article class="uk-comment">
73+
<header class="uk-comment-header">
74+
<img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ comment.user_image }}">
75+
<h4 class="uk-comment-title">{{ comment.user_name }} {% if comment.user_id==blog.user_id %}(作者){% endif %}</h4>
76+
<p class="uk-comment-meta">{{ comment.created_at|datetime }}</p>
77+
</header>
78+
<div class="uk-comment-body">
79+
{{ comment.html_content|safe }}
80+
</div>
81+
</article>
82+
</li>
83+
{% else %}
84+
<p>还没有人评论...</p>
85+
{% endfor %}
86+
</ul>
87+
88+
</div>
89+
90+
<div class="uk-width-medium-1-4">
91+
<div class="uk-panel uk-panel-box">
92+
<div class="uk-text-center">
93+
<img class="uk-border-circle" width="120" height="120" src="{{ blog.user_image }}">
94+
<h3>{{ blog.user_name }}</h3>
95+
</div>
96+
</div>
97+
<div class="uk-panel uk-panel-header">
98+
<h3 class="uk-panel-title">友情链接</h3>
99+
<ul class="uk-list uk-list-line">
100+
<li><i class="uk-icon-link"></i> <a href="#">编程</a></li>
101+
<li><i class="uk-icon-link"></i> <a href="#">思考</a></li>
102+
<li><i class="uk-icon-link"></i> <a href="#">读书</a></li>
103+
</ul>
104+
</div>
105+
</div>
106+
107+
{% endblock %}

‎awesome-python-webapp/www/templates/blogs.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{% extends '__base__.html' %}
2+
3+
{% block title %}日志{% endblock %}
4+
5+
{% block beforehead %}
6+
7+
<script>
8+
</script>
9+
10+
{% endblock %}
11+
12+
{% block content %}
13+
14+
<div class="uk-width-medium-3-4">
15+
{% for blog in blogs %}
16+
<article class="uk-article">
17+
<h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2>
18+
<p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
19+
<p>{{ blog.summary }}</p>
20+
<p><a href="/blog/{{ blog.id }}">继续阅读 <i class="uk-icon-angle-double-right"></i></a></p>
21+
</article>
22+
<hr class="uk-article-divider">
23+
{% endfor %}
24+
{{ pagination('/?page=', page) }}
25+
</div>
26+
27+
<div class="uk-width-medium-1-4">
28+
<div class="uk-panel uk-panel-header">
29+
<h3 class="uk-panel-title">友情链接</h3>
30+
<ul class="uk-list uk-list-line">
31+
<li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/category/0013738748415562fee26e070fa4664ad926c8e30146c67000">编程</a></li>
32+
<li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/category/0013738748248885ddf38d8cd1b4803aa74bcda32f853fd000">读书</a></li>
33+
<li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000">Python教程</a></li>
34+
<li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git教程</a></li>
35+
</ul>
36+
</div>
37+
</div>
38+
39+
{% endblock %}

‎awesome-python-webapp/www/templates/manage_blog_edit.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{% extends '__base__.html' %}
2+
3+
{% block title %}编辑日志{% endblock %}
4+
5+
{% block beforehead %}
6+
7+
<script>
8+
9+
var
10+
ID = '{{ id }}',
11+
action = '{{ action }}';
12+
13+
function initVM(blog) {
14+
var vm = new Vue({
15+
el: '#vm',
16+
data: blog,
17+
methods: {
18+
submit: function (event) {
19+
event.preventDefault();
20+
var $form = $('#vm').find('form');
21+
$form.postJSON(action, this.$data, function (err, r) {
22+
if (err) {
23+
$form.showFormError(err);
24+
}
25+
else {
26+
return location.assign('/manage/blogs');
27+
}
28+
});
29+
}
30+
}
31+
});
32+
$('#vm').show();
33+
}
34+
35+
$(function () {
36+
if (ID) {
37+
getJSON('/api/blogs/' + ID, function (err, blog) {
38+
if (err) {
39+
return fatal(err);
40+
}
41+
$('#loading').hide();
42+
initVM(blog);
43+
});
44+
}
45+
else {
46+
$('#loading').hide();
47+
initVM({
48+
name: '',
49+
summary: '',
50+
content: ''
51+
});
52+
}
53+
});
54+
55+
</script>
56+
57+
{% endblock %}
58+
59+
{% block content %}
60+
61+
<div class="uk-width-1-1 uk-margin-bottom">
62+
<div class="uk-panel uk-panel-box">
63+
<ul class="uk-breadcrumb">
64+
<li><a href="/manage/comments">评论</a></li>
65+
<li><a href="/manage/blogs">日志</a></li>
66+
<li><a href="/manage/users">用户</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
71+
<div id="error" class="uk-width-1-1">
72+
</div>
73+
74+
<div id="loading" class="uk-width-1-1 uk-text-center">
75+
<span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
76+
</div>
77+
78+
<div id="vm" class="uk-width-2-3">
79+
<form v-on="submit: submit" class="uk-form uk-form-stacked">
80+
<div class="uk-alert uk-alert-danger uk-hidden"></div>
81+
<div class="uk-form-row">
82+
<label class="uk-form-label">标题:</label>
83+
<div class="uk-form-controls">
84+
<input v-model="name" name="name" type="text" placeholder="标题" class="uk-width-1-1">
85+
</div>
86+
</div>
87+
<div class="uk-form-row">
88+
<label class="uk-form-label">摘要:</label>
89+
<div class="uk-form-controls">
90+
<textarea v-model="summary" rows="4" name="summary" placeholder="摘要" class="uk-width-1-1" style="resize:none;"></textarea>
91+
</div>
92+
</div>
93+
<div class="uk-form-row">
94+
<label class="uk-form-label">内容:</label>
95+
<div class="uk-form-controls">
96+
<textarea v-model="content" rows="16" name="content" placeholder="内容" class="uk-width-1-1" style="resize:none;"></textarea>
97+
</div>
98+
</div>
99+
<div class="uk-form-row">
100+
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-save"></i> 保存</button>
101+
<a href="/manage/blogs" class="uk-button"><i class="uk-icon-times"></i> 取消</a>
102+
</div>
103+
</form>
104+
</div>
105+
106+
{% endblock %}

0 commit comments

Comments
 (0)