怎样添加自定义图片源
<p>[TOC]</p>
<p>为了避免使用自定义图片源功能时遇到版本冲突，建议在最新版应用中使用本功能。<a href="ms-windows-store://pdp/?productid=9MZRGV880V9N">点击这里</a>前往商店可以更新应用至最新版本。</p>
<p>此功能于2.7.2版本进行了大幅更改，如果您使用的是2.7.1及以下版本的应用，请参考<a href="https://www.showdoc.com.cn/DailyPicsUWP/10203151080260771">此文档</a></p>
<p>2.7.2版本对自定义图片源规则写法所做的修改请参考<a href="https://www.showdoc.com.cn/DailyPicsUWP/10203196195521337">此文档</a></p>
<h1>怎么手动添加图片源</h1>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=6041bbfecab4819f6b8cd9d335b5fe04&amp;file=file.png" alt="" />
手动添加图片源时，需要填写图片源名称、图片源介绍、图标链接、解析规则。以下重点介绍解析规则怎么填写。
解析规则保存为json格式</p>
<p><br/>
<br/></p>
<h3>示例1：</h3>
<p>以下是获取必应壁纸（带水印）的规则</p>
<pre><code>{
&quot;mode&quot;:&quot;0&quot;,
&quot;api&quot;:&quot;https://bingwallpaperimages.azureedge.net/hpimages/Latest/3840x2160/{0}.jpg&quot;,
&quot;para&quot;:[
{
&quot;startdate&quot;:&quot;t&quot;,
&quot;stride&quot;:-1,
&quot;startstride&quot;:-1,
&quot;limit&quot;:8,
&quot;dateformat&quot;:&quot;yyyyMMdd&quot;
}
],
&quot;model&quot;:{
&quot;title&quot;:[
{
&quot;default&quot;:&quot;必应壁纸&quot;
}
],
&quot;details&quot;:[
{
&quot;default&quot;:&quot;&quot;
}
],
&quot;copyright&quot;:[
{
&quot;default&quot;:&quot;Microsoft Bing&quot;
}
],
&quot;size&quot;:[
{
&quot;default&quot;:&quot;3840x2160&quot;
}
]
}
}
</code></pre>
<p><code>mode</code>为0时表示解析规则里的<code>api</code>是直接返回一张图片，而非返回json或xml数据
<code>api</code>是接口地址，你可能会注意到api里有个<code>{0}</code>，这是用于填充内容的模板字符串，正对应着<code>para</code>结点内的元素。<code>para</code>是一个数组，<code>api</code>里面有几个模板字符串，<code>para</code>数组里就应该有几个对象。<code>para</code>数组里的元素的内容，在这里可以先不用管他，我会在示例3中解释它们的用法。
这个例子中，<code>model</code>内包含这些元素：
①<code>title</code>表示加载出来的图片标题是什么。<code>title</code>为一个数组。其中，数组里的第一个对象里有 <code>&quot;default&quot;:&quot;必应壁纸&quot;</code>，意思是此图片源加载出来的图片标题都会命名为<code>default</code>结点对应的字符串（本例中为‘必应壁纸’）
②<code>details</code>表示加载出来的图片的详情
③<code>size</code>表示加载出来的图片的大小
④<code>copyright</code>表示加载出来的图片的版权信息</p>
<p>你可能会觉得上面这些参数的写法有些繁琐，不必担心，在例4中，会介绍参数缺省时的情况。下面可以先看看第2个例子。</p>
<p><br/>
<br/></p>
<h3>示例2：</h3>
<p>以下是获取必应壁纸（不带水印）的规则</p>
<pre><code>{
&quot;mode&quot;:&quot;2&quot;,
&quot;api&quot;:&quot;https://cn.bing.com/HPImageArchive.aspx?format=js&amp;idx={0}&amp;n={1}&quot;,
&quot;para&quot;:[
{
&quot;start&quot;:0,
&quot;stride&quot;:4
},
{
&quot;start&quot;:4,
&quot;stride&quot;:0
}
],
&quot;path&quot;:[
{
&quot;node&quot;:&quot;images&quot;
}
],
&quot;model&quot;:{
&quot;uri&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;display&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;thumb&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_800x480.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;title&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
},
{
&quot;value&quot;:&quot;，&amp;0&quot;,
&quot;type&quot;:&quot;split&quot;
}
],
&quot;details&quot;:[
{
&quot;default&quot;:&quot;&quot;
}
],
&quot;date&quot;:[
{
&quot;node&quot;:&quot;enddate&quot;
}
],
&quot;dateformat&quot;:&quot;yyyyMMdd&quot;,
&quot;copyright&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
}
],
&quot;size&quot;:[
{
&quot;default&quot;:&quot;1920x1080&quot;
}
]
}
}
</code></pre>
<p><code>mode</code>为2时表示解析规则里的<code>api</code>会返回json格式的文本，待会儿需要对返回的文本进行解析</p>
<p><code>para</code>存放api里的参数。可以插入多个参数。您可以注意到，本示例里面的<code>api</code>有<code>{0}</code>和<code>{1}</code>两个模板字符串，所以<code>para</code>数组有两个对象，其中每一个参数都存储为这样的格式：</p>
<pre><code>{
&quot;start&quot;:0,
&quot;stride&quot;:2
},</code></pre>
<p><code>start</code>表示这个参数初始时为多少。<code>stride</code>表示要加载第二页、第三页...数据时，该参数的增量。</p>
<p><code>para</code>里除了通过<code>start</code>指定数字格式的参数外，还可以通过<code>startdate</code>,<code>dateformat</code>,<code>stride</code>,<code>startstride</code>等来指定（格式化后的）日期形式的参数，详见“示例3 图片源的有限度加载”。</p>
<p><code>path</code>和<code>model</code>下的格式比之前要复杂。为了确定它们的内容，首先要分析一下从 [<a href="https://cn.bing.com/HPImageArchive.aspx?format=js&idx={0}&n={1}](https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=8">https://cn.bing.com/HPImageArchive.aspx?format=js&idx={0}&n={1}](https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=8</a> "<a href="https://cn.bing.com/HPImageArchive.aspx?format=js&idx={0}&n={1}"">https://cn.bing.com/HPImageArchive.aspx?format=js&idx={0}&n={1}"</a>;) 获取的数据：</p>
<pre><code>{
// 这是通过必应壁纸API返回的数据
&quot;images&quot;:[
{
&quot;startdate&quot;:&quot;20210220&quot;,
&quot;fullstartdate&quot;:&quot;202102201600&quot;,
&quot;enddate&quot;:&quot;20210221&quot;,
&quot;url&quot;:&quot;/th?id=OHR.Porto_ZH-CN9117852684_1920x1080.jpg&amp;rf=LaDigue_1920x1080.jpg&amp;pid=hp&quot;,
&quot;urlbase&quot;:&quot;/th?id=OHR.Porto_ZH-CN9117852684&quot;,
&quot;copyright&quot;:&quot;波尔图，葡萄牙 (© Kanuman/Shutterstock)&quot;
}
]
}</code></pre>
<p>可以看到，所有图片数据都存放在images这个数组结点下，所以在path之下添加内容，以使解析器能解析至images结点。</p>
<pre><code> &quot;path&quot;:[
{
&quot;node&quot;:&quot;images&quot;
}
],</code></pre>
<p>表示，对于API返回的数据，我们要解析返回的数据中根节点之下的images结点。</p>
<p><br>
<code>model</code>内包含<code>uri</code>,<code>thumb</code>,<code>title</code>,<code>details</code>,<code>date</code>,<code>dateformat</code>,<code>copyright</code>,<code>size</code>这些结点。
以<code>uri</code>为例：</p>
<pre><code> &quot;uri&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;node&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;node&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],</code></pre>
<p>其中，</p>
<pre><code> {
&quot;node&quot;:&quot;urlbase&quot;
},</code></pre>
<p>用于表示，之前从接口获取的数据中，urlbase结点的内容将用作图片的<code>uri</code>（大图链接）</p>
<p><br/>
而</p>
<pre><code> {
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}</code></pre>
<p>表明，图片的<code>uri</code>（大图链接）实际上应该等于urlbase结点的内容在左边加上" <a href="https://www.bing.com">https://www.bing.com</a> "这个字符串，并在右边加上"_1920x1080.jpg"这个字符串。
<code>uri</code>也可以写成<code>large</code></p>
<p><code>display</code>和<code>thumb</code>与<code>uri</code>的规则写法相同，此处不再赘述。不过<code>display</code>表示的是图片的中等大小图片链接，你也可以把<code>display</code>写成<code>middle</code>；而<code>thumb</code>表示的是图片的小图（缩略图）链接，你也可以把<code>thumb</code>写成<code>small</code>。
也就是说<code>uri</code>、<code>display</code>、<code>thumb</code>与<code>large</code>、<code>middle</code>、<code>small</code>都可以分别用来表示一张图片的大图、中图、小图（缩略图）链接。
<br/></p>
<p>再以<code>title</code>为例，</p>
<pre><code> &quot;title&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
},
{
&quot;value&quot;:&quot;，&amp;0&quot;,
&quot;type&quot;:&quot;split&quot;
}
],</code></pre>
<p>以上代码表示，之前从接口获取的数据中，copyright结点将用作图片的<code>title</code>（标题），但是因为<code>&quot;type&quot;:&quot;split&quot;</code>，所以要对copyright结点的内容进行拆分，因为<code>&quot;value&quot;:&quot;，&amp;0&quot;</code>，所以以逗号（，）为间隔来拆分copyright结点的内容，并截取拆分之后的第0段字符串（这里以0而非1作为计数的开始）。</p>
<p>另外以<code>copyright</code>为例，</p>
<pre><code> &quot;copyright&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
}
],</code></pre>
<p>以上代码表示，之前从接口获取的数据中，copyright结点将用作图片的<code>copyright</code></p>
<p>在本例中，</p>
<pre><code> &quot;date&quot;:[
{
&quot;node&quot;:&quot;enddate&quot;
}
],
&quot;dateformat&quot;:&quot;yyyyMMdd&quot;,</code></pre>
<p>会使解析器将从接口获取的数据中的enddate结点作为图片的日期，并通过‘yyyyMMdd’的格式转换为日期格式。</p>
<p>有的图片源接口提供的数据中，日期格式为时间戳格式，这种情况下，可以参照这种写法：</p>
<pre><code> &quot;date&quot;:[
{
&quot;node&quot;:&quot;updated_at&quot;,
&quot;type&quot;:&quot;number&quot;
}
],
&quot;dateformat&quot;:&quot;timestamp&quot;</code></pre>
<p>当<code>dateformat</code>填写为‘Unix timestamp’或者‘timestamp’时，本应用会按照时间戳的格式来转换日期。</p>
<p><br/>
<br/></p>
<h3>示例3 图片源的有限度加载：</h3>
<p>你可能会注意到，一般而言，查看本应用中图片源时，鼠标滚轮不断往下拉，应用则会源源不断地加载该图片源的图片。但是有些时候，我们并不想让图片源无限加载新图片出来，比如，我们通过例2中的 <a href="https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1">https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1</a> 这条api，最多只能获取近期有限天数内的图片。一直让它加载图片是没有意义的，而且对于很多api，不断地发送请求也可能会导致滥用api，是我们应该避免的情况。</p>
<p>在para结点内，可以填入特定参数，在有限范围内加载图片源。以下为可用的参数：
①<code>limit</code>参数用于指定图片源最多可加载多少页。加载图片源时，如果页数达到limit的数值，该图片源会停止加载新图片。
②<code>start</code>,<code>stride</code>在例2中介绍过，分别代表一个api链接内部参数（整数）的起始值和步距，除此之外，还可以通过<code>end</code>参数指定它的最终值。加载图片源时，如果api链接内部参数达到了<code>end</code>的数值，该图片源会停止加载新图片。
③上面介绍的<code>start</code>,<code>stride</code>,<code>end</code>都是用整数限制图片源的加载范围，如果想通过日期限定图片源的加载范围，要用到<code>startdate</code>,<code>dateformat</code>,<code>stride</code>,<code>startstride</code>,<code>end</code>。<code>dateformat</code>用于说明日期的格式；<code>startdate</code>是开始日期，可以填写一个固定的日期值，也可以填写为'today'或't'（填写为'today'或't'后，加载图片源时会自动转换为当前日期）；<code>startstride</code>是一个整数，代表真正的初始日期相对于<code>startdate</code>的偏移量；<code>stride</code>是整数，代表图片源每加载新的一页时，日期会增加或减少多少天；<code>end</code>是结束日期（可以不指定），如果指定了<code>end</code>，那么在加载图片源时，如果api链接内部参数达到了end的日期，该图片源会停止加载新图片。</p>
<p>我们来应用一下上面的参数：</p>
<pre><code>{
&quot;mode&quot;:&quot;2&quot;,
&quot;api&quot;:&quot;https://cn.bing.com/HPImageArchive.aspx?format=js&amp;idx={0}&amp;n={1}&quot;,
&quot;para&quot;:[
{
&quot;start&quot;:0,
&quot;stride&quot;:4,
&quot;end&quot;:8
},
{
&quot;start&quot;:4,
&quot;stride&quot;:0
}
],
&quot;path&quot;:[
{
&quot;node&quot;:&quot;images&quot;
}
],
&quot;model&quot;:{
&quot;uri&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;display&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;thumb&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_800x480.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;title&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
},
{
&quot;value&quot;:&quot;，&amp;0&quot;,
&quot;type&quot;:&quot;split&quot;
}
],
&quot;details&quot;:[
{
&quot;default&quot;:&quot;&quot;
}
],
&quot;date&quot;:[
{
&quot;node&quot;:&quot;enddate&quot;
}
],
&quot;dateformat&quot;:&quot;yyyyMMdd&quot;,
&quot;copyright&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
}
],
&quot;size&quot;:[
{
&quot;default&quot;:&quot;1920x1080&quot;
}
]
}
}</code></pre>
<p>与例2相比，我们加入了 <code>&quot;end&quot;:8</code>这个参数。最终在应用中添加这个图片源后，可以看到加载了2次，每次加载了4张图片，共加载8张图片后不再加载新图片了。</p>
<p><br/>
<br/></p>
<h3>示例4 参数的缺省：</h3>
<p><code>mode</code>为0时，<code>model</code>结点下的任何参数都可以缺省。
<br>
<br></p>
<p><code>mode</code>为2时，<code>model</code>结点下的一些参数可以缺省。
如果<code>model</code>结点下不包含<code>title</code>，那么<code>title</code>默认指定为“（无标题）”；
如果<code>model</code>结点下不包含<code>details</code>,<code>size</code>或<code>copyright</code>，那么这些参数默认为空；
如果<code>model</code>结点下不包含<code>thumb</code>、<code>display</code>或者<code>small</code>、<code>middle</code>，那么它们的值会被指定为<code>uri</code>或<code>large</code>的值（所以<code>uri</code>或<code>large</code>的值是必须指定的）。
其他参数则不可缺省。
<br/>
<br/></p>
<h1>继续封装图片源配置</h1>
<p>按照以下格式继续封装，可以将图片源所有配置封装为json格式。
其中，<code>name</code>对应着图片源名称,<code>details</code>对应着图片源简介,<code>icon</code>对应着图片源图标链接，<code>rule</code>对应着解析规则。</p>
<pre><code>{
&quot;name&quot;:&quot;&quot;,
&quot;details&quot;:&quot;&quot;,
&quot;icon&quot;:&quot;&quot;,
&quot;rule&quot;:{}
}</code></pre>
<p>比如，将以下内容复制粘贴到每日壁纸UWP中的菜单栏 - 图片源 - 添加自定义图片源 - “导入json”的文本框内，即可添加"必应壁纸（示例）"这个图片源。</p>
<pre><code>{
&quot;name&quot;:&quot;必应壁纸（示例）&quot;,
&quot;details&quot;:&quot;&quot;,
&quot;icon&quot;:&quot;&quot;,
&quot;rule&quot;:{
&quot;mode&quot;:&quot;2&quot;,
&quot;api&quot;:&quot;https://cn.bing.com/HPImageArchive.aspx?format=js&amp;idx={0}&amp;n={1}&quot;,
&quot;para&quot;:[
{
&quot;start&quot;:0,
&quot;stride&quot;:4,
&quot;end&quot;:8
},
{
&quot;start&quot;:4,
&quot;stride&quot;:0
}
],
&quot;path&quot;:[
{
&quot;node&quot;:&quot;images&quot;
}
],
&quot;model&quot;:{
&quot;uri&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;display&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_1920x1080.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;thumb&quot;:[
{
&quot;node&quot;:&quot;urlbase&quot;
},
{
&quot;value&quot;:&quot;https://www.bing.com&quot;,
&quot;type&quot;:&quot;left&quot;
},
{
&quot;value&quot;:&quot;_800x480.jpg&quot;,
&quot;type&quot;:&quot;right&quot;
}
],
&quot;title&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
},
{
&quot;value&quot;:&quot;，&amp;0&quot;,
&quot;type&quot;:&quot;split&quot;
}
],
&quot;details&quot;:[
{
&quot;default&quot;:&quot;&quot;
}
],
&quot;date&quot;:[
{
&quot;node&quot;:&quot;enddate&quot;
}
],
&quot;dateformat&quot;:&quot;yyyyMMdd&quot;,
&quot;copyright&quot;:[
{
&quot;node&quot;:&quot;copyright&quot;
}
],
&quot;size&quot;:[
{
&quot;default&quot;:&quot;1920x1080&quot;
}
]
}
}
}</code></pre>
<p><br/>
<br/></p>
<h1>添加图片源后，怎么删除或修改图片源配置？</h1>
<p>如图，在目标的图片源上点击鼠标右键，可打开扩展菜单。</p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=186683bb78b86b3659e4416972690674&amp;file=file.png" alt="删除或修改图片源" />
![修改图片源的配置](<a href="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8857c227c69ee063ad557fde599e3d6c&file=file.png">https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8857c227c69ee063ad557fde599e3d6c&file=file.png</a> "修改图片源的配置")</p>
<p><br/>
<br/></p>
<h1>一些例子</h1>
<p><a href="https://www.showdoc.com.cn/DailyPicsUWP/10211907826143009">点击这里可以查看例子</a></p>