不得不说我的个人页面最近进步神速，虽然添加相关功能其实工作量简直是十分不大，但是加上了点赞评论之后的页面的确是看起来“功能点非常的多”，也显得我对网站十分的上心。

之前计划的是按照这个页面做一个我自己的 About Me之类的页面，用于……自吹自擂，但是很明显，Hexo的页面用markdown或者别的什么玩意根本没法做很复杂的排版功能，我又不想写PHP就为了一个Wordpress，虽然是世界上最好的语言。

于是当务之急是在markdown的基础上打几个布丁，看看能不能搞一下这个事情。

resize img

md页面默认的图片是{width:100%}的这么个配置，插入图片就像这样

1
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg)

我原本以为这个markdown的渲染框架会开些接口啦之类让人可以介入编译过程，啊事实证明我想多了，我查到了这个讲实话，很不美，但是实用。然后我本想不要那么咸鱼，还是看看markdown的插件这么搞一下吧，然后我发现我用的theme是用pug做的。

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

我对这个模版统治的世界深感绝望。于是采用了咸鱼的方案。
现在插入图片我加了糖：

1
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg?size=25x25)

因为这个功能就是为了把图片能嵌入文字里，我就让它inline-block了。

但是效果貌似是仍需改进。

但是吧，我又不想最后把图片后面的参数修饰搞的好像魔法一样。容我再考虑吧。

img group

另外一项急需的功能大概就是罗列图片，就像这样

大概是说自己会得很多的意思吧。不过我才发现里面还有macOS html5我是不是应该吐槽一下……好吧我姑且认为这个B会开发mac应用……草还有trello，这个过分了。

Anyway，需要罗列。正好markdown有个好feat是一次换行插入的<br>,空一行就是一个<p></p>,所以我只要做横向的分组排版就好了，大概是像这样。

1
2
3
4
5
6
7
//空行
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg?grp=1)
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg?grp=1)
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg?grp=1)
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg?grp=1)
![](/pic/ebd0b6757c3787e555aafcbc64394e.jpg?grp=1)
//空行








这就大致的能用简单的JS补丁完成一些定制的样式而不用在写markdown的时候还要自己手撸html了，虽然我觉得最后我还是不可避免的要手写一些html。

最后付代码实现（jquery是自带了的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const size_exp = /\?size=(\d+)x(\d+)/
const grp_exp = /\?grp=(\d+)/

$(document).ready(function () {
    const all_content_imgs = $("#layout").find(".post-content").find("img")
    if (all_content_imgs.length > 0) {
        for (let i = 0; i < all_content_imgs.length; i++) {
            const thizImg = all_content_imgs[i];
            const imgSrc = $(thizImg).attr("src")
            const size_exec = size_exp.exec(imgSrc)
            if (size_exec) {
                const h = size_exec[1], w = size_exec[2]
                $(thizImg).css({
                    width: h + "px",
                    height: w + "px",
                    padding: 0
                })
                $(thizImg).parent().css({
                    display: "inline-block",
                    padding: 0
                })
            }
            const grp_exec = grp_exp.exec(imgSrc)
            if (grp_exec) {
                const parentP = $(thizImg).parents("p")
                parentP.css({
                    display: 'flex',
                    gap: '.6em'
                })
            }

        }
    }
});