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文件夹
  • 将根目录的websrcs文件夹,以及其他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或者请我喝杯奶茶~万分感谢🎉🎉🎉