Hugo建站全指南 | 我的第一个博客网站

baseURL = "https://chenxuefan.cn"
languageCode = "en-us"
title = "人人都爱小雀斑's blogs"
theme = "cactus"
copyright = "billie" # cactus will use title if copyright is not set
disqusShortname = "example" # Used when comments is enabled. Cactus will use site title if not set
# googleAnalytics = "UA-1234-5"

<footer id="footer">
  <div class="footer-left">
    Copyright  
    &copy; 
    {{ now.Format "2006" }} 
    <span>❤️{{ if .Site.Copyright }} {{ print .Site.Copyright }} {{ else }} {{ print .Site.Title }} {{ end }} | </span>  
    <span>粤ICP备20025795号-1 | </span>
    <span>Powered By Hugo | </span>
    <span id="busuanzi_container_site_pv">
        pv：<span id="busuanzi_value_site_pv"></span> | 
    </span>
    <span id="busuanzi_container_site_uv">
        uv: <span id="busuanzi_value_site_uv"></span> 
    </span>
  </div>
</footer>

<!-- 不蒜子 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<span id="busuanzi_container_site_pv">
    本站访问量：<span id="busuanzi_value_site_pv"></span>次
</span>
&nbsp;
<span id="busuanzi_container_site_uv">
    您是本站第 <span id="busuanzi_value_site_uv"></span> 位访问者
</span>

<div class="article-tag">
            <i class="fa fa-eye"></i> 
            <span id="busuanzi_container_page_pv">
              <span id="busuanzi_value_page_pv">0</span>
            </span>
        </div>

<h5 id="wc" style="font-size: 1rem;text-align: center;">{{ .FuzzyWordCount }} Words|Read in about {{ .ReadingTime }} Min|本文总阅读量<span id="busuanzi_value_page_pv"></span>次</h5>

  # Valine.
  # You can get your appid and appkey from https://leancloud.cn
  # more info please open https://valine.js.org
  [params.valine]
    enable = true
    appId = '你的appId'
    appKey = '你的appKey'
    notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
    verify = false # Verification code
    avatar = 'mm' 
    placeholder = '说点什么吧...'
    visitor = true

  <!-- gitment -->
  {{- if .Site.Params.gitment.enable -}}
  <div id="comments-gitment"></div>
  <!--这里省略了部分代码-->
  <noscript>Please enable JavaScript to view the <a href="https://github.com/imsun/gitment">comments powered by gitment.</a></noscript>
  {{- end }}

  <!--这个位置添加Valine相关代码-->

  <!-- valine -->
  {{- if .Site.Params.valine.enable -}}
  <!-- id 将作为查询条件 -->
  <span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
    <span class="post-meta-item-text">文章阅读量 </span>
    <span class="leancloud-visitors-count">1000000</span>
    <p></p>
  </span>
  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
  <script type="text/javascript">
    new Valine({
        el: '#vcomments' ,
        appId: '{{ .Site.Params.valine.appId }}',
        appKey: '{{ .Site.Params.valine.appKey }}',
        notify: {{ .Site.Params.valine.notify }}, 
        verify: {{ .Site.Params.valine.verify }}, 
        avatar:'{{ .Site.Params.valine.avatar }}', 
        placeholder: '{{ .Site.Params.valine.placeholder }}',
        visitor: {{ .Site.Params.valine.visitor }}
    });
  </script>
  {{- end }}

hugo -D #打包成静态文件目录public

cd public #切换到public目录
git init
git remote rm origin

git remote add origin https://github.com/your_github_id/your_github_id.github.io.git #链接到你的GitHub博客项目

git add .
git commit -m "update"
echo "Pushing to github"
git pull origin master

git push -u origin +master

{{ .FuzzyWordCount }} Words | Read in about {{ .ReadingTime }} Min

permalinks:
  post: /:year/:month/:title/

    def write_index_page(self, titles, urls, times):
        doc = open(config.Index_path, 'r').read()
        # '<h1>Most recent</h1>'
        html = '''
            <section id="projects">
            <span class="h1">Most recent</span>
            <ul class="post-list">

        '''
        for i in range(len(titles)):
            html += f'''
                <li class="post-item">
                  <div class="meta">
                    <time datetime="{times[i]} 00:00:00 +0000 UTC" itemprop="datePublished">{times[i]}</time>
                  </div>
                  <span>    
                    <a class="" href="{urls[i]}">{titles[i]}</a>
                  </span>
                </li>
            '''
        html += '</ul></section>'
        doc = re.sub('<section id="Most recent">', html, doc)
        with open(config.Index_path, 'w') as f:
            f.write(doc)

<style>
@media screen and (max-width: 500px) {
    #archive .post-list .post-item .meta{
		display: inline!important;
	}
}
</style>

    def write_article_page(self, md_file_paths: list, article_times_ymd: list):
        html_file_paths = [os.path.join(config.public_path,
                                        re.search('content/(.*?).md', file).group(1),
                                        'index.html')
                           for file in md_file_paths
                           if not file.endswith('index.md')]

        html_file_paths += [os.path.join(config.public_path,
                                         re.search('content/(.*?)/index.md', file).group(1),
                                         'index.html')
                            for file in md_file_paths
                            if file.endswith('index.md')]

        for ind, each in enumerate(html_file_paths):
            doc = open(html_file_paths[ind], 'r').read()
            doc = re.sub('<p id="last updated">', f'<p>last updated {article_times_ymd[ind]}</p>', doc)
            with open(html_file_paths[ind], 'w') as f:
                f.write(doc)
            

<!--<button id="theme-toggle" onclick="toggleTheme()"></button>-->

<button id="theme-toggle" onclick="toggleTheme()" accesskey="t" title="(Alt + T)">
    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
    </svg>
    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
    </svg>
</button>

<style>
    #theme-toggle {
        z-index: 100; /* 设置较高的 z-index 值，使元素位于较低值的元素之上 */
        /*display: inline-block;*/
        /*width: 20px;*/
        /*height: 10px;*/
        /*border: 2px solid #333;*/
        /*border-radius: 5px;*/
        /*background-color: #fff;*/
        border: none;
        background-color: transparent;
        color: #333;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        position: absolute;
        top: 20px;
        left: 12px;

        touch-action: manipulation; /* 控制触摸行为 */
        -webkit-tap-highlight-color: transparent; /* 禁用移动设备上的点击高亮效果 */
    }

    /*#theme-toggle:hover {*/
    /*    background-color: #333;*/
    /*    color: #fff;*/
    /*}*/


    #moon {
        background-color: transparent;
        display: none;
    }

    #sun {
        background-color: transparent;
        color: #fff;
        display: none;
    }
</style>

<script>
    var currentTheme = themeLink.getAttribute("href");
    var sun = document.getElementById("sun");
    var moon = document.getElementById("moon");
    if (currentTheme === "/css/style-light.css") {
        sun.style.display = "none";
        moon.style.display = "block";
    } else {
        moon.style.display = "none";
        sun.style.display = "block";
    }

    function toggleTheme() {
        var themeLink = document.getElementById("themeLink");
        var currentTheme = themeLink.getAttribute("href");
        var sun = document.getElementById("sun");
        var moon = document.getElementById("moon");
        // console.log(22)
        console.log(themeLink.getAttribute("href"))
        if (currentTheme === "/css/style-light.css") {
            // console.log(themeLink.getAttribute("href"))
            themeLink.setAttribute("href", "/css/style-dark.css");
            localStorage.setItem("selectedTheme", "dark");
            sun.style.display = "block";
            moon.style.display = "none";
            // console.log(themeLink.getAttribute("href"))
        } else {
            themeLink.setAttribute("href", "/css/style-light.css");
            localStorage.setItem("selectedTheme", "light");
            moon.style.display = "block";
            sun.style.display = "none";
        }
    }
</script>

<!--<script>-->
<!--    -->
<!--    function toggleTheme() {-->
<!--        var themeLink = document.getElementById("themeLink");-->
<!--        var currentTheme = themeLink.getAttribute("href");-->

<!--        if (currentTheme === "/css/style-light.css") {-->
<!--            themeLink.setAttribute("href", "/css/style-dark.css");-->
<!--            localStorage.setItem("selectedTheme", "dark");-->
<!--        } else {-->
<!--            themeLink.setAttribute("href", "/css/style-light.css");-->
<!--            localStorage.setItem("selectedTheme", "light");-->
<!--        }-->
<!--    }-->

<!--    //-->
<!--    // window.addEventListener("load", function () {-->
<!--    //     var themeLink = document.getElementById("themeLink");-->
<!--    //     var storedTheme = localStorage.getItem("selectedTheme");-->
<!--    //-->
<!--    //     if (storedTheme === "dark") {-->
<!--    //         themeLink.setAttribute("href", "/css/style-dark.css");-->
<!--    //     } else {-->
<!--    //         themeLink.setAttribute("href", "/css/style-light.css");-->
<!--    //     }-->
<!--    // });-->
<!--</script>-->

// 限制代码显示长度
$(document).ready(function() {
  $('code').each(function() {
    var codeElement = $(this);
    var codeHeight = codeElement.height();
    if (codeHeight > 50) {
      codeElement.css({
        'max-height': '500px',
        'overflow-y': 'scroll'
      });
    }
  });
});

<div id="se_div">
    <input id="se_password" type="password" placeholder="Enter password...">
    <input id="se_submit" type="submit">
</div>

<style>
    /* 隐藏内容 */
    div .content > *:not(#se_div) {
        display: none;
    }
</style>

<script>
    var modal = document.getElementById('se_div');
    var passwordInput = document.getElementById('se_password');
    var submitButton = document.getElementById('se_submit');
    var article = document.querySelector('article');
    var correctPassword = 'your_password'; // 将 'your_password' 替换为实际的密码

    window.onload = function () {
        modal.style.display = 'block'; // 页面加载时显示弹窗
    };

    submitButton.addEventListener('click', function () {
        var password = passwordInput.value;

        if (password !== correctPassword) {
            alert('密码错误，返回上一页。');
            history.back();;
        } else {
            modal.style.display = 'none'; // 隐藏弹窗

            var contentDiv = document.querySelector('div .content');
            var seDiv = document.getElementById('se_div');

            // 遍历 .content 下的所有子元素
            for (var i = 0; i < contentDiv.children.length; i++) {
                var child = contentDiv.children[i];
                if (child !== seDiv && child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE') {
                    child.style.display = 'block'; // 隐藏除了 id 为 "se_div" 的 div 之外的其他标签
                }
            }
        }
    });
</script>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- 其他头部信息 -->
</head>

<style type="text/css">
    #mainimg img{
        /*width: calc(100vw - 17px); !* 考虑滚动条宽度 *!*/
        max-width: 100%;
        height: auto;
    }

    /*@media screen and (max-width: 500px) {*/
    /*    !*主页图片移动端适应*!*/
    /*    #mainimg {*/
    /*        max-width: 100%;*/
    /*        height: auto*/
    /*    }*/
    /*}*/

</style>

<span id="mainimg">
    <img :src="image_url">
    <span v-if="image_url"></span>
    <span v-else v-text="info"></span>
</span>

<script>

    var vm = new Vue({
        // 挂载点
        el: "#mainimg",
        // 数据对象
        data: {
            msg: '获取图片文件链接',
            api: 'https://api.chenxuefan.cn/api/travel',
            info: 'Rage,rage against the dying of the light.',
            image_url: ''
        },
        // 事件
        methods: {
            get_image_urls() {
                var that = this;
                axios.get(that.api)
                    .then(function (response) {
                        console.log(response.data);
                        that.image_url = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        mounted() {
            this.get_image_urls();
        }
    })

    function adjustImageWidth() {
        var image = document.getElementById('mainimg');
        var windowHeight = window.innerHeight || document.documentElement.clientHeight;
        var bodyHeight = document.body.scrollHeight;
        var hasScrollbar = bodyHeight > windowHeight;
        var currentWidth = image.offsetWidth;

        // console.log(document.body.scrollHeight ,window.innerHeight)
        while (document.body.scrollHeight > window.innerHeight && currentWidth > 410) {
            console.log(document.body.scrollHeight, window.innerHeight)
            currentWidth -= 10; // 减小宽度的步长

            image.style.width = currentWidth + 'px';
        }
    }

    // 页面加载完成时调整图片宽度
    window.addEventListener('load', adjustImageWidth);

    // 窗口大小改变时调整图片宽度
    window.addEventListener('resize', adjustImageWidth);
</script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 100;
        /*padding-top: 100px;*/
        left: 0;
        top: 0;
        width: 100% !important;
        height: 100% !important;
        overflow: auto;
        background-color: rgba(23, 23, 23, 0.9);
    }

    .modal-content {
        margin: auto;
        display: block;
        width: 75%;
    }

    /* 移动设备样式 */
    @media (max-width: 768px) {
        .modal-content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 95%;
            height: 95%;
        }
    }

    .modal-content img {
        width: 100%;
        height: auto;
    }
    .modal-content .prev-div{
        padding: 30px;
        position: absolute;
        top: 50%;
        left: 5%;
    }

    .modal-content .next-div{
        padding: 30px;
        position: absolute;
        top: 50%;
        right: 5%;
    }
    .btn-s {
        border: none;
    }

    .modal-content .prev-btn {

        width: 2rem;
        height: 2rem;
        transform: rotate(45deg);
        border-left: 1px solid #fff0ff;
        border-bottom: 1px solid #fff0ff;
        background-color: transparent;
        cursor: pointer;
        outline: none; /* 禁用默认焦点样式 */
        transition: background-color 0.3s;

        touch-action: manipulation; /* 控制触摸行为 */
        -webkit-tap-highlight-color: transparent; /* 禁用移动设备上的点击高亮效果 */
    }


    .modal-content .next-btn {
        width: 2rem;
        height: 2rem;

        transform: rotate(-45deg);
        background-color: transparent;
        border-right: 1px solid #fff0ff;
        border-bottom: 1px solid #fff0ff;
        cursor: pointer;
        outline: none; /* 禁用默认焦点样式 */
        transition: background-color 0.3s;

        touch-action: manipulation; /* 控制触摸行为 */
        -webkit-tap-highlight-color: transparent; /* 禁用移动设备上的点击高亮效果 */
    }

    .prev-btn:hover {
        border-color: #ddd;
    }

    .next-btn:hover {
        border-color: #ddd;
    }

    /* 移动设备样式 */
    @media (max-width: 768px) {
        .modal-content .prev-div {
            top: 80%;
            left: 10%;
        }

        .modal-content .next-div {
            top: 80%;
            right: 10%;
        }
    }

</style>


<!-- 放大图片的模态框 -->
<div id="myModal" class="modal" onclick="closeModal()">
    <span class="modal-content">

      <img id="modalImg" src="" alt="Modal Image">
      <div class="prev-div" onclick="prevImage()" ><button class="btn-s prev-btn"></button></div>
      <div class="next-div" onclick="nextImage()" ><button class="btn-s next-btn"></button></div>
    </span>
</div>

<script>
    // 获取所有的图片标签
    var images = document.getElementsByTagName("img");
    var currentImageIndex = 0;

    // 为每个图片标签添加点击事件
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = function () {
            openModal(this);
        };
    }

    // 打开模态框并显示放大的图片
    function openModal(img) {
        var modal = document.getElementById("myModal");
        var modalImg = document.getElementById("modalImg");
        modal.style.display = "block";
        modalImg.src = img.src;
    }

    // 关闭模态框
    function closeModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
    }

    // 上一张图片
    function prevImage() {
        event.stopPropagation(); // 阻止事件冒泡
        currentImageIndex--;
        if (currentImageIndex < 0) {
            currentImageIndex = images.length - 1;
        }
        var modalImg = document.getElementById("modalImg");
        modalImg.src = images[currentImageIndex].src;
    }

    // 下一张图片
    function nextImage() {
        event.stopPropagation(); // 阻止事件冒泡
        currentImageIndex++;
        if (currentImageIndex >= images.length) {
            currentImageIndex = 0;
        }
        console.log(images[currentImageIndex].src);
        var modalImg = document.getElementById("modalImg");
        modalImg.src = images[currentImageIndex].src;
    }
</script>

<script>
    // 获取所有的图片标签
    var images = document.getElementsByTagName("img");

    // 为每个图片标签添加点击事件
    for (var i = 0; i < images.length; i++) {
        images[i].style.borderRadius = '5px';
    }
</script>

<p id="ach">
    🧑🏻‍💻 本站已统计共 <u v-text="ArticleNum"></u> 篇文章，共 <u v-text="formattedWordNum"></u> 字
</p>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#ach", //挂载点
        data: {
            WordNum: '',
            ArticleNum: ''
        },  //数据对象
        computed: {
            formattedWordNum: function() {
                return this.WordNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }
        },
        methods: {
            get_data() {
                var that = this;
                axios.get('https://api.chenxuefan.cn/api/blog')
                    .then(function (response) {
                        that.WordNum = response.data.WordNum;
                        that.ArticleNum = response.data.ArticleNum;
                        console.log(response, that.WordNum);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        mounted() {
            this.get_data();
        }
    });
</script>

<img id='footerimg' src='{{ "images/footer.jpg"  | relURL }}'>

<style>
    #footer {
        margin-top: 50px;
    }
    #footerimg {
        z-index: -1;
        height: 150px;
        position: absolute;
        bottom: -1px; /* 距离底部的距离 */
        left: 10px; /* 距离左侧的距离 */
    }
    /* 移动设备样式 */
    @media (max-width: 768px) {
        #footerimg {
            /*display: none;*/
            height: 120px;
            left: -1px; /* 距离左侧的距离 */
        }
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script> <!-- 懒加载 -->
<script>

    // 获取页面上所有的img元素
    var imgElements = document.getElementsByTagName('img');

    // 遍历每个img元素
    for (var i = 0; i < imgElements.length; i++) {
        // 将src属性的值替换为data-src属性的值
        var srcValue = imgElements[i].getAttribute('src');
        // 如果src属性有值，则将其设置为data-src属性的值，并将src属性置为空
        if (srcValue) {
            imgElements[i].setAttribute('data-src', srcValue);
            imgElements[i].removeAttribute('src');
            imgElements[i].classList.add('lazyload'); // 添加lazy类
        }
    }

    lazyload();
</script>

    <!--  keywords-->
    {{ if strings.Contains .Title "菲林日记" }}
        {{ $keywords := slice }} <!-- 初始化一个空的数组 -->
        {{ $content := .Content | safeHTML }} <!-- 获取内容并将其转换为 HTML -->
        {{ $lines := findRE `<p>\s*(.+?)\s*</p>` $content 4 }}
        {{ range $lines }}
            {{ $line := . }} <!-- 去除前面的<p>标签和前后空格 -->
            {{ if ne $line "" }}
                {{ if strings.Contains $line "🎞️" }}
                    {{ $match := findRE `<p>\s*🎞️ - (.*?)\s*</p>` $line 1 }} <!-- 提取匹配的内容 -->
                    {{ $keyword := index $match 0 }} <!-- 获取第一个匹配的内容 -->
                    {{ $keyword := replace $keyword "<p>🎞️ - " "" }} <!-- 去除前缀 -->
                    {{ $keyword := replace $keyword "</p>" "" }} <!-- 去除后缀 -->
                    {{ $keyword := trim $keyword "" }} <!-- 去除前后空格 -->
                    {{ $keywords = $keywords | append $keyword }} <!-- 将关键词添加到列表中 -->
                {{ else if strings.Contains $line "📷" }}
                    {{ $match := findRE `<p>📷 - (.*?)</p>` $line 1 }} <!-- 提取匹配的内容 -->
                    {{ $keyword := index $match 0 }}
                    {{ $keyword := replace $keyword "<p>📷 - " "" }} <!-- 去除前缀 -->
                    {{ $keyword := replace $keyword "</p>" "" }} <!-- 去除后缀 -->
                    {{ $keyword := trim $keyword "" }} <!-- 去除前后空格 -->
                    {{ $keywords = $keywords | append $keyword }}
                {{ else if strings.Contains $line "🖨" }}
                    {{ $match := findRE `<p>🖨 - (.*?)</p>` $line 1 }} <!-- 提取匹配的内容 -->
                    {{ $keyword := index $match 0 }}
                    {{ $keyword := replace $keyword "<p>🖨 - " "" }}
                    {{ $keyword := replace $keyword "</p>" "" }}
                    {{ $keyword := trim $keyword "" }} <!-- 去除前后空格 -->
                    {{ $keywords = $keywords | append $keyword }}
                {{ else if strings.Contains $line "🏞" }}
                    {{ $match := findRE `<p>🏞 - (.*?)</p>` $line 1 }} <!-- 提取匹配的内容 -->
                    {{ $keyword := index $match 0 }}
                    {{ $keyword := replace $keyword "<p>🏞 - " "" }} <!-- 去除前缀 -->
                    {{ $keyword := replace $keyword "</p>" "" }} <!-- 去除后缀 -->
                    {{ $keyword := trim $keyword "" }} <!-- 去除前后空格 -->
                    {{ $keywords = $keywords | append $keyword }}
                {{ end }}
            {{ end }}
        {{ end }}

        <!-- 生成 meta keywords 标签 -->
        {{ if gt (len $keywords) 0 }}
            <meta name="keywords" content="{{ delimit $keywords ", " }}" />
        {{ else }}
            <meta name="keywords" content="{{ delimit .Site.Params.Keywords ", " }}" />
        {{ end }}

    {{ else if .Keywords }}
        <meta name="keywords" content="{{ delimit .Keywords ", " }}" >
    {{ else }}
        <meta name="keywords" content="{{ delimit .Site.Params.Keywords ", " }}" >
    {{ end }}