在处理图片时，有时候可能需要给批量图片处理成同一效果，例如给台历上的预留处换上不同的照片。这一过程可以通过建立一个模版文件来作为基础，使用时只需要加入不同图片进行微调即可。

首先建立略大于相框部分的选区，建立 50% 灰的图层，转换为智能图层 smart object：

将相框部分选出来，可以使用钢笔工具精确选择，然后给50%灰图层建立蒙版，混合模式设置为 multiply：

这样基本混合到背景了，为了更好的处理高光阴影部分，将背景图层新建2个，ctrl shift U 去掉饱和度，放到最上方，分别处理高光和阴影。

首先将一个图层混合模式设置为 multiply，蒙版使用 50% 灰的蒙版，画框阴影部分更加明显，可以使用曲线图层加强阴影部分，注意曲线图层设置为只影响下面的阴影图层：

类似的方法，将另一个图层混合模式设置为 screen，画框亮部更加明亮，可以新建曲线图层调节亮度到合适：

可以将亮部暗部的处理图层建立组，给组一个画框的蒙版就行了。

将这个项目文件保存为 .psdt 文件，这样就建立了一个模版：

下次打开这个文件，会直接以复制的方式打开一个新文件而不会影响愿模版文件，想要更换新图片到模版，打开模版后双击 50% 灰的 smart objet，将图片拖入图层：

确认后，可以查看效果，根据情况可以把阴影高光图层进行不透明度或曲线的微调：

用到的命令：
find mtime crontab

基本思路是使用 find 命令筛选符合条件的文件或文件夹，使用 crontab 创建定时任务。

find 的详细用法：https://niekun.net/index.php/archives/543.html
crontab 的详细用法：https://niekun.net/index.php/archives/461.html

指定删除 /temp 目录下超过 3 天的文件，新建脚本 timerRemove.sh 内容如下：

LOCALDIR="/temp/"
LOCALAGE="3"
cd ${LOCALDIR} || exit

find ${LOCALDIR}* -mtime +${LOCALAGE} -exec rm -rf {} \;

在 crontab 配置文件内修改如下，每 2 小时执行一次脚本：

SHELL=/bin/bash
PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
HOME=/root

0  */2  *  *  * root bash /path/to/timerRemove.sh

在修图中，经常需要将主体图片换一个背景，在提取主体后，会发现主体边沿部分会有一部分和原背景颜色过度部分，在和新背景融合后不协调。

此处介绍两种处理方法。第一种方法适合替换背景和原背景差别较大情况，第二种方法适合替换背景和原背景属于同一色系的情况。

处理的主体是树，换上不同的天空背景。

blend mode 方法

首先使用 color range 工具选出背景，此图背景蓝色部分上下两部分区别较大，可以通过两次选择提取出来，点击 select - color range：

先将 preview 设置为 none，fuzziness 设为最小，开始拾取背景，使用加号工具增加区域:

点击 invert 反选选取，preview 设置为 black，调节 fuzziness 使选取更加自然，注意保留树枝细节不要丢失：

点击图层蒙版，可以看到图像下部的背景还需要去除，按住 shift 点击图层蒙版暂时屏蔽蒙版，再次使用 select color 选出多余部分图像，这时候取消 invert 选项：

按住 shift 键点击激活蒙版，使用笔刷工具将选出部分涂黑：

开始处理蒙版细节，新建黑色 solid color 图层，放大图片可以看到，树的周围有灰色的色块，使用画笔工具，混合模式改为 overlay 使用黑色画笔涂抹需要处理的地方：

这样就将主体提取出来了，下面开始添加背景。

放上背景图片，可以看到数的边沿明显有亮环，将树的混合模式改为 multiply：

效果好了很多，但树的阴影在右边，但背景的光源在右边，所以先转换背景左右，使光源和阴影匹配：

观察树干上显现的的背景图像，需要进行处理，可以将树干上的背景进行模糊处理，复制背景图层，按住 CTRL 点击树的蒙版提取选区，点击背景图层新建蒙版，点击蒙版和图层中间的链接符，这样对图层进行修改不会移动蒙版了，将图层进行高斯模糊：

树干上的背景已经很柔和了。

树的亮度相比较背景还是有些亮，复制树干图层，适当降低不透明度：

增加树干细节，再次复制树干图层，混合模式改为 color dodge，降低 fill 查看效果：

match color 方法

和上面同样的方法选出树干主体图像，添加入背景图片，可以看到背景也是蓝色天空，但树的周围还是有明显亮环：

此方法通过调节背景的颜色来匹配原始背景的颜色来消除亮环。

首先关闭树的蒙版，选出原始背景的一块复制到新图层备用：

新建曲线图层，放到新背景图层上方，锁定为只影响背景图层，开始使用手形工具调节亮度和rgb曲线使背景图层颜色和原背景尽量接近：

不需要调节得很精确，你会发现边缘的亮条没有了：

原始图像背景下部有白色的过度，可以新建 gradient 图层进行匹配，颜色为左边白色不透明度100%，右侧不透明度0%，拖动图层位置调节到合适：

此主题是我在 typecho 原版默认主题基础上做了移动端的优化处理，适合喜欢简洁风格的人使用。

typecho 是一款轻量的博客系统，风格很简洁，相比较 wordpress 占用资源很少，所以我选择了 typecho。

官网：http://typecho.org/
GitHub 主页：https://github.com/typecho/typecho

关于 typecho 的安装参考我的教程：https://niekun.net/index.php/archives/6.html

下载主题

此主题是基于 typecho 最新 GitHub master 分支制作的，不保证向下兼容，请升级到最新源码后在使用此主题，升级教程参考：https://niekun.net/index.php/archives/21.html

GitHub 主页：https://github.com/nie11kun/TypechoAwesome
release 页面：https://github.com/nie11kun/TypechoAwesome/releases

首先从 release 页面下载最新版本的源码到 typecho themes 目录：

wget -O /tmp/TypechoAwesome.tar.gz https://github.com/nie11kun/TypechoAwesome/archive/V1.0.1.tar.gz
tar -zxvf /tmp/TypechoAwesome.tar.gz -C /path/to/typecho/usr/themes/

进网站后台，选择 控制台 - 外观：

找到 TypechoAwesome 点击启用：

然后就可以返回网站查看效果了。

桌面端访问效果：

移动端访问效果：

移动端导航栏内容：

此方式适用于背景颜色单一的情况，或者配合选区工具使用在背景稍微复杂的情况，或者使用背景擦除工具。

背景擦除工具使用教程参考：https://niekun.net/index.php/archives/719.html

打开图片，选择 select - color range，内部选项中：select 选择 sample color，selection preview 为 none 这样可以清楚看到所选区域，localized color cluster不要选中：

先将 fuzziness 将为 0，选取图片中的背景颜色，使用带加号的拾取工具将整个背景拾取出来。

点击 invert，selection preview 选择 white，可以看到提取的主体；

放大图片，调整 fuzziness 使头发边沿提取出来，确认后，点击图层蒙版：

可以看到主题已经提取出来了，但中间有些地方需要恢复，按住 alt 键点击蒙版，开始修复蒙版：

使用画笔工具开始将需要恢复的地方用白色画笔涂抹，这里说一个技巧，画笔的混合模式设置为 overlay 可以保护黑色地方不被影响，不确定黑白的地方按住 alt 键点击蒙版恢复图像查看原始细节：

完成后效果：

可以注意到头发边沿有之前背景的红色，可以通过新建颜色图层来去除：
新建空白图层，混合模式改为 color，按住 alt 键将图层锁定只影响到下方图层：

使用拾色工具(快捷键 I)拾取正常颜色的头发，设置为 3×3，current and below 模式：

使用画笔工具涂抹需要恢复颜色的头发，注意不同地方的头发要再次进行拾取颜色操作，同样的方法处理衣服和皮肤边沿：

对于一些新背景颜色和之前背景反差过大的时候，可以进行以下操作将选取柔化处理，更加自然：
选中双击蒙版，选择 select and mask：

view 选择第一个：

output setting 里选中 decontaminate，可以发现主题和背景过度更加自然了：

以上就是使用 color range 提取图像的过程。

这里提供一个头发笔刷，在提取不完善或者提起困难的情况下，使用头发笔刷来手动画出边沿头发细节来：
PiXimperfect Hair Brushes.zip

导入笔刷：

选择笔刷工具，上方菜单栏选择 import brushes：

常用符号转义

更多符号

w3 教程：https://www.w3schools.com/HTML/html_entities.asp
希腊字符：https://www.w3schools.com/charsets/ref_utf_greek.asp
货币字符：https://www.w3schools.com/charsets/ref_utf_currency.asp
箭头符号：https://www.w3schools.com/charsets/ref_utf_arrows.asp
数学符号：https://www.w3schools.com/charsets/ref_utf_math.asp
更多杂类：https://www.w3schools.com/charsets/ref_utf_symbols.asp

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
  <h2>My name is Donald</h2>
  <p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

<p>I will not be styled.</p>

</body>
</html>

方法一：
在多数浏览器中，可以使用 CTRL + F5 快捷键强制刷新。一般能看到最新的结果。

方法二：
如果你使用 Google chrome 浏览器，则可以使用 debugger 禁止缓存: 右键 - inspect - Network - Disable cache

方法三：
在源码的 link/script 中修改如下：

<link rel="stylesheet" href="my-css-file.css?v=1">
<script src="my-js-file.js?v=1"></script>

主要是在文件后加上 ?v=1 类似的字符串。当然也可换成其他写法，如：?time=2019126 等。

下次更新文件时，将后缀修改成其他数字即可。这样的好处是你的用户们也可以同时收到最新更新。

参考链接：
https://stackoverflow.com/questions/3951187/javascript-file-not-updating-no-matter-what-i-do
https://stackoverflow.com/questions/3466989/what-does-appending-v-1-to-css-and-javascript-urls-in-link-and-script-tags-do

官网：https://lokeshdhakar.com/projects/lightbox2/
GitHub 项目地址：https://github.com/lokesh/lightbox2
release 下载：https://github.com/lokesh/lightbox2/releases

下载

在发布页下载最新版本到本地或服务器：

wget https://github.com/lokesh/lightbox2/archive/v2.11.1.tar.gz
tar -zxvf v2.11.1.tar.gz

css/js 文件在解压包的 dist 目录下。

引用

在 html 的 <head> 标签栏内引用 css 文件：

<link href="path/to/lightbox.css" rel="stylesheet" />

在 html 结束前的 </body> 标签前引用 js 文件：

<script src="path/to/lightbox.js"></script>

lightbox2 的 js 需要 jQuery 1.7，所以确保 jQuery 在 lightbox 的 js 文件之前引用。

如果你没有安装 jQuery，可以使用预先包含了 lightbox 和 jQuery 的 js 文件 代替上面的 lightbox.js：

<script src="dist/js/lightbox-plus-jquery.js"></script>

使用

在图片链接内增加属性 data-lightbox 来激活 lightbox。

单图片显示

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

选项:
增加 data-title 属性，如果你想增加一个title.
增加 data-alt 属性，如果你想附加一个图片的属性.

多图片库

如果你有多张图片想要通过左右箭头切换显示，可以设置如下：

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

属性设置

如果想要修改默认的显示设置，可以引用 option method，例如：

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

所有可设置的参数，可查看官网：https://lokeshdhakar.com/projects/lightbox2/

font awesome 是流行的 icon 图标库。最新版为 version 5

font awesome 分为付费版和免费版，付费版有 7020 个 icon，免费版有 1535 个 icon。
免费：brands.js solid.js
付费：regular.js light.js

官网：https://fontawesome.com/
GitHub 项目地址：https://github.com/FortAwesome/Font-Awesome
release 地址：https://github.com/FortAwesome/Font-Awesome/releases
w3 教程：https://www.w3schools.com/icons/fontawesome5_intro.asp

下载

在 GitHub 发布页下载最新版：

wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.12.0/fontawesome-free-5.12.0-web.zip
unzip fontawesome-free-5.12.0-web.zip

引用

在 html 的 <head> 标签内引用 免费的 js 文件：

  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

或者加载 all.min.js 文件，内含所有基本的功能：

<script defer src="/your-path-to-fontawesome/js/all.min.js"></script>

使用

icon 图标常使用 <i> 或 <span> 标签来定义。

修改图标大小

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

也可以通过父级相对大小进一步调整大小属性：

<div style="font-size: 0.5rem;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

图标宽度匹配

使用 class 类 fa-fw 使图标大小相匹配。

<div style="font-size: 2rem;">
  <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

修改图标颜色

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-camera"></i>
  </span>
</span>

动态图标

通过增加 class 属性 fa-spin 可使图标旋转起来，使用 fa-pulse 属性可使图标分 8 steps 进行旋转。

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

其他使用方法及功能参考教程的右边边栏项：https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

图标检索

使用一下网站进行图标搜索：

cheatsheet 官网：https://fontawesome.com/cheatsheet
搜索图标：https://fontawesome.com/icons/search