[思源笔记经验分享] 使用网络背景图片 / 本地背景图片

简介

主题 Dark+v0.7.1 中又更新的几个小功能:

如果需要订阅服务, 欢迎使用我的推荐码呀: h0sc9rc (*^▽^*)

演示

思源笔记功能示范 11.gif

使用

若不使用 Dark+ 主题, 可以下载该主题 v0.7.0+ 版本, 并将该主题目录下的 theme.js 文件 复制 到所使用的其他主题的目录下

其他

注意事项

  • 网络图片切换时可能需要禁用缓存, 详情请参考: [siyuan://blocks/20201225202158-gfmyvql

自定义配置

工作空间/data/widgets/custom.js 文件(如果没有则新建)中使用如下字段覆盖原配置

export var config = {
    theme: {
        background: {
            // enable: true, // 背景图片功能开关
            image: {
                enable: true, // 是否启用背景图片更改功能
                web: {
                    enable: true, // 网络背景图片
                    toolbar: { // 菜单栏
                        enable: true,
                        id: 'theme-background-image-random',
                        label: '更换背景图片 (网络) [Shift + Alt + R]\nChange background image (Web)',
                        icon: '#iconImage',
                        index: 2,
                    },
                    random: true, // 是否随机切换网络背景图片 URL
                    light: [ // 随机亮色背景图片 URL
                        'https://source.unsplash.com/random/1920x1080/?bright',
                        'https://api.dujin.org/bing/1920.php',
                        'https://unsplash.it/1920/1080?random',
                        // 'https://api.ixiaowai.cn/gqapi/gqapi.php⁠⁠⁠⁠⁠⁠',
                    ],
                    dark: [ // 随机暗色背景图片 URL
                        'https://source.unsplash.com/random/1920x1080/?night',
                        'https://source.unsplash.com/random/1920x1080/?starry',
                        'https://source.unsplash.com/random/1920x1080/?dark',
                    ],
                },
                custom: {
                    enable: true, // 自定义背景图片
                    toolbar: { // 菜单栏
                        enable: true,
                        id: 'theme-background-image-custom',
                        label: '更换背景图片 (自定义) [Ctrl + Shift + Alt + R]\nChange background image (Custom)',
                        icon: '#iconImage',
                        index: 3,
                    },
                    random: true, // 是否随机选择自定义背景图片
                    default: false, // 是否默认使用自定义背景图片
                    light: [ // 自定义亮色背景图片 URL 列表
                        '/appearance/themes/Dark+/image/light/background (01).jpeg',
                        '/appearance/themes/Dark+/image/light/background (02).jpeg',
                        '/appearance/themes/Dark+/image/light/background (03).jpeg',
                        '/appearance/themes/Dark+/image/light/background (04).jpeg',
                        '/appearance/themes/Dark+/image/light/background (05).jpeg',
                        '/appearance/themes/Dark+/image/light/background (06).jpeg',
                    ],
                    dark: [ // 自定义暗色背景图片 URL 列表
                        '/appearance/themes/Dark+/image/background (01).jpg',
                        '/appearance/themes/Dark+/image/background (02).jpg',
                        '/appearance/themes/Dark+/image/background (03).jpg',
                        '/appearance/themes/Dark+/image/background (04).jpg',
                        '/appearance/themes/Dark+/image/background (05).jpg',
                        '/appearance/themes/Dark+/image/background (06).jpg',
                        '/appearance/themes/Dark+/image/background (07).jpg',
                        '/appearance/themes/Dark+/image/background (08).jpg',
                        '/appearance/themes/Dark+/image/background (09).jpg',
                        '/appearance/themes/Dark+/image/background (10).jpg',
                        '/appearance/themes/Dark+/image/background (11).jpg',
                        '/appearance/themes/Dark+/image/background (12).jpg',
                    ],
                },
            },
        },
    },
};
  • config.theme.background.image

    • web: 网络背景图片
      • light: 设置浅色主题中使用的网络图片 URL 列表
      • dark: 设置深色主题中使用的网络图片 URL 列表
      • random: 随机选择网络背景图片 URL
    • custom: 自定义背景图片
      • light: 设置浅色主题中使用的自定义背景图片列表

      • dark: 设置深色主题中使用的自定义背景图片列表

        • 使用思源提供的一些静态文件服务

          • cookie 鉴权

            • 资源: /assets/...

              • 路径: <工作空间>/data/**/assets/
          • 不鉴权

        • 使用 file:// 协议设置本地图片

          • 示例: file://D:/image/background/background (01).jpg
      • random: 自定义背景图片是否随机切换

      • default: 是否使用自定义背景图片默认替换原背景图片

网络图片

1 操作
shuoying 在 2022-04-10 13:28:12 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • suiji 3 评论
    订阅者

    反映一个情况,供大佬斟酌。

    顶部工具栏上“删除当前文档”和“随机网络图片”是紧挨着的,而”随机“往往意味着”短时间内多次使用“,这增大了误触风险。我就误触了。诱使我犯错的,不仅是位置,还有鼠标指针形状,分明是禁止形状(一个圈内加斜线)而非手指形状,确仍然触发整个文档内容的删除,删除动作也不是能靠 Ctrl+z 撤销的,得从 history 里翻。

    建议挪挪位置。

    是一个大 bug, 感谢反馈 ❤
    shuoying
    请升级到 v0.7.1 试试看, 应该已经修复了
    shuoying
    收回前言,重建索引后就好了,问题也修复了。。。。。。不清楚,不清楚到底有没有更新……主题卸载,文件夹删除,软件和电脑重启,然后重新下载新主题,结果是一切如旧——无论是顶部工具栏,还是我的背景图片,还是自己调的编辑区内边距……无从理解,搞不懂啊…………
    suiji
  • 其他回帖
  • shuoying
    捐赠者 订阅者 作者

    使用快捷键 Ctrl + Shift + I 打开开发者工具, 在网络资源里面找, 如下图所示

    image.png

    1 回复
  • Astraia 1 评论
    订阅者

    使用自己的图片时,无法替换背景,直接替换原图片没有用,建立 custom.js 也没用

    可否添加一些绿色护眼的图片,原来的都太白了

    浏览器缓存机制的问题, 详情请参考帮助文档 siyuan://blocks/20201225202158-gfmyvql
    shuoying
  • suiji
    订阅者

    学到了,赞美大佬!

  • 查看全部回帖
shuoying
一团儿名为 '\u4eba' 的光球~