新版项目广场版式

templates/explore/repo_left.tmpl

@@ -0,0 +1,71 @@
+<style>
+    .leftnav.ui.vertical.menu .active.item {
+        background: #5BB973; 
+        color: #FFF;
+    }
+</style>
+
+<div class="ui sixteen wide mobile four wide tablet three wide computer column">
+    <div class="leftnav ui fluid vertical menu">
+        <a class="active item" href="/explore/repos">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z" />
+            </svg>
+            全部领域
+        </a>
+        <a class="item" href="/explore/repos?q=计算机视觉&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
+            </svg>
+            计算机视觉
+        </a>
+        <a class="item" href="/explore/repos?q=自然语言处理&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M9,5A4,4 0 0,1 13,9A4,4 0 0,1 9,13A4,4 0 0,1 5,9A4,4 0 0,1 9,5M9,15C11.67,15 17,16.34 17,19V21H1V19C1,16.34 6.33,15 9,15M16.76,5.36C18.78,7.56 18.78,10.61 16.76,12.63L15.08,10.94C15.92,9.76 15.92,8.23 15.08,7.05L16.76,5.36M20.07,2C24,6.05 23.97,12.11 20.07,16L18.44,14.37C21.21,11.19 21.21,6.65 18.44,3.63L20.07,2Z" />
+            </svg>
+            自然语言处理
+        </a>
+        <a class="item" href="/explore/repos?q=机器学习&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M19,12V13.5A4,4 0 0,1 23,17.5C23,18.32 22.75,19.08 22.33,19.71L21.24,18.62C21.41,18.28 21.5,17.9 21.5,17.5A2.5,2.5 0 0,0 19,15V16.5L16.75,14.25L19,12M19,23V21.5A4,4 0 0,1 15,17.5C15,16.68 15.25,15.92 15.67,15.29L16.76,16.38C16.59,16.72 16.5,17.1 16.5,17.5A2.5,2.5 0 0,0 19,20V18.5L21.25,20.75L19,23M12,3C16.42,3 20,4.79 20,7C20,9.21 16.42,11 12,11C7.58,11 4,9.21 4,7C4,4.79 7.58,3 12,3M4,9C4,11.21 7.58,13 12,13C13.11,13 14.17,12.89 15.14,12.68C14.19,13.54 13.5,14.67 13.18,15.96L12,16C7.58,16 4,14.21 4,12V9M20,9V11H19.5L18.9,11.03C19.6,10.43 20,9.74 20,9M4,14C4,16.21 7.58,18 12,18L13,17.97C13.09,19.03 13.42,20 13.95,20.88L12,21C7.58,21 4,19.21 4,17V14Z" />
+            </svg>
+            机器学习
+        </a>
+        <a class="item" href="/explore/repos?q=神经网络&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M13 3C9.23 3 6.19 5.95 6 9.66L4.08 12.19C3.84 12.5 4.08 13 4.5 13H6V16C6 17.11 6.89 18 8 18H9V21H16V16.31C18.37 15.19 20 12.8 20 10C20 6.14 16.88 3 13 3M17.06 9.57L15.1 10.09L16.54 11.54C16.89 11.88 16.89 12.46 16.54 12.81C16.19 13.16 15.61 13.16 15.27 12.81L13.81 11.37L13.3 13.33C13.18 13.82 12.68 14.1 12.21 13.97C11.72 13.84 11.44 13.35 11.57 12.87L12.1 10.9L10.13 11.43C9.65 11.56 9.15 11.28 9.03 10.79C8.9 10.32 9.18 9.82 9.67 9.7L11.63 9.19L10.19 7.73C9.84 7.39 9.84 6.82 10.19 6.46C10.54 6.11 11.12 6.11 11.46 6.46L12.91 7.9L13.43 5.94C13.55 5.46 14.04 5.18 14.5 5.3C15 5.43 15.28 5.92 15.16 6.41L14.63 8.37L16.59 7.84C17.08 7.72 17.57 8 17.7 8.5C17.82 8.96 17.54 9.45 17.06 9.57Z" />
+            </svg>
+            神经网络
+        </a>
+        <a class="item" href="/explore/repos?q=自动驾驶&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M5,14H19L17.5,9.5H6.5L5,14M17.5,19A1.5,1.5 0 0,0 19,17.5A1.5,1.5 0 0,0 17.5,16A1.5,1.5 0 0,0 16,17.5A1.5,1.5 0 0,0 17.5,19M6.5,19A1.5,1.5 0 0,0 8,17.5A1.5,1.5 0 0,0 6.5,16A1.5,1.5 0 0,0 5,17.5A1.5,1.5 0 0,0 6.5,19M18.92,9L21,15V23A1,1 0 0,1 20,24H19A1,1 0 0,1 18,23V22H6V23A1,1 0 0,1 5,24H4A1,1 0 0,1 3,23V15L5.08,9C5.28,8.42 5.85,8 6.5,8H17.5C18.15,8 18.72,8.42 18.92,9M12,0C14.12,0 16.15,0.86 17.65,2.35L16.23,3.77C15.11,2.65 13.58,2 12,2C10.42,2 8.89,2.65 7.77,3.77L6.36,2.35C7.85,0.86 9.88,0 12,0M12,4C13.06,4 14.07,4.44 14.82,5.18L13.4,6.6C13.03,6.23 12.53,6 12,6C11.5,6 10.97,6.23 10.6,6.6L9.18,5.18C9.93,4.44 10.94,4 12,4Z" />
+            </svg>
+            自动驾驶
+        </a>
+        <a class="item" href="/explore/repos?q=机器人&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" />
+            </svg>
+            机器人
+        </a>
+        <a class="item" href="/explore/repos?q=联邦学习&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M3 11H11V3H3M5 5H9V9H5M13 21H21V13H13M15 15H19V19H15M3 21H11V13H3M5 15H9V19H5M13 3V11H21V3M19 9H15V5H19Z" />
+            </svg>
+            联邦学习
+        </a>
+        <a class="item" href="/explore/repos?q=数据挖掘&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M18.36,2.64C20,2.64 21.36,4 21.36,5.64C21.36,7.29 20,8.64 18.36,8.64C16.71,8.64 15.36,7.29 15.36,5.64C15.36,5.34 15.41,5.06 15.5,4.8C14.43,4.29 13.25,4 12,4A8,8 0 0,0 4,12L4.04,12.84L2.05,13.05L2,12A10,10 0 0,1 12,2C13.69,2 15.28,2.42 16.67,3.16C17.16,2.83 17.74,2.64 18.36,2.64M18.36,4.64A1,1 0 0,0 17.36,5.64A1,1 0 0,0 18.36,6.64C18.92,6.64 19.36,6.19 19.36,5.64C19.36,5.08 18.92,4.64 18.36,4.64M5.64,15.36C7.29,15.36 8.64,16.71 8.64,18.36C8.64,18.66 8.59,18.94 8.5,19.2C9.57,19.71 10.75,20 12,20A8,8 0 0,0 20,12L19.96,11.16L21.95,10.95L22,12A10,10 0 0,1 12,22C10.31,22 8.72,21.58 7.33,20.84C6.84,21.17 6.26,21.36 5.64,21.36C4,21.36 2.64,20 2.64,18.36C2.64,16.71 4,15.36 5.64,15.36M5.64,17.36C5.08,17.36 4.64,17.81 4.64,18.36C4.64,18.92 5.08,19.36 5.64,19.36A1,1 0 0,0 6.64,18.36A1,1 0 0,0 5.64,17.36M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" />
+            </svg>
+            数据挖掘
+        </a>
+        <a class="item" href="/explore/repos?q=RISC-V&topic=1">
+            <svg class="svg octicon-inbox" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M17,17H7V7H17M21,11V9H19V7C19,5.89 18.1,5 17,5H15V3H13V5H11V3H9V5H7C5.89,5 5,5.89 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11M13,13H11V11H13M15,9H9V15H15V9Z" />
+            </svg>
+            RISC-V开发
+        </a>                                
+    </div>
+</div>

templates/explore/repo_list.tmpl

@@ -1,70 +1,129 @@
-<h2 class="ui left floated medium header">
-	{{.i18n.Tr "explore.repos"}}
-</h2>
-<div class="ui right floated secondary filter menu">
-    <!-- Sort -->
-    <div class="ui right dropdown type jump item">
-		<span class="text">
-			{{.i18n.Tr "repo.issues.filter_sort"}}
-                <i class="dropdown icon"></i>
-		</span>
-        <div class="menu">
-            <a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
-            <a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>
-            <a class="{{if eq .SortType "alphabetically"}}active{{end}} item" href="{{$.Link}}?sort=alphabetically&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
-            <a class="{{if eq .SortType "reversealphabetically"}}active{{end}} item" href="{{$.Link}}?sort=reversealphabetically&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
-            <a class="{{if eq .SortType "recentupdate"}}active{{end}} item" href="{{$.Link}}?sort=recentupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.recentupdate"}}</a>
-            <a class="{{if eq .SortType "leastupdate"}}active{{end}} item" href="{{$.Link}}?sort=leastupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.leastupdate"}}</a>
-            <a class="{{if eq .SortType "moststars"}}active{{end}} item" href="{{$.Link}}?sort=moststars&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.moststars"}}</a>
-            <a class="{{if eq .SortType "feweststars"}}active{{end}} item" href="{{$.Link}}?sort=feweststars&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.feweststars"}}</a>
-            <a class="{{if eq .SortType "mostforks"}}active{{end}} item" href="{{$.Link}}?sort=mostforks&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.mostforks"}}</a>
-            <a class="{{if eq .SortType "fewestforks"}}active{{end}} item" href="{{$.Link}}?sort=fewestforks&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.fewestforks"}}</a>
-        </div>
-    </div>
-</div>
+<style>
+    .ui.repository.list>.item{
+        position: relative;
+        border: 1px solid #E1E3E6;
+        border-radius: 0.8rem;
+        margin-bottom: 1.0rem;
+        padding: 1.0rem;
+    }                           
+    .ui.repository.list>.item .header {
+        font-weight: 200;
+    }
+    .ui.list>.item>.content{
+        margin-left: 36px;
+    }
+    .ui.list .list>.item>img.image+.content, .ui.list>.item>img.image+.content{
+        width:calc(100% - 30px);
+        margin-left: 0;
+    }
+    .ui.repository.list>.item::before{
+        position: absolute;
+        left: 0;
+        right: 0;
+        content: "";
+        height: 1px;
+        background-color: #E1E3E6;
+        bottom: 2.6rem;                                
+    }
+    .repository .ui.right.compact .item{
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+</style>
+
+<div class="ui secondary pointing tabular top attached borderless menu navbar">
+	<a class="active item" href="https://git.openi.org.cn/explore/repos?sort=moststars&q=&tab=">
+		<svg class="svg octicon-repo" width="16" height="16" aria-hidden="true">
+			<use xlink:href="#octicon-repo" />
+		</svg> 热门{{.i18n.Tr "explore.repos"}}
+	</a>
+	<a class=" item" href="https://git.openi.org.cn/explore/repos?sort=mostforks&q=&tab=">
+		<svg class="svg octicon-inbox" width="16" height="16" aria-hidden="true">
+			<use xlink:href="#octicon-inbox" />
+		</svg> 活跃项目
+	</a>
+
+	<a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">
+		<svg class="svg octicon-organization" width="16" height="16" aria-hidden="true">
+			<use xlink:href="#octicon-organization" />
+		</svg> {{.i18n.Tr "repo.issues.filter_sort.latest"}}
+	</a>
 
-<div class="ui clearing divider"></div>
+	<div class="ui right floated secondary filter menu">
+		<!-- Sort -->
+		<div class="ui right dropdown type jump item">
+			<span class="text">
+				{{.i18n.Tr "repo.issues.filter_sort"}}
+					<i class="dropdown icon"></i>
+			</span>
+			<div class="menu">
+				<a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
+				<a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>
+				<a class="{{if eq .SortType "alphabetically"}}active{{end}} item" href="{{$.Link}}?sort=alphabetically&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
+				<a class="{{if eq .SortType "reversealphabetically"}}active{{end}} item" href="{{$.Link}}?sort=reversealphabetically&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
+				<a class="{{if eq .SortType "recentupdate"}}active{{end}} item" href="{{$.Link}}?sort=recentupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.recentupdate"}}</a>
+				<a class="{{if eq .SortType "leastupdate"}}active{{end}} item" href="{{$.Link}}?sort=leastupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.leastupdate"}}</a>
+				<a class="{{if eq .SortType "moststars"}}active{{end}} item" href="{{$.Link}}?sort=moststars&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.moststars"}}</a>
+				<a class="{{if eq .SortType "feweststars"}}active{{end}} item" href="{{$.Link}}?sort=feweststars&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.feweststars"}}</a>
+				<a class="{{if eq .SortType "mostforks"}}active{{end}} item" href="{{$.Link}}?sort=mostforks&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.mostforks"}}</a>
+				<a class="{{if eq .SortType "fewestforks"}}active{{end}} item" href="{{$.Link}}?sort=fewestforks&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.fewestforks"}}</a>
+			</div>
+		</div>
+	</div>
+</div>
 
 <div class="ui repository list">
 	{{range .Repos}}
 		<div class="item">
-			<div class="ui header">
-				{{if .RelAvatarLink}}
-					<img class="ui avatar image" src="{{.RelAvatarLink}}">
-				{{end}}
-				<a class="name" href="{{.Link}}">
-					{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} <span>/</span> {{end}}{{end}}<strong>{{.Name}}</strong>
-					{{if .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
-				</a>
-				{{if .IsPrivate}}
-					<span class="middle text gold">{{svg "octicon-lock" 16}}</span>
-				{{else if .IsFork}}
-					<span class="middle">{{svg "octicon-repo-forked" 16}}</span>
-				{{else if .IsMirror}}
-					<span class="middle">{{svg "octicon-repo-clone" 16}}</span>
-				{{else if .Owner}}
-					{{if .Owner.Visibility.IsPrivate}}
-					<span class="text gold">{{svg "octicon-lock" 16}}</span>
-					{{end}}
-				{{end}}
-				<div class="ui right metas">
-					{{if .PrimaryLanguage }}
-					<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
+			{{if .RelAvatarLink}}
+				<img class="ui avatar image" src="{{.RelAvatarLink}}">
+			{{end}}
+			<div class="content">
+				<div class="ui header">
+					<a class="name" href="{{.Link}}">
+						{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} <span>/</span> {{end}}{{end}}<strong>{{.Name}}</strong>
+						{{if .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
+					</a>
+					{{if .IsPrivate}}
+						<span class="middle text gold">{{svg "octicon-lock" 16}}</span>
+					{{else if .IsFork}}
+						<span class="middle">{{svg "octicon-repo-forked" 16}}</span>
+					{{else if .IsMirror}}
+						<span class="middle">{{svg "octicon-repo-clone" 16}}</span>
+					{{else if .Owner}}
+						{{if .Owner.Visibility.IsPrivate}}
+						<span class="text gold">{{svg "octicon-lock" 16}}</span>
+						{{end}}
 					{{end}}
-					<span class="text grey">{{svg "octicon-star" 16}} {{.NumStars}}</span>
-					<span class="text grey">{{svg "octicon-git-branch" 16}} {{.NumForks}}</span>
+					
+					<div class="ui mini right compact menu">
+						<a class="item">
+							<i class="icon fa-eye"></i> {{.NumWatches}}
+						</a>
+						<a class="item">
+							{{svg "octicon-star" 16}} {{.NumStars}}
+						</a>
+						<a class="item">
+							{{svg "octicon-git-branch" 16}} {{.NumForks}}
+						</a>
+					</div>
 				</div>
-			</div>
-			<div class="description">
-				{{if .DescriptionHTML}}<p class="has-emoji">{{.DescriptionHTML}}</p>{{end}}
-				{{if .Topics }}
-					<div class="ui tags">
-					{{range .Topics}}
-						{{if ne . "" }}<a href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1"><div class="ui small label topic">{{.}}</div></a>{{end}}
+				<div class="description">
+					{{if .DescriptionHTML}}<p class="has-emoji">{{.DescriptionHTML}}</p>{{end}}
+					{{if .Topics }}
+						<div class="ui tags">
+						{{range .Topics}}
+							{{if ne . "" }}<a href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1"><div class="ui small label topic">{{.}}</div></a>{{end}}
+						{{end}}
+						</div>
 					{{end}}
-					</div>
-				{{end}}
-				<p class="time">{{$.i18n.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.i18n.Lang}}</p>
+					<p class="time">
+						{{$.i18n.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.i18n.Lang}}
+						{{if .PrimaryLanguage }}
+						<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
+						{{end}}
+					</p>
+				</div>
 			</div>
 		</div>
 	{{else}}

templates/explore/repo_orgtop.tmpl

@@ -0,0 +1,102 @@
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.js"></script>
+<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.css" rel="stylesheet">
+<style>
+    .repos--orgtop {
+        margin-top: -1px;
+    }
+
+    .repos--orgtop .ui.card {
+        box-shadow: none;
+        border: 1px solid #DFE9F0;
+    }
+
+    .repos--orgtop .ui.card .content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .repos--orgtop .swiper-pagination {
+        position: relative;
+        bottom: 0;
+    }
+</style>
+
+<div class="repos--seach repos--orgtop">
+    <div class="ui container">
+        <h3>这些优秀的组织正在使用：</h3>
+        <!-- Swiper -->
+        <div class="ui container swiper-container">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <div class="ui card">
+                        <a class="content" href="https://git.openi.org.cn/OpenI">
+                            <img class="ui avatar image"
+                                src="https://git.openi.org.cn/user/avatar/OpenI/-1"> OpenI 启智社区
+                        </a>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <div class="ui card">
+                        <a class="content" href="https://git.openi.org.cn/OpenI">
+                            <img class="ui avatar image"
+                                src="https://git.openi.org.cn/repo-avatars/992-68df2c96f5f2cd9366c5de577cda0d44">
+                            TensorLayer
+                        </a>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <div class="ui card">
+                        <a class="content" href="https://git.openi.org.cn/OpenI">
+                            <img class="ui avatar image"
+                                src="https://git.openi.org.cn/user/avatar/PCL-Platform.Intelligence/-1">
+                            PCL-Platform.Intelligence
+                        </a>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <div class="ui card">
+                        <a class="content" href="https://git.openi.org.cn/OpenI">
+                            <img class="ui avatar image" src="https://git.openi.org.cn/user/avatar/BAAI/-1">
+                            BAAI 北京智源人工智能研究院
+                        </a>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <div class="ui card">
+                        <a class="content" href="https://git.openi.org.cn/OpenI">
+                            <img class="ui avatar image"
+                                src="https://git.openi.org.cn/user/avatar/OpenModelZoo/-1"> OpenModelZoo
+                        </a>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <div class="ui card">
+                        <a class="content" href="https://git.openi.org.cn/OpenI">
+                            <img class="ui avatar image"
+                                src="https://git.openi.org.cn/user/avatar/PCL_EngineClub/-1"> PCL_EngineClub
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Add Pagination -->
+            <div class="swiper-pagination"></div>
+        </div>
+    </div>
+</div>
+<!-- Initialize Swiper -->
+
+<script>
+    var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 5,
+        spaceBetween: 30,
+        autoplay: {
+            delay: 2500,
+            disableOnInteraction: false,
+        },
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+    });
+</script>

templates/explore/repo_right.tmpl

@@ -1 +1,27 @@
-<a href="https://openi.org.cn/html/2020/qimengxingdong_0813/450.html" target="_blank"><img class="ui mini image" src="/img/banner-qimen-4X3.jpg" style="width:100%;"></a>
+<a href="https://openi.org.cn/html/2020/qimengxingdong_0813/450.html" target="_blank"><img class="ui mini image" src="/img/banner-qimen-4X3.jpg" style="width:100%;"></a>
+
+<div class="ui secondary pointing menu">
+    <div class="active item">
+        推荐百科
+    </div>
+</div>
+<div class="ui relaxed list">
+    <div class="item">
+        <i class="sticky note outline icon"></i>
+        <div class="content">
+            <div ><a href="">HyperLPR中文车牌识别安装(Windows版) </a></div>
+        </div>
+    </div>
+    <div class="item">
+        <i class="sticky note outline icon"></i>
+        <div class="content">
+            <div ><a href="">启智AI开发协同平台使用说明</a></div>
+        </div>
+    </div>
+    <div class="item">
+        <i class="sticky note outline icon"></i>
+        <div class="content">
+            <div ><a href="">git操作笔记</a></div>
+        </div>
+    </div>
+</div>

templates/explore/repos.tmpl

@@ -2,16 +2,17 @@
 <div class="explore repositories">
 
 	{{template "explore/repo_search" .}}
-
+	{{template "explore/repo_orgtop" .}}
+	
 	<div class="ui container">
 		<div class="ui grid">
-			{{template "explore/navbar" .}}
+			{{template "explore/repo_left" .}}
 
-			<div class="ui sixteen wide mobile ten wide tablet ten wide computer column">
+			<div class="ui sixteen wide mobile twelve wide tablet ten wide computer column">
 				{{template "explore/repo_list" .}}
 				{{template "base/paginate" .}}
 			</div>
-			<div class="ui sixteen wide mobile six wide tablet three wide computer column">
+			<div class="computer only ui three wide computer column">
 				{{template "explore/repo_right" .}}
 			</div>
 		</div>