LOG[2021-08-31]

Posted on
LOG[2021-08-31]@v0 by GHOST, 1630356823457

阴间时间发文

不愧是我

大概折腾了下友链和字体

明早给一下实现

LOG[2021-08-31]@v1 by GHOST, 1630389680749

友链是手写html实现的

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div id = "links">
    <style>
        .links-content
        {
            margin-top: 1rem;
        }
        .link-navigation::after
        {
            content: " ";
            display: block;
            clear: both;
        }
        .card
        {
            width: 300px;
            font-size: 1rem;
            padding: 10px 20px;
            border-radius: 4px;
            transition-duration: 0.15s;
            margin-bottom: 1rem;
            display: flex;
        }
        .card:nth-child(odd)
        {
            float: left;
        }
        .card:nth-child(even)
        {
            float: right;
        }
        .card:hover
        {
            transform: scale(1.1);
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
        }
        .card a
        {
            border: none;
        }
        .card .ava
        {
            width: 3rem !important;
            height: 3rem !important;
            margin:0 !important;
            margin-right: 1em !important;
            border-radius:4px;
        }
        .card .card-header
        {
            font-style: italic;
            overflow: hidden;
            width: 236px;
        }
        .card .card-header a
        {
            font-style: normal;
            color: #2bbc8a;
            font-weight: bold;
            text-decoration: none;
        }
        .card .card-header a:hover
        {
            color: #d480aa;
            text-decoration: none;
        }
        .card .card-header .info
        {
            font-style: normal;
            color: #a3a3a3;
            font-size: 14px;
            min-width: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    <div class = "links-content">
        <div class = "link-navigation">
            <div class = "card">
                <img class = "ava" src = "https://the-nameless-spectre.github.io/file/avatar.png"/>
                    <div class = "card-header">
                        <div>
                            <a href = "https://the-nameless-spectre.github.io" target = "_blank">
                                THE-NAMELESS-SPECTRE
                            </a>
                        </div>
                    <div class = "info">
                        #GHOST
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

具体效果如下

接下来讲一下字体本地化

NexT的字体默认是要get一个https://fonts.googleapis.com/css?family=fontname的css文件以及后续https://fonts.gstatic.com/l/font?kit=的字体

然而由于众所周知的原因, 这玩意在国内稳定性并不咋的

那么就有两种解决方案

一种是挂proxy, 就像next-config.gitalk.proxy里的那样, 但这样做字体文件还是要走Google

一种就是把字体存到仓库, 然后改css(styles.styl)

讲一下第二种

首先, 确保next-config.font.enable('false')

然后按照自定义页面的方式, 往styles.styl里放下面这段(部分内容需要自行修改)

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
@font-face
{
    font-family: '';
    src: url('') format('woff2'), url('') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: '';
    src: url('') format('woff2'), url('') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: '';
    src: url('') format('woff2'), url('') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face
{
    font-family: '';
    src: url('') format('woff2'), url('') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}