Skip to content

Instantly share code, notes, and snippets.

@QETHAN

QETHAN/cnodejs_topic_create页面布局

Created April 27, 2013 01:44
Show Gist options
  • Save QETHAN/5471552 to your computer and use it in GitHub Desktop.
Save QETHAN/5471552 to your computer and use it in GitHub Desktop.
Download ZIP
cnodejs/topic/create页面布局
Raw
cnodejs_topic_create页面布局
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- meta -->
<meta charset="utf-8" />
<meta name='description' content='CNode：Node.js专业中文社区'>
<meta name="author" content="EDP@TaoBao" />
<meta property="wb:webmaster" content="617be6bd946c6b96" />
<link title="RSS" type="application/rss+xml" rel="alternate" href="/rss" />
<!-- style -->
<link rel="stylesheet" type="text/css" href="/libs/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link type='text/css' rel='stylesheet' href='/libs/code-prettify/prettify.css' />
<script src='/libs/code-prettify/prettify.js'></script>
<!-- script -->
<script src='/libs/jquery/jquery.js'></script>
<script src='/libs/bootstrap/js/bootstrap.js'></script>
<script src='/javascripts/main.js'></script>
<title>CNode：Node.js专业中文社区</title>
</head>
<body>
<!-- navbar -->
<div class='navbar'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand' href='/'><img src="/images/logo.png" title="Node.js专业中文社区" /></a>
<form id='search_form' class='navbar-search' action="/">
<input type='text' id='q' name='q' class='search-query span3' value=''/>
</form>
<ul class='nav pull-right'>
<li><a href='/'>首页</a></li>
<li><a href="/tag/社区活动" target="">社区活动</a></li>
<li><a href="http://cnodejs.net/" target="_blank">NAE</a></li>
<li><a href="/topic/4f17948d9f40a8335200518e" target="">志愿者</a></li>
<li><a href="http://nodejob.cnodejs.net/" target="_blank">工作机会</a></li>
<li><a href="/about" target="">关于我们</a></li>
<li>
<a href="/user/QETHAN"><img style="width: 20px; height: 20px"
src="http://www.gravatar.com/avatar/8cecb73d3aba1c059d085a30efb95981?size=48" title="查看我的主页" /></a>
</li>
<li><a href='/setting'>设置</a></li>
<li>
<a href='/signout'>退出</a>
</li>
</ul>
</div>
</div>
</div>
<!-- wrapper -->
<div id='wrapper'>
<div id='main'>
<div id='sidebar'>
<div class='panel'>
<div class='header'>
<span class='col_fade'>话题发布步骤</span>
</div>
<div class='inner'>
<ol>
<li>填写标题</li>
<li>填写内容</li>
<li>选择话题标签</li>
<li>确认后发布话题</li>
</ol>
</div>
</div>
<div class='sep10'></div>
<div class='panel'>
<div class='header'>
<span class='col_fade'>话题发布指南</span>
</div>
<div class='inner'>
<ul>
<li>尽量把话题要点浓缩到标题里</li>
<li>内容对标题做进一步说明，但不是必须的</li>
<li>给话题选择合适的标签能增加被阅读的机会</li>
</ul>
</div>
</div>
<div class='sep10'></div>
<div class='panel'>
<div class='header'>
<span class='col_fade'>markdown语法参考</span>
</div>
<div class='inner'>
<ul>
<li>换行：两个空格</li>
<li>分段：一个空行</li>
<li>斜体：*斜体*</li>
<li>粗体：**粗体**</li>
<li>代码：行首四个空格</li>
<li>链接：[文字](url)</li>
<li>图片：![alt 文字](url)</li>
</ul>
<span>详见 <a href='http://www.ituring.com.cn/article/775' target='_blank'>Markdown Wiki</a></span>
</div>
</div>
</div>
<div id='content'>
<div class='panel'>
<div class='header'>
<ul class='breadcrumb'>
<li><a href='/'>主页</a><span class='divider'>/</span></li>
<li class='active'>发布话题</li>
</ul>
</div>
<div class='inner'>
<form id='create_topic_form' action='/topic/create' method='post'>
<div>
<label class='bold' for='title'>标题</label>
<div>
<textarea class='span8' id='title' name='title' rows='3'></textarea>
<p class='help-block'>字数控制在10到100个之间</p>
</div>
</div>
<div class='sep10'></div>
<div class='sep10'></div>
<div>
<label class='bold' for='t_content'>内容和标签</label>
<div class='tabbable'>
<ul class='nav nav-pills'>
<li class='active'><a href='#markdown' data-toggle='pill'>markdown</a></li>
<li><a href='#preview' data-toggle='pill' class="preview-btn">预览</a></li>
<li><a href='#tags'data-toggle='pill'>标签</a></li>
</ul>
<div class='tab-content'>
<div class='active tab-pane' id='markdown'>
<div id='wmd-button-bar'></div>
<div class='input'>
<textarea class='span8' id='wmd-input' name='t_content' rows='20'></textarea>
</div>
</div>
<div id='preview' class='tab-pane'>
<div id='wmd-preview' class='wmd-preview topic-wmd-preview'></div>
</div>
<div id='tags' class='tab-pane'>
<div class='tags_select'>
<span class='tag_selectable' tag_id='4efc3e39e49a048d71000169'>
业界消息
</span>
<span class='tag_selectable' tag_id='4f178970d48ce1f82c00236f'>
社区活动
</span>
<span class='tag_selectable' tag_id='4f17899ed48ce1f82c0023f6'>
NAE交流
</span>
<span class='tag_selectable' tag_id='4f178985d48ce1f82c0023ae'>
原创文章
</span>
<span class='tag_selectable' tag_id='4f17898dd48ce1f82c0023e9'>
转载文章
</span>
<span class='tag_selectable' tag_id='4f17897cd48ce1f82c0023aa'>
入门教程
</span>
<span class='tag_selectable' tag_id='4f178995d48ce1f82c0023ef'>
技术讨论
</span>
<span class='tag_selectable' tag_id='4f1789a6d48ce1f82c002438'>
东拉西扯
</span>
<span class='tag_selectable' tag_id='4f4e0eace1e0be951c017957'>
NodeClub
</span>
</div>
</div>
</div>
</div>
</div>
<input type='hidden' id='topic_tags' name='topic_tags' value=''></input>
<input type='hidden' name='_csrf' value='vy8mxu5viXpzj8axurCvHkMR' />
<div class='form-actions'>
<button id='submit_btn' class='btn'>发布</button>
</div>
</form>
</div>
</div>
</div>
<!-- ajaxupload -->
<script src='/libs/ajax-upload/ajaxupload.js'></script>
<!-- markdown editor -->
<script src='/libs/pagedown/Markdown.Converter.js'></script>
<script src='/libs/showdown.js'></script>
<script src='/libs/pagedown/Markdown.Editor.js'></script>
<script>
$(document).ready(function(){
var editor;
function run_md_editor(){
// var converter = Markdown.getSanitizingConverter();
var converter = new Showdown.converter();
editor = new Markdown.Editor(converter);
editor.run();
}
run_md_editor();
$('.preview-btn').click(function() {
editor.makePreviewHtml();
prettyPrint();
});
$('.tag_selectable').click(function(){
$(this).toggleClass('tag_select');
});
$('#submit_btn').click(function(){
var values=[];
$('.tag_selectable').each(function(){
if($(this).hasClass('tag_select')){
values.push($(this).attr('tag_id'));
}
});
$('#topic_tags').val(values);
$('#create_topic_form').submit();
});
});
</script>
</div>
<div class='cl cr'></div>
</div>
<div id='backtotop'>回到顶部</div>
<!-- <a href="https://github.com/muyuan/nodeclub"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a> -->
<!-- footer -->
<div id='footer'>
<div id='footer_main'>
<div class='fr'>
</div>
<div>
<a class='dark' href='/about'><strong>关于</strong></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a class='dark' href='/faq'><strong>FAQ</strong></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a class='dark' href='https://github.com/cnodejs/nodeclub/' target="_blank"><strong>Github</strong></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a class='dark' href='/rss' target="_blank"><strong>RSS</strong></a>
</div>
<div class='sep10'></div>
<div class='col_fade'>
&copy; 2012 <br>本社区为开源系统，版本: 0.2.1 ，欢迎贡献代码<br>
由<a href='http://cnodejs.net' target='_blank'> NAE </a>为 CNode 提供动力
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment