专门介绍 ASRi

本贴最后更新于 227 天前,其中的信息可能已经事过景迁

专门介绍 ASRi

看到论坛里有小伙伴狂赞 QYL,心想也得介绍一下一直以来不断私下帮我改各种代码的 ASRI 大佬。

所以,俺也得当个自来水粉,必须夸夸 ASRI。

如图,我将介绍一下 ASRI 的好用(颜值)

一 我认为的优点

  1. 可以自定义面板颜色——调来调去总有你心仪的那款颜色,这个功能就非常牛非常特别啊,记忆中好像只有 ASRI 有(无拉踩,若弄错请纠正)
  2. 大大高产赛那啥 ❤——从年前到现在,除了自定义颜色外,又鼓捣出了四款颜色主题,就我的审美,颜值很高,色相色值搭配美观协调(我不用只是因为我习惯我现在的配色)image.png
  3. 文档视觉提示聚焦——就是每一段文字段落左边开头处,会有一个超级大的光标,用以标志“你所在的段落”,这非常有利于专注阅读。之前某个版本还有过“方框选中文档”这个设定,可能是视觉动态干扰太多,就去掉了,这个本来应该是插件的任务吧,居然被一个主题给实现了,大大赛高。
    如图,聚焦聚焦,这个设计很巧妙image.png
  4. 动画效果很漂亮——凡是出现动画的地方,对于“阴影”的使用选取尺度很好,大幅提升了主题的高级感(阴影就是提升逼格的常用设计啊)image.png
    其他地方的阴影都很小,偏偏在集市这里,每选中一个插件就会有大范围阴影高光将其凸显出来,为啥呢?这当然是为了醒目,并且颜值也高。
    为啥我会这么说呢?因为在此之前,我从来没有关注过这个插件市场界面的呈现效果,但是,这几天忽然就注意到了。我不清楚这种阴影高光是现在更新还是之前就有的(大大更新也挺勤),但是,一旦注意到,就觉得它超好用。
  5. 正文的备注非常直观——与其他主题不同,如果你对某个文档在属性弹窗里进行了描绘,那么这段文字就会直接出现在这个文档标题下方,而不是以 M 图标出现。我认为这很直观。(不过这个备注文字对我而言有点小,靠 ai 写了 CSS 也搞定了)image.png
  6. 顶栏合并——这个有些主题也有,这里只是作为介绍,还有其他一些界面上的小设计也很好平衡了实用与颜值的尺度,至少非常符合本人的使用习惯(这里不细说了,因为一说就必须拿其他主题对比,总之,我超爱 ❤)
  7. 大大本人互动超好——不过除了提设计需求 or 某些 bug 外,自己能搞定的还是尽量自己搞定,别去麻烦和打扰别人啊。厚脸皮如我,就请大大帮忙定制了这个主题的好几个 CSS。
  8. 唯一的吐槽——并非大大的问题,但这个主题是定制主题?所以很多论坛给出的 CSS 代码,没法直接用,必须要按照 ASRI 那个格式重新写,这对不懂代码的小白如我,费老大劲了……不过折腾到现在也很稳定了。这个有哪个大佬可以解释一下其中原理吗???

不好意思,最近太忙了,摸鱼写了篇帖子,没想到后续真会有求这个代码的(结果不生效,帮忙找了好半天原因 😂)。之后会整理出个 asri 主题下的我自己调的文件包——直接弄个全新的思源空间打包上来(or 云盘,不占论坛空间),这样就可以避免失效之类的问题,也还有我一直偷摸摸收集的思源各种 css+js(散落各处需要整理),之后任君自取。(哈哈,就当俺王婆卖瓜自卖自夸臭美分享吧(◕ܫ◕)

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28442 引用 • 119753 回帖
  • Asri
    3 引用 • 17 回帖 • 1 关注
3 操作
Floria233 在 2025-05-09 07:15:13 更新了该帖
Floria233 在 2025-05-09 07:10:54 更新了该帖
Floria233 在 2025-05-09 07:04:44 更新了该帖
14 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • RH108 1 评论

    感觉多一些这样的夸赞确实可以帮助我这样的小白快速了解一个主题的潜在优势 👍


    看到对于备注功能的描述立刻进行了尝试,但发现与“侧边备注”插件好像有冲突,虽感觉不错,只能再等等了

    已定位问题,下个版本修复 ~
    Mustakshif
  • xueluo

    Asri 主题的色彩搭配、视觉体验、模式切换、界面风格、控件样式、排版效果、交互设计等细节方面做的很棒!特别喜欢新推出的零域、空屿预设配色方案,搭配喜欢的动漫图片做背景,笔记颜值简直太美了!希望开发者能再多推出一些好看的预设配色方案,在此谢谢了!

    目前在使用主题时发现了个小问题:
    1、添加顶栏倒计时 JS 代码,发现图中红色虚线框部分影响美观

    image.png

    2、theme.css 代码里,没有像其它主题在代码里进行分类描述(如下图所示),查找相关代码比较麻烦

    image.png

  • 5kyfkr 6 评论

    渐变标题是哪个帖子找的?我没找到

    这个没说清楚,是找了五级标题的 CSS,之后请 ai 改的,论坛里只有这个 CSS 语法,让 ai 写渐变色,这个不需要强制使用 Asri 也可以用但怎么调教是要 ai 。就是说,只找五级标题的 CSS 就可以了。具体你喜欢啥效果都可以让 ai 给你调。我的是五个都一样(只是渐变色就满足了,但更花哨的也没调好)
    Floria233
    @Floria233 那能把你现在用的分享下嘛,感谢
    5kyfkr
    @5kyfkr 就是这个。我感觉还行(不,其实一般)/* 统合基础样式 / .protyle-wysiwyg [class^="h"] { --radial-color: #9CFF9C; / 径向渐变起始色 / --linear-start: #00B3FF; / 线性渐变起始色 / --linear-end: #0050D4; / 线性渐变终止色 / --gradient-angle: 135deg; / 渐变角度 / background: radial-gradient(circle at 30% 50%, var(--radial-color) 0%, transparent 50%), linear-gradient(var(--gradient-angle), var(--linear-start) 0%, var(--linear-end) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; mix-blend-mode: screen; display: inline-block; } / H1 - 星云浅青 / .protyle-wysiwyg .h1 { --radial-color: #C8FFC8; / 亮度 +20% / --linear-start: #80D8FF; / 饱和度-30% / --linear-end: #003C8F; / 明度-20% / } / H2 - 原始 H3 效果 / .protyle-wysiwyg .h2 { / 保持默认变量值 / filter: saturate(1.1); } / H3 - 基准效果 / .protyle-wysiwyg .h3 { / 原始定义保留 / } / H4 - 深海强化 / .protyle-wysiwyg .h4 { --radial-color: #80FF80; / 饱和度-20% / --linear-start: #0077CC; / 色相 +5° / --linear-end: #002D5A; / 明度-40% / --gradient-angle: 125deg; } / H5 - 暗夜模式优化 / .protyle-wysiwyg .h5 { --radial-color: #60E060; / 饱和度-30% / --linear-start: #005299; / 色相 +10° / --linear-end: #001A33; / 明度-60% */ mix-blend-mode: difference; } }
    Floria233
    @5kyfkr 这时候我发现我只调了四级,一般很少用到第五级(捂脸)不过你把前面的复制一下就行了,不影响
    Floria233
    @Floria233 好像我这里代码用了标题直接看不到变成透明的了
    5kyfkr
    @5kyfkr ?我没遇到这个情况,怎么会变透明?透明的话你怎么能看见?它顶多是不生效啊。这个,我为了不盖楼,它应该有格式的,不能按照评论区这个格式直接复制,我给你私聊发一分,它要转行的
    Floria233
  • Asri 确实非常棒,无论是审美还是功能都无可挑剔

  • nightstars

    这个主题确实很好看,特别是岁禧那个主题色,

    1 操作
    nightstars 在 2025-05-08 13:05:21 更新了该回帖
  • Floria233

    经楼下小伙伴的测试,我给的这个五级标题大纲可能会不生效???所以后续如果大家也有类似兴趣。

    可以参考下我当时的做法。

    0 我用的是 asri 主题,但这段 CSS 并不限定在 asri 主题(为啥不生效我实在不清楚)

    1 先在论坛找一些五级标题的 CSS 代码

    2 复制粘贴到 ai 里面,再让 ai 根据思源语法调教

    3 反复调教,调出你喜欢的渐变色

    4 如果不生效,优先用思源原生主题测试,我测试之后,在原生上也是可以用的。

    所以,楼下这段代码,各位慎重复制使用,如果不生效请不要问我(小白真不清楚啊,我排查了目前所有的 CSS 和 JS,保证没有其他设置)

  • daloo

    asri 确实优秀,现在的几个配色都很好看

  • Mayrain 1 评论

    嘶,可以分享一下自定义代码段吗,这个配置很喜欢

    uu 私聊,你要哪些?等我不忙的时候给你发
    Floria233
  • jacob111 1 评论

    这个主题的字和背景的对比太强了,看的很不舒服,题主的这个配色是怎么用这个主题做到的?

    这个是自定义配色,主题色自定义,背景色用这个 [css] 优化 Asri 背景色 ,确实,大多数主题都有这个问题,对比度太高,看起来比较刺眼。
    Floria233
  • Floria233

    2025 年 7 月 14 日的新发现(不知道哪个版本重新设计了)

    ASRI 许多界面元素从直角变成了圆润的 R 角。

    为啥都这么执着于 R 角???

    这世界终于从方正变得圆滑了哈哈哈

  • Floria233 1 评论

    2025 年 9 月 25 日的发现

    这个又是一个新功能,可以在样式界面很丝滑调整字体大小。

    这个就叫 good 哒,这个是思源的自带样式,还是不可以随便乱夸哈哈。

    1 回复
    1 操作
    Floria233 在 2025-09-26 00:00:15 更新了该回帖
    改改改,这里弄错啦,这是思源自带的。我近来发现的倒是还有另一个问题,那就是 asri 的字体颜色好像跟着主题变化了,我选的主题色是一种冷蓝色,字体也跟着变成一种冷白色,之前这个字体颜色似乎没有那么冷感,这个需要调整(找 AI 写很容易),其他小伙伴,如果要调整主题色的话,可能要考虑一下颜色冷暖对正文字体的影响。
    Floria233
  • 这个是原生功能,主题只是改了样式

    image.png

    1 回复
  • Floria233

    image.png

    哦哦,是吗?有个笔记库用了很久的浅吟主题没发现这个(whsiper 应该是最新版,不想随便麻烦各个代码佬就没去提了),我还以为是 asri 独有的,乌龙了 😂 (这么一说,感觉这个功能确实似曾见过,最近又开始折腾了……)

    1 回复
  • 因为我不希望有人在思源里修改字号大小,所以我把不符合主题理念的功能都给隐藏了(p.s. 其实也没几个功能)。

请输入回帖内容 ...

推荐标签 标签

  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 367 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 144 回帖
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 2 关注
  • 安装

    你若安好,便是晴天。

    134 引用 • 1184 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 1 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 236 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 342 关注
  • 创业

    你比 99% 的人都优秀么?

    81 引用 • 1396 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 63 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 475 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 121 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 191 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 46 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    182 引用 • 400 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • abitmean

    有点意思就行了

    44 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 565 关注
  • 音乐

    你听到信仰的声音了么?

    63 引用 • 513 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    293 引用 • 4496 回帖 • 687 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖