base.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. {% load static %}
  2. {% load avatar_tags %}
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8"/>
  7. <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
  8. <meta
  9. name="viewport"
  10. content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no"
  11. />
  12. <meta
  13. name="description"
  14. content="CyberSicko.net"
  15. />
  16. <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
  17. <meta name="keywords" content="Semantic-UI, Theme, Design, Template"/>
  18. <meta name="author" content="CyberSicko"/>
  19. <meta name="theme-color" content="#ffffff"/>
  20. <title>Dashboard Template for Semantic-UI</title>
  21. <link
  22. rel="stylesheet"
  23. href="{% static 'semantic.css' %}"
  24. type="text/css"
  25. />
  26. {% block link %}{% endblock %}
  27. <style type="text/css">
  28. body {
  29. -webkit-font-smoothing: antialiased;
  30. -moz-font-smoothing: grayscale;
  31. }
  32. #sidebar {
  33. position: fixed;
  34. height: 100vh;
  35. background-color: #f5f5f5;
  36. padding-top: 40px;
  37. padding-left: 0;
  38. padding-right: 0;
  39. }
  40. #sidebar .ui.menu > a.item {
  41. padding: 10px 20px;
  42. line-height: 20px;
  43. color: #337ab7;
  44. border-radius: 0 !important;
  45. margin-top: 0;
  46. margin-bottom: 0;
  47. }
  48. #sidebar .ui.menu > a.item.active {
  49. background-color: #337ab7;
  50. color: white;
  51. border: none !important;
  52. }
  53. #sidebar .ui.menu > a.item.active:hover {
  54. background-color: #337ab7;
  55. color: white;
  56. border: none !important;
  57. }
  58. #sidebar .ui.menu > a.item:hover {
  59. background-color: #eee;
  60. color: #23527c;
  61. }
  62. #content {
  63. padding-top: 56px;
  64. padding-left: 20px;
  65. padding-right: 20px;
  66. }
  67. #content h1 {
  68. font-size: 36px;
  69. }
  70. #content .ui.dividing.header {
  71. width: 100%;
  72. }
  73. .ui.centered.small.circular.image {
  74. margin-top: 14px;
  75. margin-bottom: 14px;
  76. }
  77. .ui.borderless.menu {
  78. box-shadow: none;
  79. flex-wrap: wrap;
  80. border: none;
  81. padding-left: 0;
  82. padding-right: 0;
  83. }
  84. .ui.mobile.only.grid .ui.menu .ui.vertical.menu {
  85. display: none;
  86. }
  87. </style>
  88. </head>
  89. <body id="root">
  90. <div class="ui tablet computer only padded grid">
  91. <div class="ui inverted borderless top fixed fluid menu">
  92. <a href="/" class="header item">CyberSicko.net</a>
  93. <div class="right menu">
  94. <a class="item" href="/admin">切换</a>
  95. <a class="item" href="/logout">logout</a>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="ui mobile only padded grid">
  100. <div class="ui top fixed borderless fluid inverted menu">
  101. <a href="/" class="header item">CyberSicko.net</a>
  102. <div class="right menu">
  103. <div class="item">
  104. <button class="ui icon toggle basic inverted button">
  105. <i class="content icon"></i>
  106. </button>
  107. </div>
  108. </div>
  109. <div class="ui vertical borderless inverted fluid menu">
  110. <a href="{% url '' %}" class="item"><i class="home icon"></i>Dashboard</a>
  111. <a href="{% url 'article_new' %}" class="item"><i class="pencil icon"></i>新建文章</a>
  112. <a href="{% url 'admin_article' %}" class="item"><i class="file alternate icon"></i>文章管理</a>
  113. <a href="{% url 'admin_category' %}" class="item"><i class="th list icon"></i>分类管理</a>
  114. <a href="{% url 'admin_tags' %}" class="item"><i class="linkify icon"></i>标签管理</a>
  115. <a href="{% url 'admin_files' %}" class="item"><i class="file icon"></i>文件管理</a>
  116. <a href="{% url 'admin_draft' %}" class="item"><i class="trash icon"></i>草稿箱</a>
  117. <a class="item" href="/admin">切换</a>
  118. <a class="item" href="/logout">logout</a>
  119. </div>
  120. </div>
  121. </div>
  122. <div class="ui padded grid">
  123. <div
  124. class="three wide tablet only three wide computer only column"
  125. id="sidebar"
  126. >
  127. <div class="ui vertical borderless fluid text menu">
  128. <a href="{% url '' %}" class="item"><i class="home icon"></i>Dashboard</a>
  129. <a href="{% url 'article_new' %}" class="item"><i class="pencil icon"></i>新建文章</a>
  130. <a href="{% url 'admin_article' %}" class="item"><i class="file alternate icon"></i>文章管理</a>
  131. <a href="{% url 'admin_category' %}" class="item"><i class="th list icon"></i>分类管理</a>
  132. <a href="{% url 'admin_tags' %}" class="item"><i class="linkify icon"></i>标签管理</a>
  133. <a href="{% url 'admin_files' %}" class="item"><i class="file icon"></i>文件管理</a>
  134. <a href="{% url 'admin_draft' %}" class="item"><i class="trash icon"></i>草稿箱</a>
  135. {# <a class="item">标签</a>#}
  136. {# <a class="item">分类</a>#}
  137. </div>
  138. </div>
  139. <div
  140. class="sixteen wide mobile thirteen wide tablet thirteen wide computer right floated column"
  141. id="content"
  142. >
  143. <div class="ui padded grid">
  144. {% block content %}
  145. {% endblock %}
  146. </div>
  147. </div>
  148. </div>
  149. <script type="application/javascript" src="{% static 'js/jquery.min.js' %}"></script>
  150. <script type="application/javascript" src="{% static 'semantic.js' %}"></script>
  151. <script>
  152. $(".ui.dropdown").dropdown();
  153. $("#sidebar a").each(function () {
  154. if (location.href.split('?')[0] == this.href) {
  155. $(this).addClass('active')
  156. }
  157. })
  158. $(document).ready(function () {
  159. $(".ui.toggle.button").click(function () {
  160. $(".mobile.only.grid .ui.vertical.menu").toggle(100);
  161. });
  162. });
  163. </script>
  164. {% block js %}
  165. {% endblock %}
  166. </body>
  167. </html>