登录 注册

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

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

简介

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

网络图片

  • 思源笔记

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

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

    22340 引用 • 89396 回帖 • 1 关注
2 操作
shuoying 在 2022-06-25 00:15:24 更新了该帖
shuoying 在 2022-04-10 13:28:12 更新了该帖
4 收藏
2 赞同
2 操作
11 回帖
3
2.5k 744 155 412 59 17 1 1.0k

相关帖子

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

欢迎来到这里！

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

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

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

    1 回复
  • shuoying •
    订阅者 支持者 捐赠者 恶龙 作者

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

    image.png

    1 回复
  • szukkboy •
    订阅者 支持者 恶龙

    威武~~~

  • suiji •
    订阅者

    学到了，赞美大佬！

  • suiji • • 3 评论
    订阅者

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

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

    建议挪挪位置。

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

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

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

    浏览器缓存机制的问题, 详情请参考帮助文档 siyuan://blocks/20201225202158-gfmyvql
    shuoying •
  • ASiYuanNoteUser • • 1 评论

    image.png

    image.png

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

    这篇文档比较旧了, 目前版本支持了 i18n, 文章中的配置选项已更新
    shuoying •
  • Fighter93 • • 1 评论
    付费者

    今天是 2022 年 8 月 29 日，我的思源笔记用这个皮肤，很多功能都用不了，比如修改字体、思维导图视图、更换背景图片，都是点了图标、菜单，但是没有执行。不知哪里出了问题。

    打开开发者模式瞅瞅有无错误信息输出~
    shuoying •
  • hyouka • • 1 评论
    付费者

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

    嗯嗯, 该文档已过时, 现在需要分别设置横屏与竖屏的图片, 详情请参考 配置示例 | CONFIG EXAMPLE
    shuoying •
  • py • • 3 评论

    你好呀，有个问题想请教下

    image.png

    主题更新到 v1.9.2 版本即可
    shuoying •
    @shuoying 集市上下载不到 1.9.2，github 上下载的看时间也是 5/17 日 1.9.1 的，比较奇怪
    py •
    @shuoying 集市上还是下不到。github 上 package 版本不对，下载源码包为正确的，覆盖后 OK
    py •
  • cyrusmaster •

    大佬我提交了 issue 能不能帮忙看看

    https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/issues/218

请输入回帖内容 ...
shuoying
一团儿名为 '\u4eba' 的光球～
回帖
402
 帖子
45
 积分
39728