基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能

系列文章

• 基于.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) 加入友情链接功能
• 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
• ...

前言

近期一直在写代码，给博客新增了一些功能，本来想写一篇文章一起介绍的，不过好像篇幅会太长，想想还是分开写好了~

本文介绍主题切换功能，StarBlog博客页面基于Bootstrap5实现，Bootstrap本身的设计是比较简洁大方的，不过看久了也会腻，自己调css太麻烦，好在Bootstrap世界有个东西叫bootswatch，提供了几十套主题，我只需要npm install然后就可以实现主题切换功能了~

实现效果

照例先看看实现的效果

默认主题	quartz主题

PS：目前浅色主题可以比较好的适配，深色主题还在适配中，部分页面的显示效果不佳

思路

bootswatch切换主题的方式是引入其提供的bootstrap.css文件，覆盖Bootstrap默认的样式

我在DjangoStarter中实现的切换主题用的是Django的TemplateTag，它可以在模板渲染的时候根据用户选择的主题，加入对应的css文件引用

理论上使用AspNetCore MVC实现的StarBlog项目也是可以用这种方式实现主题切换的，不过当时开发时遇到一些处理起来比较麻烦的问题，所以我决定改为暴露主题API，通过JS动态加载css的方式实现。

添加依赖

开始代码~

首先添加bootswatch依赖，需要和Bootstrap版本对应，本项目使用的Bootstrap版本是5.1.3，所以这个bootswatch版本也需要同步使用5.1.3

yarn add bootswatch

在gulpfile.js中配置自动复制

//使用 npm 下载的前端组件包

const libs = [

    {name: "bootswatch", dist: "./node_modules/bootswatch/dist/**/*.*"},

];

在StarBlog.Web目录下执行gulp move命令，gulp会自动把bootswatch相关文件复制到wwwroot/lib目录中，方便接下来的使用

关于使用NPM和Gulp管理静态资源的详情，可以参考前面的这篇文章：Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件

编写Service

在StarBlog.Web/Services中添加ThemeService.cs

首先是定义Theme模型

public class Theme {

    public string Name { get; set; }

    public string Path { get; set; }

    public string CssUrl { get; set; }

}

然后ThemeService，扫描wwwroot/lib/bootswatch中的所有主题，同时把Bootstrap默认主题也加入

public class ThemeService {

    public const string BootstrapTheme = "Bootstrap";

    private const string CssUrlPrefix = "/lib/bootswatch/dist";

    public List<Theme> Themes { get; set; } = new() {

        new Theme {Name = BootstrapTheme, Path = "", CssUrl = ""}

    };

    public ThemeService(IWebHostEnvironment env) {

        var themePath = Path.Combine(env.WebRootPath, "lib", "bootswatch", "dist");

        foreach (var item in Directory.GetDirectories(themePath)) {

            var name = Path.GetFileName(item);

            Themes.Add(new Theme {

                Name = name,

                Path = item,

                CssUrl = $"{CssUrlPrefix}/{name}/bootstrap.min.css"

            });

        }

    }

}

然后注册为单例服务就OK了

builder.Services.AddSingleton<ThemeService>();

写个接口

然后还需要写一个接口

在StarBlog.Web/Apis目录下新增个ThemeController.cs，代码很简单，只有一个action，获取全部主题

/// <summary>

/// 页面主题

/// </summary>

[ApiController]

[Route("Api/[controller]")]

[ApiExplorerSettings(GroupName = "common")]

public class ThemeController : ControllerBase {

    private readonly ThemeService _themeService;

    public ThemeController(ThemeService themeService) {

        _themeService = themeService;

    }

    [HttpGet]

    public List<Theme> GetAll() {

        return _themeService.Themes;

    }

}

前端实现

主题的后端部分完成了，前端需要完成三部分功能

• 请求接口，获取全部主题列表
• 设置主题，动态引入css
• 保存当前选择的主题，下次打开页面时自动引入

为了方便DOM操作，我使用了Vue，在Views/Shared/_Layout.cshtml底部引入

<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="~/lib/vue/dist/vue.js"></script>

<script src="~/js/site.js"></script>

先在来写最后一个引入的site.js代码，使用vue，网页打开时通过fetch函数加载主题列表，然后显示在页面上

还有切换主题时将当前主题的名称和css链接保存在localStorage中，下次加载页面的时候可以自动引入

let app = new Vue({

    el: '#vue-header',

    data: {

        currentTheme: '',

        themes: []

    },

    created: function () {

        fetch('/Api/Theme')

            .then(res => res.json())

            .then(res => {

                this.themes = res.data

            })

        // 读取本地主题配置

        let theme = localStorage.getItem('currentTheme')

        if (theme != null) this.currentTheme = theme

    },

    methods: {

        setTheme(themeName) {

            let theme = this.themes.find(t => t.name === themeName)

            loadStyles(theme.cssUrl)

            this.currentTheme = themeName

            localStorage.setItem('currentTheme', themeName)

            localStorage.setItem('currentThemeCssUrl', theme.cssUrl)

            // 换主题之后最好要刷新页面，不然可能样式冲突

            location.reload()

        }

    }

})

这里加载了主题，通过vue的双向绑定，把主题渲染在顶部菜单上（同时高亮当前主题）

也就是这个地方

<div class="px-3 py-2 border-bottom mb-3">

    <div class="container d-flex flex-wrap justify-content-center">

        <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" asp-controller="Search" asp-action="Blog">

            <input type="search" class="form-control" placeholder="Search..." aria-label="Search" name="keyword">

        </form>

        <div class="text-end">

            <span class="dropdown me-2">

                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">

                    Themes

                </a>

                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">

                    <li v-for="theme in themes">

                        <a v-if="theme.name===currentTheme" class="dropdown-item active">{{theme.name}}</a>

                        <a v-else class="dropdown-item" v-on:click="setTheme(theme.name)">{{theme.name}}</a>

                    </li>

                </ul>

            </span>

        </div>

    </div>

</div>

最后，还需要在页面刷新的时候读取主题配置，然后自动加载当前主题

因为动态切换主题会导致一些样式冲突啥的，所以需要在页面还没加载完成的时候先引入

因此我又写了个site.preload.js，放在页面的<head>部分

<script src="~/js/site.preload.js"></script>

代码如下，先读取当前主题，如果有设置过主题就读取CSS链接并且引入

（同时前面的site.js中也有使用到这个loadStyles函数）

// 动态加载CSS

function loadStyles(url) {

    let link = document.createElement("link");

    link.rel = "stylesheet";

    link.type = "text/css";

    link.href = url;

    let head = document.getElementsByTagName("head")[0];

    head.appendChild(link);

}

let currentTheme = localStorage.getItem('currentTheme')

if (currentTheme !== 'Bootstrap') {

    let themeCssUrl = localStorage.getItem('currentThemeCssUrl')

    if (themeCssUrl != null) loadStyles(themeCssUrl)

}

PS：动态加载CSS的代码来自：http://lengyun.github.io/js/3-2-2dynamicAddCSS.html

搞定~

基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能的更多相关文章

1. 基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目

   系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

2. 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目

   系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 ... 基于. ...

3. 基于.NetCore开发博客项目 StarBlog - (3) 模型设计

   系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

4. 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入

   系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

5. 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表

   系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

6. 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？

   前言 OK,我也来造轮子了 博客系统从一开始用WordPress,再到后来用hexo.hugo之类的静态博客生成放github托管,一直在折腾 折腾是为了更好解决问题,最终还是打算自己花时间搞一个好了 ...

7. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（三）

   上一篇(https://www.cnblogs.com/meowv/p/12974439.html)完成了全网各大平台的热点新闻数据的抓取,本篇继续围绕抓取完成后的操作做一个提醒.当每次抓取完数据后, ...

8. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（一）

   系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

9. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）

   系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

10. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

随机推荐

1. Dynamics XRM Tools 2015 2016

   Download Link: Dynamics XRM Tools 2015/2016 Overview Dynamics XRM Tools brings you a quality range o ...

2. UWP开发入门（十二）——神器Live Visual Tree

   很久以前,我们就有Snoop这样的工具实时修改.查看正在运行的WPF程序,那时候调个样式,修改个模板,相当滋润.随着历史的车轮陷进WP的泥潭中,无论WP7的Silverlight还是WP8.1的run ...

3. APP开发者到期续费说明

   几步搞明白APP开发者续费,不再苦恼.1.APP开发者账号快满一年时,注册邮箱会收到一封提醒续费的邮件.主题类似5 days left to renew your iOS Developer Prog ...

4. org.apache.solr.client.solrj.impl.HttpSolrServer$RemoteSolrException: Internal Server Error 错误

   Solr报错: { "responseHeader": { "status": 500, "QTime": 11 }, "erro ...

5. 异常-----springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.

   说明这个问题产生的原因主要是form表单上传图片的时候必须是Content-Type:"multipart/form-data,这种格式的,但是ajax在页面不刷新的情况下去加载的时候只会把 ...

6. .NET、C#和ASP.NET、ASP.NET MVC四者之间的区别

   什么是.NET? .NET是微软公司下的一个开发平台,.NET核心就是.NET Framwork(.NET框架)是.NET程序开发和运行的环境,在这个平台下可以用不同的语言进行开发,因为.NET是跨语 ...

7. windows环境变量PATH顺序的重要性

   PATH是路径的意思,PATH环境变量中存放的值,就是一连串的路径.不同的路径之间,用英文的分号间隔开.系统在执行用户命令时,若用户未给出绝对路径,则首先在当前目录下寻找相应的可执行文件.批处理文件等 ...

8. PHP开启mysqli扩展

   Call to undefined function mysqli_connect()解决这个问题需要开启mysqli扩展开启mysqli扩展需要这两个步骤缺一不可1.在php.ini中搜索php_m ...

9. Qt5中运行后台网络读取线程与主UI线程互交

   项目中有一个需求就是,因为需要请求服务端数据,因为网络的读取会阻塞,所以该过程不能放在Qt中的UI主线程当中,需要用一个后台线程来读取数据,数据准备完毕后 在通过Qt5中的信号槽机制来跨线程的传递数据 ...

10. React-生命周期的相关介绍

    1.mounting/组件插入相关 (1)componentWillMount  模板插入前 (2)render 模板插入 (3)componentDidMount 模板插入后 2.Updating/ ...