scott theme · 基于niRvana二次开发的主题

整体预览

新增的内容

 首页有两种卡片样式可供选择

 修改图片组组件，使其可以输入 url 设置图片

 文章详情页增加了分享海报功能

 增加了文章目录，针对文章内的 小标题组件(h2,h3)标签样式

 新增个人外链，外观设置-主题设置(scott)-个人外链设置

 首页侧边栏改为固定形式，分类文章不再宽出侧边栏

 图片组组件增加多图预览功能，不再是单个预览，基于 naive ui 的预览功能

 新增打赏功能，外观设置-主题设置(scott)-打赏图片设置

首页卡片样式选择

 本站默认使用样式一

 展开式动画，可能会比样式一稍微更消耗性能一些

图片组组件

增加了可输入url链接，也可以使用自带的媒体库。

缺点是url外链无法使用缩略图。

分享海报功能

可以根据当前文章生产带文章链接二维码的海报图片，支持以下功能：

1. 分享到微博
2. 分享到QQ
3. 分享到QQ空间
4. 保存到本地

文章目录

文章目录改为检测文章内是否有使用小标题组件，其中H2为父级目录，H3为子级目录

推荐父级目录使用样式一，子级目录使用样式二

图片组预览

niRvana自带的图片组预览只预览了当前图片，无法进行翻页。

但是我想要的是可以翻页的一组图片的预览，所以根据Naive UI重写了图片组的预览功能

打赏功能

新增打赏功能，外观设置-主题设置(scott)-打赏图片设置

你可以添加你的收款二维码图片，并且可以自定义tab的标题

其他功能

其他功能待开发，你可以关注我的Github仓库，最新的代码第一时间都会发布上去

使用主题

运行或打包代码需要nodejs环境

• 获取代码后进入到source目录，运行 npm install 安装依赖
• 安装好依赖之后运行 npm run build 打包代码
• 打包完成后会在项目根目录生成一个web文件夹
• 将根目录的web、srcs文件夹，以及其他js文件都打包放到一个新建目录scott-theme
• 将scott-theme目录放到你的nvPress安装目录的themes文件夹下
• 在nvPress后台重启服务后即可看到主题生效

主题目录结构如下：

----  function-archive.js
----  function-blocks.js
----  function-fontawesome.js
----  function-home.js
----  function.js
----  function-post.js
----  function-ssr-404.js
----  function-ssr-articles.js
----  function-ssr-block-renderer.js
----  function-ssr-footer.js
----  function-ssr-frontpage.js
----  function-ssr-header.js
----  function-ssr.js
----  function-ssr-single.js
----  function-ssr-sitemap.js
----  function-ssr-term.js
----  function-widgets.js
----  module-js-yaml.min.js
----  srcs/
----  theme.json
----  web/

更新日志

获取主题

原版主题已经迁移到nvPress平台并免费提供，请加QQ群获取：611246443

当前主题源码在我的Github仓库，你也可以点击底部按钮进行下载

如果你觉得本篇文章对你有所帮助，可以帮我GitHub点个star或者请我喝杯奶茶~万分感谢🎉🎉🎉