thumbnail
Scott-Theme是基于niRvana二次开发，UI设计参考Neumorphism，从niRvana的基础上新增了一些功能，并且做了UI的调整。
Scott

整体预览

新增的内容

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

 修改图片组组件，使其可以输入 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/

提示

后续更新主题可以注意Github的提交记录，如果只更新了source文件夹下的内容，则只需要将打包后的web目录替换到服务器

如果你是第一次使用该主题，重启后出现502提示，可以试着重启你的Docker，大多数情况下他都会使主题生效且不再出现502

更新日志

获取主题

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

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

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