增加一个画册功能

发表于
“虽然我还没想好要放什么上去。”

0. 实现效果和教程

模板1

效果:

教程：Hexo-NexT 实现相册
我的移植记录：总结 / 试图阅读相册的代码（模板一）

模板2

效果：不知道，我失败了，会报错
教程：Hexo 相册实践

模板3

效果：

教程：Hexo Next 博客添加相册瀑布流

模板4

效果：

教程：为 Hexo NexT 主题添加相册功能

1.模板4的移植记录(python处理图片部分)

报错1：source directory not exist!

1
2
3
4
5
source directory not exist!
Traceback (most recent call last):
  File "<stdin>", line 3, in <module>
  File "<stdin>", line 16, in compress_photo
UnboundLocalError: local variable 'file_list_des' referenced before assignment

解决方法：把路径改成绝对路径 

1
2
3
4
5
6
def cut_photo():
    """裁剪算法
    调用Graphics类中的裁剪算法，将src_dir目录下的文件进行裁剪（裁剪成正方形）
    """
    src_dir = "F:/1-blog/MyWeb/source/photos/photos/"
    if directory_exists(src_dir):

报错2：not enough values to unpack (expected 2, got 1)

1
2
3
4
5
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "<stdin>", line 12, in cut_photo
  File "<stdin>", line 9, in list_img_file
ValueError: not enough values to unpack (expected 2, got 1)

解决方法：上面路径的文件夹里不能有子文件夹，因为子文件夹没有.xx的后缀，用split()函数分类（分隔符为.）会卡住。最好只放图片。

报错3：failed to push some refs to github

1
2
error: src refspec master does not match any
error: failed to push some refs to 'https://github.com/alnas1/photos'

解决方法：

  1. 关于main和master的问题
  2. 克隆仓库的命令：git clone https://github.com/alnas1/photos.git
    如果是ssh拉取：git clone git@github.com:Alnas1/photos.git
  3. 把source下的photos文件夹删掉，在source文件夹中右键打开命令行，执行克隆仓库的命令。
  4. 进入克隆下来的仓库，随便放张图进去测试。
  5. 执行下面三条命令看能不能成功。
    1
    2
    3
    git add --all  
    git commit -m "add photos"  
    git push origin main
  6. 成功了就能在GitHub仓库看到变更。
  7. 把tool.py文件里的 os.system('git push origin master')改为 os.system('git push origin main')
  8. 再次运行文件tool.py
  9. 然后我发现不能把相册文件夹放在博客目录下，不然相册提交会提交一次图，博客部署又会提交一次图。

2.样式4的移植记录(hexo配置部分)

  1. data.json保存在photos下。”F:\1-blog\MyWeb\source\photos\data.json”
  2. 注意核对index.md中链接css等文件的路径。我放在”F:\1-blog\MyWeb\themes\next\source\ _data"
  3. 完全跟着教程建立文件夹即可，不要自找麻烦。
  4. ins.js文件中链接的修改。这是正确的图片链接格式（注意main前面那个raw）：https://github.com/Alnas1/photos/raw/main/photos/2021-12-15_suibian%20(2).jpg
    关于这点请看：本地图片上传到GitHub，MarkDown使用Github图片地址
  5. 图片链接格式可以参照图床链接，即https://cdn.jsdelivr.net/gh/Alnas1/MyBlog_Images/min_photos/，这样亲测比上面那个快。

    3.尝试对相册页面进行一些修改

    照片排版有问题，调整排版

    新建文件my.css，置于"F:\1-blog\MyWeb\themes\next\source\lib\album\my.css"
    内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    img.reward-img {
        width: 200px;
        height:200px;
        display: -webkit-flex; /* Safari */
        -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
        display: flex;
        flex-flow: row-reverse wrap;
    }

    ul.img-box-ul {
        display: -webkit-flex; /* Safari */
        -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
        display: flex;
        flex-flow: row-reverse wrap;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        align-content: center;
        flex-wrap: wrap;
    }
    并在photos/index.md文件中添加引用：
    <link rel="stylesheet" href="../lib/album/my.css">