受欢迎的博客标签

MiniBlog.Core是一个基于ASP.NET Core 2.0构建的全新强大的博客平台,可跨设备提供出色的阅读体验。它通过遵循最新的Web开发最佳实践来实现这一目标,包括一流的性能,可访问性,可读性,搜索引擎优化,使用移动优先策略的社交网络集成。

查看演示站点并查看源代码。您还可以通过安装ASP.NET核心模板包将Miniblog.Core作为Visual Studio的项目模板。

Live demo: https://miniblogcore.azurewebsites.net/
Username: demo
Password: demo

miniblog.core

构建Miniblog.Core

我想创建一个基于ASP.NET Core的新博客引擎,它将利用现代浏览器为访问者和作者创造最佳体验。这意味着博客必须加载非常快,提供良好的阅读体验,在所有类型的设备上看起来很棒,并自动处理社交媒体集成和搜索引擎优化等所有技术内容。

Web字体

选择正确的字体对于为博客的读者提供良好的体验至关重要。通常这意味着使用CSS加载和使用的自定义Web字体。自定义Web字体的问题是浏览器需要下载它们,并且在慢速移动连接上可能需要一段时间。

相反,我想使用内置于各种浏览器的字体来提供相同的高质量阅读体验,但没有额外的文件下载。这是我使用的CSS:

 

body { font: 19px/1.6 "Open Sans", Ubuntu, "Nimbus Sans L", Avenir, AvenirNext, "Segoe UI", Helvetica, Arial, sans-serif;}

上述字体系列可确保在任何给定的浏览器/操作系统或设备上安装至少一种字体。

图像优化

多年来,我一直在使用Visual Studio 的Image Optimizer扩展来优化我的Web项目中的图像。这对于我之前所知的图片来说非常棒,但是作为博客文章的一部分,用户上传的图片又如何呢?在上传时,需要在生产服务器上优化图像。

据我所知,没有.NET Core库可以优化图像以及Image Optimizer扩展,因此我创建了一个Azure Webjob,其中包含与扩展完全相同的优化算法并将其包装在NuGet包中。

它被称为Azure Image Optimizer,可以将其添加到任何ASP.NET项目中 - 无需额外的步骤。当ASP.NET应用程序发布到Azure时,NuGet包将向发布输出添加Webjob,该输出会在到达Azure后自动启动并监视图像文件。它不会在您的项目中留下任何工件,也不需要任何代码更改 - 只需添加NuGet包并部署到Azure。

内容分发网络(CDN)

为了确保尽可能优化博客,我决定让它非常容易利用CDN来提供所有静态文件,如JavaScript,CSS和图像。

为此,我使用WebEssentials.AspNetCore.CdnTagHelpers Nuget包,通过将其添加到appsettings.json来自动CDNify所有静态资源引用:

{ “cdn”:{ “url”:“https://myname.azureedge.net” }}

Sass,捆绑和缩小

我想使用Sass而不是普通的旧CSS,所以我需要一种方法来编译它。我可以设置Gulp或WebPack来处理JavaScript和Sass的转换,缩小和捆绑,但我决定采用更简单的方法,即LigerShark WebOptimizer.Core和LigerShark.WebOptimizer.Sass NuGet包。

通过使用这些包,我得到运行时和/或构建时资产管道管理,几乎没有代码。唯一需要的是在Startup.cs中注册服务和中间件,如下所示:

services.AddWebOptimizer(pipeline =>{ pipeline.MinifyJsFiles(); pipeline.CompileScssFiles() .InlineImages();});

这将自动编译和缩小我的Sass文件到CSS并缩小JavaScript文件。无需其他代码或工件。我非常喜欢将WebOptimizer管道用于不需要Gulp或WebPack的网站。

github 地址:https://github.com/madskristensen/Miniblog.Core