给HUGO博客引入pangu.js

之前经常纠结中英文混排时的排版问题，因此引入了pangu.js来优化排版效果。

官方仓库：vinta/pangu.js: Paranoid text spacing in JavaScript

调用pangu.autoSpacingPage()即可将页面转换为美化之后的结果。

由于JS的加载与处理需要时间，直接这么写的话，体验上是用户会先看到处理前的页面，然后短暂停留后刷新为新内容，这就导致体验上很奇怪。

解决思路的话，可以考虑先隐藏页面，等DOM加载完，先进行pangu.js的处理，完毕后再重新显示页面。

为了避免第一次加载较久，还可以加一个Loading效果。

需要注意autoSpacingPage函数会异步处理，可以改为阻塞版本的spacingPage。

参考代码

 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71


<div id="loadingOverlay">  
    <div class="loader"></div>  
    <p>加载中...</p>  
</div>
<style>  
    #loadingOverlay {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background: rgba(255, 255, 255, 0.9);  
        z-index: 9999;  
        display: none;  
        justify-content: center;  
        align-items: center;  
        flex-direction: column;  
    }  
  
    .loader {  
        border: 8px solid #f3f3f3;  
        border-top: 8px solid #3498db;  
        border-radius: 50%;  
        width: 60px;  
        height: 60px;  
        animation: spin 1s linear infinite;  
    }  
  
    @keyframes spin {  
        0% {  
            transform: rotate(0deg);  
        }  
        100% {  
            transform: rotate(360deg);  
        }  
    }  
</style>

<style>  
    /* 初始隐藏页面内容，避免显示未经处理的文本 */    .main-container {  
        display: none;  
    }  
</style>  
  
<script>  
    let isShouldLoad = true;  
    setTimeout(() => {  
        if (isShouldLoad) {  
            const loadingOverlay = document.getElementById('loadingOverlay');  
            if (loadingOverlay) {  
                loadingOverlay.style.display = 'flex';  
            }  
        }  
    }, 200); // 0.2秒如果还没有加载完成就开启Loading  
</script>  
  
<script type="module">  
    import pangu from 'https://jspm.dev/pangu';  
    document.addEventListener('DOMContentLoaded', () => {  
        isShouldLoad = false  
        pangu.spacingPage();  
        const elements = document.getElementsByClassName("main-container")  
        for (let i = 0; i < elements.length; i++) {  
            elements[i].style.display = 'flex';  
        }  
        const loadingOverlay = document.getElementById('loadingOverlay');  
        if (loadingOverlay) {  
            loadingOverlay.style.display = 'none';  
        }  
    });  
</script>