郑州企业网站优化多少钱,wordpress怎么添加icp,怎么申请信用卡收款网站接口,建立网站功能系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客#xff1f;基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.N… 系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能...前言很快啊pia的一下博客上线已经一周时间了网址http://blog.deali.cn阅读量不高不过对于没有做过SEO的网站来说已经不错了~这段时间虽然忙不过一直在写代码给博客添砖加瓦Github上的Commit每天不断的这不友情链接功能来了~本文来一步步介绍这个功能的实现。同时所有项目代码已经上传GitHub欢迎各位大佬Star/Fork博客后端前台项目地址https://github.com/Deali-Axy/StarBlog管理后台前端项目地址https://github.com/Deali-Axy/StarBlog-Admin先看效果image分析先分析一下功能友情链接既可以自己手动添加也可以由访问网站的人申请其他站长可以申请互换友链提交申请之后在博客后台可以看到确认之后就会显示到网站中啦~这就是初步的功能设计当然我还想到了一些扩展的功能比如根据链接的点击量来调整链接的显示顺序百度听起来怎么那么熟悉建模根据需求需要俩模型一个是要显示的友情链接一个是友情链接申请记录那开始吧在StarBlog.Data/Models中创建数据模型/// summary
/// 友情链接
/// /summary
public class Link {[Column(IsIdentity true, IsPrimary true)]public int Id { get; set; }/// summary/// 网站名称/// /summarypublic string Name { get; set; }/// summary/// 介绍/// /summarypublic string? Description { get; set; }/// summary/// 网址/// /summarypublic string Url { get; set; }/// summary/// 是否显示/// /summarypublic bool Visible { get; set; }
}还有这个/// summary
/// 友情链接申请记录
/// /summary
public class LinkExchange {[Column(IsIdentity true, IsPrimary true)]public int Id { get; set; }/// summary/// 网站名称/// /summarypublic string Name { get; set; }/// summary/// 介绍/// /summarypublic string? Description { get; set; }/// summary/// 网址/// /summarypublic string Url { get; set; }/// summary/// 站长/// /summarypublic string WebMaster { get; set; }/// summary/// 联系邮箱/// /summarypublic string Email { get; set; }/// summary/// 是否已验证/// para友情链接需要验证后才显示在网站上/para/// /summarypublic bool Verified { get; set; } false;/// summary/// 申请时间/// /summarypublic DateTime ApplyTime { get; set; } DateTime.Now;
}Service有了模型接下来完善一下逻辑在StarBlog.Web/Services中写逻辑首先是友情链接的增删改查除外还加一个设置可见性的快捷方式public class LinkService {private IBaseRepositoryLink _repo;public LinkService(IBaseRepositoryLink repo) {_repo repo;}/// summary/// 获取全部友情链接/// /summary/// param nameonlyVisible只获取显示的链接/param/// returns/returnspublic ListLink GetAll(bool onlyVisible true) {return onlyVisible? _repo.Where(a a.Visible).ToList(): _repo.Select.ToList();}public Link? GetById(int id) {return _repo.Where(a a.Id id).First();}public Link? GetByName(string name) {return _repo.Where(a a.Name name).First();}public Link AddOrUpdate(Link item) {return _repo.InsertOrUpdate(item);}public Link? SetVisibility(int id, bool visible) {var item GetById(id);if (item null) return null;item.Visible visible;_repo.Update(item);return GetById(id);}public int DeleteById(int id) {return _repo.Delete(a a.Id id);}
}这个没啥特别的继续管理友情链接申请记录的逻辑同样也是有增删改查这部分代码跟上面的一样省略了这里只贴设置是否验证的代码public class LinkExchangeService {private readonly IBaseRepositoryLinkExchange _repo;private readonly LinkService _linkService;public LinkExchangeService(IBaseRepositoryLinkExchange repo, LinkService linkService) {_repo repo;_linkService linkService;}// 设置是否验证public LinkExchange? SetVerifyStatus(int id, bool status) {var item GetById(id);if (item null) return null;item.Verified status;_repo.Update(item);var link _linkService.GetByName(item.Name);if (status) {if (link null) {_linkService.AddOrUpdate(new Link {Name item.Name,Description item.Description,Url item.Url,Visible true});}else {_linkService.SetVisibility(link.Id, true);}}else {if (link ! null) _linkService.DeleteById(link.Id);}return GetById(id);}
}在设置是否验证的方法中实现了设置一个申请为已验证自动将该申请的链接添加到友情链接中设置一个申请为未验证则自动将对应的友情链接删除如果存在的话其他地方就跟上面的友情链接一样了。写完之后别忘了注册服务builder.Services.AddScopedLinkExchangeService();
builder.Services.AddScopedLinkService();添加数据虽然管理这些链接的接口我也写了但目前本系列文章还处在介绍前台的部分我打算把接口实现放到后面的RESTFul接口开发部分讲~所以先直接在数据库中添加吧~image页面展示数据模型和逻辑都实现了接下来就是找一个合适的地方显示参考了几个同类的博客之后我决定把友链放在主页底部编辑StarBlog.Web/ViewModels/HomeViewModel.cs添加一个新属性public class HomeViewModel {/// summary/// 友情链接/// /summarypublic ListLink Links { get; set; } new();
}用Bootstrap5的responsive variation来做响应式的友情链接展示div classd-grid gap-2 d-md-blockbutton classbtn btn-primary typebuttonButton/buttonbutton classbtn btn-primary typebuttonButton/button
/div官网上的例子效果是这样的image勉强还行不过都是一样的颜色太单调了我要七彩的封装Razor组件于是封装了一个名为ColorfulButton的Razor组件先定义ViewModel用来配置这个组件在StarBlog.Web/ViewModels中新增ColorfulButtonViewModel.cs文件代码如下public static class LinkTarget {public const string Blank _blank;public const string Parent _parent;public const string Self _self;public const string Top _top;
}public class ColorfulButtonViewModel {public string Name { get; set; }public string Url { get; set; } #;public string Target { get; set; } _self;
}然后在StarBlog.Web/Views/Shared/Widgets中新增ColorfulButton.cshtml把Bootstrap支持的几种按钮颜色放进去然后每次随机显示一个颜色~model ColorfulButtonViewModel{var rnd Random.Shared;var colorList new[] {btn-outline-primary,btn-outline-secondary,btn-outline-success,btn-outline-danger,btn-outline-warning,btn-outline-info,btn-outline-dark,};var btnColor colorList[rnd.Next(0, colorList.Length)];
}a hrefModel.Url rolebutton classbtn btn-sm btnColor mb-1 targetModel.TargetModel.Name
/a添加到页面中组件完成了最后在主页中实现友情链接的展示编辑StarBlog.Web/Views/Home/Index.cshtml文件在最底下推荐博客板块下方新增代码div classcontainer px-4 py-3h2 classpb-2 border-bottomLink Exchange/h2if (Model.Links.Count 0) {div classd-grid gap-2 d-md-blockforeach (var link in Model.Links) {await Html.PartialAsync(Widgets/ColorfulButton,new ColorfulButtonViewModel { Name link.Name, Url link.Url })}/div}else {await Html.PartialAsync(Widgets/PlaceholderCard, 友情链接)}
/div最终效果就是一开始展示的那样每次访问都会有不同的颜色老炫酷了~搞定完成了很简单的一个功能可以给单调的博客小小增色一下~同时也欢迎各位站长大佬来交换友链~
