.NET 个人博客-首页排版优化-2

这篇具有很好参考价值的文章主要介绍了.NET 个人博客-首页排版优化-2。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人博客-首页排版优化-2

原本这篇文章早就要出了的,结果之前买的服务器服务商跑路了,导致博客的数据缺失了部分。我是买了一年的服务器,然后用了3个月,国内跑路云太多了,然后也是花钱重新去别的服务商买了一台服务器,这次只买了一个月,先试试水。

优化计划

本篇文章优化历史文章

实现思路

页面数据代码

public async Task<IActionResult> Index()
{
    HomeViewModel homeView = new HomeViewModel()
    {
        FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),
        FeaturedCategories = _fCategoryService.GetFeaturedCategories(),
        TopPost =await _TopPostService.GetTopOnePostAsync(),
        FeaturedPosts = await _PostService.GetFeaturedPostsAsync(new QueryParameters
        {
            Page = 1,
            PageSize = 8,
        }),
        Links = await _linkService.GetAll(),
        Notices = await _noticeService.GetAllAsync(),
        HomePost = await _articelsService.HomePostAsync(),
    };
    return View(homeView);
}

把FeaturedPosts中的PageSize参数8改为4,让推荐文章只展示4个,然后新增历史文章,也就是全部文章。

代码实现

接口与实现类

看过之前文章的应该知道之前分页用的是插件,但是那个插件分页需要把数据库的内容全部查询出来,然后再分页,非常影响性能。考虑到博客长期的发展,也是用Skip和Take关键字去进行分页,使用这两个关键字的好处是不会把数据从数据库全部拿去来,而是在查询的时候就对数据进行分页查询,我需要多少数据就拿多少数据,这样做大大减少了服务端的压力。

  1. Skip属性:Skip属性用于跳过指定数量的元素,返回剩余的元素。它接受一个整数参数,表示要跳过的元素数量。例如,如果有一个包含10个元素的集合,使用Skip(5)将跳过前5个元素,返回后面的5个元素。
  2. Take属性:Take属性用于获取指定数量的元素。它接受一个整数参数,表示要获取的元素数量。例如,如果有一个包含10个元素的集合,使用Take(5)将返回前5个元素。

下面代码返回值是一个元组包含(List

, PaginationMetadata),PaginationMetadata是一个分页信息类,在现在这个场景其实是不需要这个类的,可以做下处理,也可以不做处理,没有影响。

Task<(List<Post>, PaginationMetadata)> GetAllPostsAsync(QueryParameters param);

public async Task<(List<Post>, PaginationMetadata)>GetAllPostsAsync(QueryParameters param)
  {
      var querySet =  _myDbContext.posts.AsQueryable();
      var posts = await _myDbContext.posts
      .OrderByDescending(o => o.CreationTime)
      .Include(p => p.Categories)
      .Include(p => p.Comments)
      .Skip((param.Page - 1) * param.PageSize)
      .Take(param.PageSize)
      .ToListAsync();
      var pagination = new PaginationMetadata()
      {
          PageNumber = param.Page,
          PageSize = param.PageSize,
          TotalItemCount = await querySet.CountAsync()
      };
      return (posts, pagination);
  }

控制器

给HomeViewModel类添加AllPosts属性

public (List<Post>, PaginationMetadata) AllPosts { get; set; }

然后在控制器方法中调用查询数据的实现方法

        public async Task<IActionResult> Index()
        {
            HomeViewModel homeView = new HomeViewModel()
            {
            	......
                AllPosts = await _PostService.GetAllPostsAsync(new QueryParameters
                {
                    Page = 1,
                    PageSize = 8,
                })
            };
            return View(homeView);
        }

接下来就是Razor页面的代码了

直接把之前推荐文章页面的代码copy过来就好了,只需要修改model的类型为(List<Personalblog.Model.Entitys.Post>,PaginationMetadata),可以看到实际上只需要Post列表就能完成想要的效果。

AllPostCard.cshtml

@model (List<Post>,PaginationMetadata)

@foreach (var post in @Model.Item1)
{
    <div class="col-md-6 box">
        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
            <div class="col p-4 d-flex flex-column position-static">
                <strong class="d-inline-block mb-2 text-primary">@post.Categories.Name</strong>
                <h5 class="mb-0">@post.Title</h5>
                <div class="mb-1 text-muted d-flex align-items-center">
                    <span class="me-2">@post.LastUpdateTime.ToShortDateString()</span>
                    <div class="d-flex align-items-center">
                        <i class="bi bi-eye bi-sm me-1"></i>
                        <span style="font-size: 0.875rem;">@post.ViewCount</span>
                    </div>
                    <span style="width: 10px;"></span> <!-- 这里设置了一个 10px 的间距 -->
                    <div class="d-flex align-items-center">
                        <i class="bi bi-chat-square-dots bi-sm me-1"></i>
                        <span style="font-size: 0.875rem;">@post.Comments.Count</span>
                    </div>
                </div>
                <p class="card-text mb-auto">@post.Summary.Limit(50)</p>
                <a class="stretched-link"
                   asp-controller="Blog" asp-action="Post" asp-route-id="@post.Id">
                    Continue reading
                </a>
            </div>
            <div class="col-auto d-none d-lg-block">
                <img class="bd-placeholder-img" alt="" style="width:200px;height: 250px"
                     src="@Url.Action("GetRandomImage", "PicLib" ,new { seed = post.Id,Width = 800, Height = 1000})">
            </div>
        </div>
    </div>
}

js代码

然后也是和之前一样,写一个返回布局页的代码,用ajax请求就行了

.NET6 个人博客-推荐文章加载优化 - 妙妙屋(zy) - 博客园 (cnblogs.com) https://www.cnblogs.com/ZYPLJ/p/17495172.html

效果展示

.NET 个人博客-首页排版优化-2
.NET 个人博客-首页排版优化-2文章来源地址https://www.toymoban.com/news/detail-626628.html

到了这里,关于.NET 个人博客-首页排版优化-2的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】博客小程序,静态版本(三)设计和开发首页、个人关于页

    【微信小程序】博客小程序,静态版本(一)准备工作 【微信小程序】博客小程序,静态版本(二)引入 lin-ui 组件、设计和开发文章页 【微信小程序】博客小程序,静态版本(三)设计和开发首页、个人关于页 李老板又来催更了,万般 “求求” 我之下,继续开始开发。

    2024年02月10日
    浏览(48)
  • .NET 个人博客系统

    之前通过github学习了一个.net core的博客项目,最近也是完成了博客的备案,完善了一下。该项目是传统的MVC项目,可以进行主题的切换,采用Bootstrap进行前台页面的展示,有配套的后台管理系统,可以解析Markdown文件。 ZY知识库 可以将个人的意见评论到该文章,我可以采纳采

    2023年04月11日
    浏览(40)
  • .NET 个人博客-添加RSS订阅功能

    个人博客系列已经完成了 留言板 文章归档 推荐文章优化 推荐文章排序 博客地址:https://pljzy.top 然后博客开源的原作者也是百忙之中添加了一个名为 RSS订阅 的功能,那么我就来简述一下这个功能是干嘛的,然后照葫芦画瓢实现一下。 来自 chatGPT 的回答 网站的RSS订阅是一种

    2024年02月11日
    浏览(42)
  • .NET 个人博客-给文章添加上标签

    置顶3个且可滚动或切换 推荐改为4个,然后新增历史文章,将推荐的加载更多放入历史文章,按文章发布时间降序排列。 标签功能,可以为文章贴上标签 推荐点赞功能 本篇文章实现文章标签功能 首先需要新增一个标签类Tag,然后Post文章类和Tag标签类的关系是多对多的关系。

    2024年02月12日
    浏览(47)
  • .NET个人博客-使用Back进行消息推送

    我的好友看了我的博客,给我提了个需求,让我搞个网站通知,我开始以为就是评论回复然后发送邮件通知。不过他告诉我网站通知是,当有人评论或者留言后,会通知到我这边来,消息是实时通知的,他说用的是Back,不需要发邮件,然后发了个GitHub链接给我,我觉得还不错

    2024年02月16日
    浏览(35)
  • 基于ASP.NET MVC开发的、开源的个人博客系统

    推荐一个功能丰富、易于使用和扩展的开源博客,可以轻松地创建和管理自己的博客。 基于.Net Framework 4.5开发的、开源博客系统,具有丰富的功能,包括文章发布、分类、标签、评论、订阅、统计等功能,同时也可以根据需要进行自定义扩展。 提供了丰富的配置选项和API,

    2024年02月14日
    浏览(57)
  • 【.NET6 + Vue3 + CentOS7.9 + Docker + Docker-Compose + SSL】个人博客前后端运维部署

    个人博客 前端:https://lujiesheng.cn 个人博客 后端:https://api.lujiesheng.cn 个人博客 运维:https://portainer.lujiesheng.cn 我采用的是 腾讯云轻量应用服务器(2C 4G 8M 80G),配置如下图: 安装镜像选择 CentOS 7.6 64bit: 添加防火墙出入站规则,设置如下图: 把已备案的域名解析到服务器

    2024年02月14日
    浏览(39)
  • 博客首页效果

    学习来自风`宇blog的博客首页效果 全部用的基本上都是原生的html,css,js 特别是flex布局的使用,主轴方向可以是横轴,也可以是纵轴,弹性项还可可以使用百分比 sticky粘性布局,作为侧边栏,它不会超出右边的整体范围,也不会丢失原来所占的空间(相对定位特性),能固

    2023年04月12日
    浏览(36)
  • 二、创建个人首页页面

    改造 App.vue 创建一个展示页面,实现一个可以轮播的功能效果。⭐️ 欢迎访问个人的简历网站预览效果 本章涉及修改与新增的文件: style.css 、 App.vue 、 assets 一、 自定义全局样式 将 style.css 中的文件样式内容替换为如下代码 二、修改 App.vue 中代码 = To Be Continued 点赞 评论

    2024年02月09日
    浏览(41)
  • Github自定义个人首页

    GitHub 个人主页,官方称呼是 profile,是一个以 Markdown 脚本语言编写的个人 GitHub 展示主页面。Guthub 个人主页可以展示很多有用的信息,例如添加一个首页被访问次数的计数器,一个 Github 被 Star 与 Commit 的概览信息,以及各种技能标签,设备标签等,还可以利用 wakatime 显示你

    2024年02月07日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包