登录 注册

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

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

简介

主题 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: 是否使用自定义背景图片默认替换原背景图片

网络图片

  • 思源笔记

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

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

    25120 引用 • 103566 回帖 • 1 关注
2 操作
shuoying 在 2022-06-25 00:15:24 更新了该帖
shuoying 在 2022-04-10 13:28:12 更新了该帖
4 收藏
2 赞同
2 操作
11 回帖
3
2.9k 779 155 565 62 17 1 1.3k

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Astraia • • 1 评论
    订阅者 付费者

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

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

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

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

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

    建议挪挪位置。

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

    威武~~~

  • hyouka • • 1 评论
    付费者

    添加文件和内容，重启思源，好像不生效，还是默认的两张图，请问有更新的文章吗

    嗯嗯, 该文档已过时, 现在需要分别设置横屏与竖屏的图片, 详情请参考 配置示例 | CONFIG EXAMPLE
    shuoying •
  • 查看全部回帖
shuoying
一团儿名为 '\u4eba' 的光球～
回帖
402
 帖子
45
 积分
39753