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

本贴最后更新于 642 天前,其中的信息可能已经时移世异

简介

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

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

演示

思源笔记功能示范 11.gif

使用

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

其他

注意事项

自定义配置

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

export var config = {
    theme: {
        background: {
            // 背景图片功能开关
            enable: true,
            image: {
                enable: true, // 是否启用背景图片更改功能
                web: {
                    enable: true, // 网络背景图片
                    toolbar: { // 菜单栏
                        enable: true,
                        display: true,
                        id: 'toolbar-theme-background-image-web',
                        hotkey: () => config.theme.hotkeys.background.image.web,
                        label: {
                            zh_CN: '更换背景图片 (网络)',
                            zh_CNT: null,
                            fr_FR: null,
                            en_US: null,
                            other: 'Change Background Image (Web)',
                        },
                        icon: '#iconImage',
                        index: 5,
                    },
                    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,
                        display: true,
                        id: 'toolbar-theme-background-image-custom',
                        hotkey: () => config.theme.hotkeys.background.image.custom,
                        label: {
                            zh_CN: '更换背景图片 (自定义)',
                            zh_CNT: null,
                            fr_FR: null,
                            en_US: null,
                            other: 'Change Background Image (Custom)',
                        },
                        icon: '#iconImage',
                        index: 6,
                    },
                    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',
                        '/appearance/themes/Dark+/image/light/background (07).jpeg',
                        '/appearance/themes/Dark+/image/light/background (08).jpeg',
                        '/appearance/themes/Dark+/image/light/background (09).jpeg',
                        '/appearance/themes/Dark+/image/light/background (10).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: 是否使用自定义背景图片默认替换原背景图片

网络图片

  • 思源笔记

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

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

    18130 引用 • 66884 回帖
2 操作
shuoying 在 2022-06-25 00:15:24 更新了该帖
shuoying 在 2022-04-10 13:28:12 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 其他回帖
  • suiji 3 评论

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

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

    建议挪挪位置。

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

    image.png

    image.png

    js 里面,label 名称我没改,怎么加载出来的时候成 undefined 了?

    这篇文档比较旧了, 目前版本支持了 i18n, 文章中的配置选项已更新
    shuoying
  • suiji

    请问大佬,随机到的网络图片,能搞到它的出处链接吗?有的图比较喜欢,想下载下来。

    1 回复
  • 查看全部回帖