优CMS增加了文章标签功能，这篇文章介绍模板中如何设置标签入口
通过文章标签，可以优化内页关联，提升SEO抓取效果
一、修改页面右侧 模板
模板位置：views\Shared\Components\PageAdv\Default.cshtml
在模板中新增热门标签代码
HTML 全选
<div class="border mb-2">
<div class="item-title p-2">
<span class="iconfont icon-biaoqian"></span>
<span class="ml-1">
热门标签
</span>
</div>
<div class="item-content p-2 row no-gutters">
<u:articletags>
<u-articletag-href class="tag-item" random-background-color="true">
<u-articletag-value:tagname />
</u-articletag-href>
</u:articletags>
</div>
</div>增加样式：
CSS 全选
// 设置页面右侧推荐区域占用的宽度
.gz-page-adv {
width: 300px;
}
// 自适应，只有lg以上尺寸，才设置width
@@media (max-width: 992px) {
.gz-page-adv {
width: unset !important;
}
}
// 标签样式
.tag-item {
display: inline-block;
color: #fff;
padding: 3px 6px;
margin: 0 3px 6px 0;
background-color: #2f318b;
border-radius: 3px;
text-decoration: none;
position:relative;
}
.tag-item:hover {
text-decoration: none;
}全部代码参考预览：
HTML 全选
<div class="gz-layout gz-article-adv">
<div class="border mb-2">
<div class="item-title p-2">
<img src="/images/right/tuijian.gif" style="width:16px;" />
<span class="ml-1">
站长推荐
</span>
</div>
<div class="item-content px-2 row">
<div class="item py-2 col-sm-6 col-lg-12">
<a href="@YESCMS.Libs.PageHelper.GetArticleListURL(" yescms")">
<img src="/images/right/yes-cms.png" style="width:100%;height:calc(100% - 30px);" />
<div class="title">YES-CMS内容管理系统</div>
</a>
</div>
<hr class="col-lg-12 d-none d-lg-block my-0">
<div class="item py-2 col-sm-6 col-lg-12">
<a href="@YESCMS.Libs.PageHelper.GetArticleListURL(" yeswin")">
<img src="/images/right/yes-win.png" style="width:100%;height:calc(100% - 30px);" />
<div class="title">winform<span style="color:red;">C/S</span>开发框架</div>
</a>
</div>
</div>
</div>
<div class="border mb-2">
<div class="item-title p-2">
<span class="iconfont icon-biaoqian"></span>
<span class="ml-1">
热门标签
</span>
</div>
<div class="item-content p-2 row no-gutters">
<u:articletags>
<u-articletag-href class="tag-item" random-background-color="true">
<u-articletag-value:tagname />
</u-articletag-href>
</u:articletags>
</div>
</div>
<div class="gz-layout-item border item-group d-none d-lg-block">
</div>
</div>
<style>
.gz-page-adv {
width: 300px;
}
@@media (max-width: 992px) {
.gz-page-adv {
width: unset !important;
}
}
.gz-article-adv {
height: 100%;
}
.gz-article-adv .item-title {
font-weight: bold;
border-bottom: 1px dashed #dee2e6;
}
.gz-article-adv .item-content .item:last-child {
border-bottom: none !important;
}
.gz-article-adv .item .title {
text-align: center
}
.gz-article-adv .item img {
border-radius: 6px;
}
.tag-item {
display: inline-block;
color: #fff;
padding: 3px 6px;
margin: 0 3px 6px 0;
background-color: #2f318b;
border-radius: 3px;
text-decoration: none;
position:relative;
}
.tag-item:hover {
text-decoration: none;
}
</style>二、调整adv页面
主要对包含adv页面的右侧样式进行微调，把adv宽度控制交给adv内部去做决定
HTML 全选
<div class="col-lg-3 gz-page-adv" style="">
<vc:page-adv></vc:page-adv>
</div>把col-lg-3修改为col-auto
修改后代码：
HTML 全选
<div class="col-auto gz-page-adv" >
<vc:page-adv></vc:page-adv>
</div>
包含adv的页面参考
1) 文章列表默认视图：views\Article\_Default_List.cshtml
2) 文章详情默认视图：views\Article\_Default_View.cshtml
3) 问题大厅列表视图：views\Issues\List.cshtml
4) 我的回答列表视图：views\Issues\MyAnswerList.cshtml
5) 我的提问列表视图：views\Issues\MyList.cshtml
6) 问题详情视图：views\Issues\Views.cshtml
7) 搜索页视图：views\Search\Index.cshtml
8) 标签文章列表视图：views\Tag\Index.cshtml
