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

cat assets/css/extended/blank.css
/*
This is just a placeholder blank stylesheet so as to support adding custom styles budled with theme's default styles

Read https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#bundling-custom-css-with-themes-assets for more info
*/

/* 当用户点击文章内容中的图片时，图片会被放大 */
.post-content img[loading="lazy"]:active {
    transform: scale(1.382);
}

/* 使文章中的图片在页面上显示时都具有相同的宽度 */
.post-content img[loading="lazy"] {
    width: 100%;
    height: auto;
}

:root {
    --nav-width: 1380px;
    --article-width: 650px;
    --toc-width: 300px;
}

.toc {
    margin: 0 2px 40px 2px;
    border: 1px solid var(--border);
    background: var(--entry);
    border-radius: var(--radius);
    padding: 0.4em;
}

.toc-container.wide {
    position: absolute;
    height: 100%;
    border-right: 1px solid var(--border);
    left: calc((var(--toc-width) + var(--gap)) * -1);
    top: calc(var(--gap) * 2);
    width: var(--toc-width);
}

.wide .toc {
    position: sticky;
    top: var(--gap);
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
}

.toc details summary {
    cursor: zoom-in;
    margin-inline-start: 20px;
    padding: 12px 0;
}

.toc details[open] summary {
    font-weight: 500;
}

.toc-container.wide .toc .inner {
    margin: 0;
}

.active {
    font-size: 110%;
    font-weight: 600;
}

.toc ul {
    list-style-type: circle;
}

.toc .inner {
    margin: 0 0 0 20px;
    padding: 0px 15px 15px 20px;
    font-size: 16px;
}

.toc li ul {
    margin-inline-start: calc(var(--gap) * 0.5);
    list-style-type: none;
}

.toc li {
    list-style: none;
    font-size: 0.95rem;
    padding-bottom: 5px;
}

.toc li a:hover {
    color: var(--secondary);
}

1
2
3
4
5
6
7

{{/* layouts/partials/extend_head.html */}}

{{/* lightgallery.js CSS for the lightbox effect */}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" integrity="sha512-F2E+YYE1gkt0T5TVajAslgDfTEUQKtlu4ralVqic8NnrdGXXD/TT6jcCDudR5bSXURXCiPaHQK5KrVR2weEQDRQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

{{/* Optional: Add basic transitions for thumbnails */}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-thumbnail.min.css" integrity="sha512-GRxDpj/bx6/I4U6h4YI3K_trpckvADXqOUL4jGaNQvrngLVjKOSaYwZIQKPApfL+vKiTwrrKptKjqHwMR3NA1g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 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

{{/* layouts/partials/extend_footer.html */}}

{{/* lightgallery.js Core library */}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js" integrity="sha512-jEJ0OA9fwz5wUn6rV2MVCPNOHDNb21PGPEHSuvuiCIuUoMnmrCEeo2cCUW43M6TMw6mlcVcFo0KnxdH2sJCTjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

{{/* Optional: Add plugins for extra features like thumbnails */}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js" integrity="sha512-ohDq0fNqkLAEdMVG4T1iKV8dRkLwJtzpepQv3IeE4PAW5/g3syt+viYI9121a93KOKJNXr3US1Lx+E3sLpNVag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

{{/* Initialization script */}}
<script>
    // FOUC avoidance:
    // First, select the content container. PaperMod uses `.post-content`.
    const postContent = document.querySelector('.post-content');

    if (postContent) {
      // Hide the content until the gallery is initialized
      // to prevent a flash of unstyled content.
      postContent.style.visibility = 'hidden';
    
      // Initialize lightGallery
      lightGallery(postContent, {
        selector: 'a.img-link', // Tell lightGallery to use links with this class
        plugins: [lgThumbnail],  // Use the thumbnail plugin
        licenseKey: '0000-0000-000-0000', // You can use this for open source projects
        speed: 500
      });
      
      // After initialization, make the content visible again.
      postContent.style.visibility = 'visible';
    }
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{{/* layouts/_default/_markup/render-image.html */}}

{{/*
  This render hook turns a Markdown image ![alt](src) into a link
  that lightgallery.js can use.
*/}}
<a href="{{ .Destination | safeURL }}" class="img-link" data-sub-html="{{ .PlainText | safeHTML }}">
    <img src="{{ .Destination | safeURL }}"
         alt="{{ .PlainText | safeHTML }}"
         {{- with .Title }} title="{{ . }}"{{ end -}}
         loading="lazy" />
</a>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* assets/css/extended/blank.css */

/* Make images in content have a max-width and display as block elements */
.post-content img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image */
}

/* 
  When hovering over an image that is part of the gallery, 
  show a zoom-in cursor to indicate it's clickable.
*/
.post-content a.img-link {
    cursor: zoom-in;
    display: block; /* Ensures the link wrapper takes up the full space of the image */
    line-height: 0; /* Removes any extra space below the image */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{/* layouts/_default/_markup/render-image.html */}}

{{/*
  This render hook wraps the image in a <figure> element,
  which acts as a container for our CSS hover effect.
  It also adds the image's alt text as a caption.
*/}}
<figure class="zoom-container">
    <img src="{{ .Destination | safeURL }}" 
         alt="{{ .PlainText | safeHTML }}" 
         {{- with .Title }} title="{{ . }}"{{ end -}}
         loading="lazy" />
    
    {{- with .PlainText -}}
        <figcaption>{{ . }}</figcaption>
    {{- end -}}
</figure>

 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

/* assets/css/extended/blank.css */

/*
 * Pure CSS Hover Zoom Effect for Images
 */

/* 1. The container for each image */
.post-content .zoom-container {
    display: block;
    margin: 25px 0; /* Adds some nice vertical space around images */
    text-align: center; /* Centers the image if it's not full-width */
}

/* 2. The image itself - initial state and transition */
.post-content .zoom-container img {
    max-width: 100%; /* Ensures image is responsive and fits the container */
    height: auto;
    display: inline-block; /* Needed for text-align: center to work */
    border-radius: 5px; /* Optional: adds a nice soft corner to images */
    
    /* This is the magic: a smooth transition for the zoom effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* 3. The zoom effect when hovering over the container */
.post-content .zoom-container:hover img {
    transform: scale(1.2); /* Adjust the zoom level here. 1.2 = 120% zoom */
    cursor: zoom-in;
    
    /* Optional: Add a shadow to make the image "pop" out */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* Lifts the image above nearby elements to prevent it from being obscured */
    position: relative;
    z-index: 10;
}

/* 4. Optional but recommended: style for the image caption */
.post-content .zoom-container figcaption {
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--secondary); /* Uses the theme's secondary text color */
    text-align: center;
    font-style: italic;
}

/*
  Keep this root block if you have other variables in it.
  Otherwise, you can remove it if the zoom effect is all you need.
*/
:root {
    --nav-width: 1380px;
    --article-width: 650px;
    --toc-width: 300px;
}