登录 注册

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

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

简介

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

网络图片

  • 思源笔记

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

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

    23028 引用 • 92640 回帖
2 操作
shuoying 在 2022-06-25 00:15:24 更新了该帖
shuoying 在 2022-04-10 13:28:12 更新了该帖
4 收藏
2 赞同
2 操作
11 回帖
3
2.5k 753 155 458 61 17 1 1.1k

相关帖子

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

欢迎来到这里！

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

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

    image.png

    image.png

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

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

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

    1 回复
  • Astraia • • 1 评论
    订阅者 付费者

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

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

    浏览器缓存机制的问题, 详情请参考帮助文档 siyuan://blocks/20201225202158-gfmyvql
    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 •
  • 查看全部回帖
shuoying
一团儿名为 '\u4eba' 的光球～
回帖
402
 帖子
45
 积分
39733