分类技术学习下的文章

仿照linktree做的个人主页

作者: 搬砖日记
时间: 2024-12-25
分类: 主题
评论

实现的效果：

随机显示背景图像
从背景图像提取主要颜色设置为按钮的颜色
适配移动端
点击项目按钮展开/收缩项目

下面是代码，当然还有一个去除JS的代码，一起附在下面，可能需要你手动设置按钮颜色

附带JS的版本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @font-face {
            font-family: 'Opposans';
            src: url('opposans.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #buttonContainer hr {
            border: none;
            border-top: 2px dashed #007bff;
            margin: 10px 10px;
        }
        body {
            font-family: 'Opposans', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background 0.5s;
        }
        .container {
            text-align: center;
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }
        h1 {
            color: white;
            padding: 0;
            margin: 0;
        }
        .link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: white;
            padding: 15px;
            margin: 10px 0;
            text-decoration: none;
            border-radius: 30px;
            transition: background 0.3s;
        }
        .link i {
            padding: 0px;
            width: 1.2rem;
            height: 1.2rem;
            font-size: 1.2rem;
            margin-right: 10px;
        }
        .social-media {
            margin: 20px;
            display: flex;
            justify-content: center;
        }
        .social-icon {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: background 0.3s;
            text-decoration: none;
        }
        .social-icon:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        footer {
            margin-top: 20px;
            font-size: 0.8em;
            color: white;
        }

        @media (max-width: 600px) {
            .container {
                backdrop-filter: none;
                box-shadow: none;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Name here</h1>
    <div class="social-media">
        <a class="social-icon" href="https://github.com/username" target="_blank"><i class="fa-brands fa-github"></i></a>
        <a class="social-icon" href="https://x.com/username" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
        <a class="social-icon" href="https://instagram.com/username" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a class="social-icon" href="https://t.me/username" target="_blank"><i class="fa-brands fa-telegram"></i></a>
    </div>
    <a class="link" href="https://myblog.com"><i class="fas fa-scroll"></i>Blog</a>
    <a class="link" href="mailto:m@username.com"><i class="fas fa-envelope"></i>Hire me</a>
    <a class="link" href="/" id="dynamicButtonLink"><i class="fa-solid fa-file-code"></i>Projects</a>
    <div id="buttonContainer" style="display: none;">
        <hr>
        <a class="link" href="https://username.site"><i class="fas fa-link"></i>Projects name</a>
        <a class="link" href="https://github.com/username/Projects1/"><i class="fab fa-github"></i>Projects1</a>
        <a class="link" href="https://github.com/username/Projects2/"><i class="fab fa-github"></i>Projects2</a>
    </div>
</div>

<footer>
    <p>&copy; 2024 Name</p>
</footer>

<canvas id="myCanvas" style="display:none;"></canvas>

<script>
    const backgrounds = [
        '1.webp',
        '2.webp',
        '3.webp',
        '4.webp',
        '5.webp',
        '6.webp',
        '7.webp',
        '8.webp',
        '9.webp',
        '10.webp',
        '11.webp',
        '12.webp',
        '13.webp',
        '14.webp',
        '15.webp',
        '16.webp',
        '17.webp',
        '18.webp'
    ];
    
    const randomIndex = Math.floor(Math.random() * backgrounds.length);
    const backgroundImage = backgrounds[randomIndex];
    document.body.style.backgroundImage = `url(${backgroundImage})`;

    const canvas = document.getElementById('myCanvas');

    function getImageColor(canvas, img) {
        canvas.width = img.width;
        canvas.height = img.height;

        const context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);

        const data = context.getImageData(0, 0, img.width, img.height).data;
        let r = 0, g = 0, b = 0;

        const pixelCount = img.width * img.height;
        for (let i = 0; i < data.length; i += 4) {
            r += data[i];     // R
            g += data[i + 1]; // G
            b += data[i + 2]; // B
        }
        r = Math.round(r / pixelCount);
        g = Math.round(g / pixelCount);
        b = Math.round(b / pixelCount);

        return `rgb(${r}, ${g}, ${b})`;
    }

    function lightenColor(rgb, percent) {
        const rgbValues = rgb.match(/\d+/g).map(Number);
        const r = Math.min(255, Math.round(rgbValues[0] + (255 - rgbValues[0]) * percent));
        const g = Math.min(255, Math.round(rgbValues[1] + (255 - rgbValues[1]) * percent));
        const b = Math.min(255, Math.round(rgbValues[2] + (255 - rgbValues[2]) * percent));
        return `rgb(${r}, ${g}, ${b})`;
    }

    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = backgroundImage;

    img.onload = function() {
        const rgbColor = getImageColor(canvas, img);
        
        const links = document.querySelectorAll('.link');
        links.forEach(link => {
            link.style.backgroundColor = rgbColor;
            link.style.color = 'white';
            
            const hoverColor = lightenColor(rgbColor, 0.2);
            link.addEventListener('mouseover', () => {
                link.style.backgroundColor = hoverColor;
            });
            link.addEventListener('mouseout', () => {
                link.style.backgroundColor = rgbColor;
            });
        });
        const hr = document.querySelector('#buttonContainer hr');
        hr.style.borderTop = `2px dashed ${rgbColor}`;
        const socialIcons = document.querySelectorAll('.social-icon');
        socialIcons.forEach(icon => {
            icon.style.backgroundColor = rgbColor;
            
            const hoverColor = lightenColor(rgbColor, 0.2);
            icon.addEventListener('mouseover', () => {
                icon.style.backgroundColor = hoverColor;
            });
            icon.addEventListener('mouseout', () => {
                icon.style.backgroundColor = rgbColor;
            });
        });

        const footer = document.querySelector('footer');
        footer.style.color = rgbColor;
    };
    document.getElementById('dynamicButtonLink').addEventListener('click', function(event) {
        event.preventDefault();

        const buttonContainer = document.getElementById('buttonContainer');

        if (buttonContainer.style.display === 'none') {
            buttonContainer.style.display = 'block';
        } else {
            buttonContainer.style.display = 'none';
        }
    });
</script>

</body>
</html>

去除JS的版本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @font-face {
            font-family: 'Opposans';
            src: url('opposans.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #buttonContainer hr {
            border: none;
            border-top: 2px dashed #007bff;
            margin: 10px 10px;
        }
        body {
            font-family: 'Opposans', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            
            background-repeat: no-repeat;
            transition: background 0.5s;
        }
        .container {
            text-align: center;
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }
        h1 {
            color: white;
            padding: 0;
            margin: 0;
        }
        .link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: white;
            padding: 15px;
            margin: 10px 0;
            text-decoration: none;
            border-radius: 30px;
            transition: background 0.3s;
        }
        .link i {
            padding: 0px;
            width: 1.2rem;
            height: 1.2rem;
            font-size: 1.2rem;
            margin-right: 10px;
        }
        .social-media {
            margin: 20px;
            display: flex;
            justify-content: center;
        }
        .social-icon {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: background 0.3s;
            text-decoration: none;
        }
        .social-icon:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        footer {
            margin-top: 20px;
            font-size: 0.8em;
            color: white;
        }

        @media (max-width: 600px) {
            .container {
                backdrop-filter: none;
                box-shadow: none;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Name here</h1>
    <div class="social-media">
        <a class="social-icon" href="https://github.com/username" target="_blank"><i class="fa-brands fa-github"></i></a>
        <a class="social-icon" href="https://x.com/username" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
        <a class="social-icon" href="https://instagram.com/username" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a class="social-icon" href="https://t.me/username" target="_blank"><i class="fa-brands fa-telegram"></i></a>
    </div>
    <a class="link" href="https://myblog.com"><i class="fas fa-scroll"></i>Blog</a>
    <a class="link" href="mailto:m@username.com"><i class="fas fa-envelope"></i>Hire me</a>
    <a class="link" href="/" id="dynamicButtonLink"><i class="fa-solid fa-file-code"></i>Projects</a>
    <hr>
    <a class="link" href="https://username.site"><i class="fas fa-link"></i>Projects name</a>
    <a class="link" href="https://github.com/username/Projects1/"><i class="fab fa-github"></i>Projects1</a>
    <a class="link" href="https://github.com/username/Projects2/"><i class="fab fa-github"></i>Projects2</a>
</div>

<footer>
    <p>&copy; 2024 Name</p>
</footer>

</body>
</html>

附加随机图像

如果你想要一个每次打开都会展示不一样的背景图像的页面，你可以使用下面的代码。如果你不想使用代码里的随机图像方案，你可以查看我的另一篇文章，里面有其他可选择的随机图像api： https://banzhuanriji.com/frontend/random-image.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Name</title>
    <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @font-face {
            font-family: 'Opposans';
            src: url('opposans.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #buttonContainer hr {
            border: none;
            border-top: 2px dashed #007bff;
            margin: 10px 10px;
        }
        body {
            font-family: 'Opposans', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background 0.5s;
        }
        .container {
            text-align: center;
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }
        h1 {
            color: white;
            padding: 0;
            margin: 0;
        }
        .link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: white;
            padding: 15px;
            margin: 10px 0;
            text-decoration: none;
            border-radius: 30px;
            transition: background 0.3s;
        }
        .link i {
            padding: 0px;
            width: 1.2rem;
            height: 1.2rem;
            font-size: 1.2rem;
            margin-right: 10px;
        }
        .social-media {
            margin: 20px;
            display: flex;
            justify-content: center;
        }
        .social-icon {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: background 0.3s;
            text-decoration: none;
        }
        .social-icon:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        footer {
            margin-top: 20px;
            font-size: 0.8em;
            color: white;
        }

        @media (max-width: 600px) {
            .container {
                backdrop-filter: none;
                box-shadow: none;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Name</h1>
    <div class="social-media">
        <a class="social-icon" href="https://github.com/username" target="_blank"><i class="fa-brands fa-github"></i></a>
        <a class="social-icon" href="https://x.com/username" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
        <a class="social-icon" href="https://instagram.com/username" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a class="social-icon" href="https://t.me/username" target="_blank"><i class="fa-brands fa-telegram"></i></a>
    </div>
    <a class="link" href="https://name.com"><i class="fas fa-scroll"></i>Blog</a>
    <a class="link" href="/"><i class="fas fa-envelope"></i>Hire me</a>
    <a class="link" href="/" id="dynamicButtonLink"><i class="fa-solid fa-file-code"></i>Projects</a>
    <div id="buttonContainer" style="display: none;">
        <hr>
        <a class="link" href="https://github.com/username/Project1/"><i class="fab fa-github"></i>Project1</a>
        <a class="link" href="https://github.com/username/Project2/"><i class="fab fa-github"></i>Project2</a>
    </div>
</div>

<footer>
    <p>&copy; 2024 username</p>
</footer>

<canvas id="myCanvas" style="display:none;"></canvas>

<script>
    const imageUrl = 'https://picsum.photos/1920/1080.webp';

    // Fetch the image to get a consistent URL
    fetch(imageUrl)
        .then(response => {
            if (response.ok) {
                const img = new Image();
                img.crossOrigin = 'anonymous';
                img.src = response.url; // Use the resolved URL
                img.onload = function() {
                    document.body.style.backgroundImage = `url(${response.url})`;
                    const canvas = document.getElementById('myCanvas');
                    const rgbColor = getImageColor(canvas, img);

                    const links = document.querySelectorAll('.link');
                    links.forEach(link => {
                        link.style.backgroundColor = rgbColor;
                        link.style.color = 'white';

                        const hoverColor = lightenColor(rgbColor, 0.2);
                        link.addEventListener('mouseover', () => {
                            link.style.backgroundColor = hoverColor;
                        });
                        link.addEventListener('mouseout', () => {
                            link.style.backgroundColor = rgbColor;
                        });
                    });

                    const hr = document.querySelector('#buttonContainer hr');
                    hr.style.borderTop = `2px dashed ${rgbColor}`;
                    const socialIcons = document.querySelectorAll('.social-icon');
                    socialIcons.forEach(icon => {
                        icon.style.backgroundColor = rgbColor;

                        const hoverColor = lightenColor(rgbColor, 0.2);
                        icon.addEventListener('mouseover', () => {
                            icon.style.backgroundColor = hoverColor;
                        });
                        icon.addEventListener('mouseout', () => {
                            icon.style.backgroundColor = rgbColor;
                        });
                    });

                    const footer = document.querySelector('footer');
                    footer.style.color = rgbColor;
                };
            } else {
                console.error('Failed to fetch image:', response.status);
            }
        })
        .catch(error => console.error('Error fetching the image:', error));

    function getImageColor(canvas, img) {
        canvas.width = img.width;
        canvas.height = img.height;

        const context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);

        const data = context.getImageData(0, 0, img.width, img.height).data;
        let r = 0, g = 0, b = 0;

        const pixelCount = img.width * img.height;
        for (let i = 0; i < data.length; i += 4) {
            r += data[i];     // R
            g += data[i + 1]; // G
            b += data[i + 2]; // B
        }
        r = Math.round(r / pixelCount);
        g = Math.round(g / pixelCount);
        b = Math.round(b / pixelCount);

        return `rgb(${r}, ${g}, ${b})`;
    }

    function lightenColor(rgb, percent) {
        const rgbValues = rgb.match(/\d+/g).map(Number);
        const r = Math.min(255, Math.round(rgbValues[0] + (255 - rgbValues[0]) * percent));
        const g = Math.min(255, Math.round(rgbValues[1] + (255 - rgbValues[1]) * percent));
        const b = Math.min(255, Math.round(rgbValues[2] + (255 - rgbValues[2]) * percent));
        return `rgb(${r}, ${g}, ${b})`;
    }

    document.getElementById('dynamicButtonLink').addEventListener('click', function(event) {
        event.preventDefault();

        const buttonContainer = document.getElementById('buttonContainer');

        if (buttonContainer.style.display === 'none') {
            buttonContainer.style.display = 'block';
        } else {
            buttonContainer.style.display = 'none';
        }
    });
</script>

</body>
</html>

我制作的两款blog主题

作者: 搬砖日记
时间: 2024-12-25
分类: 主题
评论

基于hexo平台，主题名为ink，灵感来自bearblog的starter

https://github.com/hoytzhang/hexo-theme-ink

一款简约的typecho主题，你可以访问 https://final.linkpark.site/ 查看实现效果

https://github.com/hoytzhang/typecho-theme-final

一、不利于SEO

搜索引擎会认为 aaa_bbb 是一个连词，从而识别为这是一个整体单词 aaabbb 。例如你搜索 my_site ，搜索引擎会认为你搜索了 mysite 而非 my site 。而在链接中使用 - 会让搜索引擎认为这是分词符，从而输入更多的准确的关键字。可以参考Google的说明文档。

进而，在用户进行搜索时，搜索引擎可能会忽略你的网站内容。

二、利于分辨

友好的内容不仅应该方便机器读取，更应该首先考虑人的感受。那么从人的角度来说为什么不应该使用下划线

下划线同样会给人一个“这是个长单词的感觉”。没有人会记住你想表达的内容。
一般的超链接的样式会设置为下划线和蓝色，如果你的链接内带有下划线，有可能会和样式产生重叠和遮挡。
如果超链接在文本中进行展示时，当你有一个比较长的链接，比如： site.com/this_is_a_very_long_link_on_my_website 。人在试图读这个链接时，眼睛会不由自主地跟随下划线移动。这似乎不太合适。

三、约定俗成的习惯和莫名其妙的bug

一般在计算机领域，我们在本地文件会使用下划线内容。然后上传文件后对外提供的链接就会是这样： http://site.com/file_name.txt 。但是这样会出现一个问题：在互联网传播时，浏览器内复制粘贴会将 _ 转义为 %5F ，如果服务器没有进行配置，那你的超链接的文件就会404。而且貌似很多知名公司都有这个问题
（现在可能已经被修复）。

四、在域名中不合法

RFC1738和RFC1035等多次投票结果的规则中对域名中出现 _ 表示禁止。也对以前申请了证书的带有下划线的域名的证书进行了回收和禁止续费。但这只是顶级域名的要求，而不是对于顶级域名下的子超链接和文件的限制。

其实只是很久以前看过的一个博客。说的是在美国军队中导致的一些问题从而禁用了下划线，最近想到了就重新整理一下写成文章分享出来。

网页程序如何正确设置用户路由

作者: 搬砖日记
时间: 2024-12-15
分类: 服务器
评论

以下是一些在网页程序中设置用户主页路由比较合理的方式及相关要点：

基于 RESTful 风格

路径设计

通常可以采用类似 /users/{username} 这样的路径形式，其中 {username} 是可变的部分，代表具体的用户名。例如，若用户名为 john，那访问 /users/john 就可以跳转到对应的用户主页。这种方式清晰地体现了资源（用户）与对应的标识（用户名）的关系，符合 RESTful 规范中对资源定位的要求，方便理解和记忆，也利于前后端的分工协作以及接口的统一管理。

还可以添加版本号在路由最前面，如 /v1/users/{username}，便于后续对 API 等进行迭代升级，不同版本的路由逻辑可以独立维护，不会相互干扰。

HTTP 方法匹配

对于用户主页的获取（也就是查看用户主页信息），一般使用 GET 方法来请求对应的路由。比如，当浏览器发起 GET 请求到 /users/john 时，后端根据这个路由和请求方法，查询数据库中关于 john 用户的信息并返回给前端进行展示，符合 RESTful 中不同方法对应不同操作语义的原则，GET 方法专门用于获取资源这一操作场景。

考虑用户身份验证与授权相关路由整合

登录态验证

在用户主页路由对应的处理逻辑之前，往往需要先验证用户是否已经登录。可以通过中间件来拦截请求，检查请求中携带的登录凭证（如 token 等）是否有效。比如，在很多基于 Node.js 的 Web 框架（像 Express）中，编写一个验证登录态的中间件，在路由配置里让用户主页路由先经过这个中间件，只有验证通过才能继续后续的主页数据获取和渲染流程，确保未登录用户无法直接访问用户主页，保障页面的访问安全性和隐私性。

权限控制路由结合

有时候用户主页可能根据用户权限展示不同内容，例如管理员用户的主页可能有更多管理功能入口。此时，路由可以配合权限控制模块，根据用户的角色（如普通用户、管理员等）来决定在加载用户主页时，返回哪些对应的模块数据和页面布局。像可以在路由处理函数中先获取用户角色信息，再依据角色从数据库中查询相应权限下的页面配置数据，以准确渲染出符合其权限的用户主页。

动态路由参数与页面状态关联

页面主题切换参数

若用户主页支持切换主题（如亮色模式、暗色模式等），可以在路由中添加额外的参数来表示主题状态，比如 /users/{username}?theme=dark 表示访问 username 用户的主页且采用暗色主题模式。后端接收到这样带有参数的路由请求后，根据 theme 参数的值来调整返回给前端的页面样式相关资源，实现灵活的页面状态定制。

分页相关参数

当用户主页有分页展示内容（比如用户发布的文章列表分页显示等），路由中可以包含分页参数，像 /users/{username}/posts?page=2&limit=10，表示查看 username 用户的文章列表，当前是第 2 页，每页显示 10 条内容。后端根据这些参数从数据库中准确提取对应的数据返回给前端，方便用户浏览不同页面的数据内容，提升用户体验。

路由懒加载与缓存策略配合

懒加载实现

对于比较复杂的用户主页，尤其是包含很多模块（如动态的个人动态展示、好友推荐等多个功能模块），可以采用路由懒加载的方式。例如在基于 Vue.js 或 React 等前端框架构建的单页面应用中，将用户主页的不同组件模块配置成懒加载形式，如 const UserHomePage = () => import (‘./UserHomePage.vue’);（Vue.js 示例），这样当用户访问到对应路由时，才会去加载对应的模块代码，减少初始加载的资源量，提高页面加载速度。

缓存优化

结合缓存策略，对于用户主页中一些相对静态、不常变化的数据（比如用户的基本信息介绍等），可以在浏览器端或者服务器端设置缓存机制。比如，在服务器端通过设置合适的缓存头（如 Cache-Control 等），告诉浏览器在一定时间内可以直接使用缓存的页面内容，减少重复请求，提升用户再次访问主页的响应速度，同时减轻服务器压力。

国际化与本地化路由适配

语言参数设置

如果网页程序支持多语言，在用户主页路由中可以添加语言相关参数，比如 /users/{username}?lang=en 表示访问 username 用户的主页且采用英语语言环境。后端根据这个参数，加载对应的语言包来渲染页面文字内容，使得不同语言习惯的用户都能获得合适的用户主页展示效果，方便国际化拓展和满足不同地区用户的需求。

总之，设置用户主页路由需要综合考虑多方面因素，从路由的规范、安全性、页面状态灵活度、性能优化以及多语言适配等角度出发，打造出合理且易用的路由体系。

次级域名方案分析

技术可行性

从技术角度来说，是可以设置username.website.com这类次级域名（也称为子域名）路由的。在服务器配置层面，对于支持虚拟主机的 Web 服务器（如 Apache 和 Nginx），可以通过配置虚拟主机来实现子域名的指向。

以 Nginx 为例，你需要在服务器配置文件中添加一个新的服务器块（server block）。假设你的主域名是website.com，要为用户username设置子域名路由，配置可能如下：

server {
    listen       80;
    server_name  username.website.com;
    # 以下是实际指向的路径，例如指向用户主页的目录
    location / {
        root   /var/www/username_homepage;
        index  index.html;
    }
}

这就将username.website.com这个子域名请求指向了/var/www/username_homepage这个服务器上的目录，当用户访问该子域名时，服务器会从这个目录中寻找并返回相应的网页文件。

域名系统（DNS）配置

要使用username.website.com这样的子域名，还需要在域名系统（DNS）中进行正确的配置。你需要添加一条CNAME（规范名称）记录或者A记录（如果是直接指向IP地址）来将子域名指向你的服务器。

如果你的网站是通过域名注册商管理的，你可以登录到域名管理控制台，在DNS设置区域添加相应的记录。例如，添加一个CNAME记录，将username.website.com指向website.com（假设website.com已经正确配置指向服务器的IP地址），或者直接添加A记录，将username.website.com指向服务器的实际IP地址。

应用程序路由逻辑

在网页程序内部，你需要根据请求的子域名来确定对应的路由逻辑。例如，在后端应用程序（如使用Python的Flask或Django等框架）中，需要编写代码来识别子域名部分，并根据不同的username加载相应的用户主页内容。

在Flask中，你可以使用request对象来获取请求的子域名信息，如下所示：

   from flask import Flask, request
   app = Flask(__name__)
   @app.route('/')
   def user_homepage():
       subdomain = request.headers.get('Host').split('.')[0]
       # 根据子域名subdomain（也就是username）加载对应的用户主页内容
       # 这里只是示例，实际可能需要查询数据库等操作
       return f"Welcome to the homepage of {subdomain}"

注意事项

安全性：确保在处理子域名请求时，进行适当的安全验证。例如，防止恶意用户通过构造虚假的子域名来访问未授权的内容或者进行攻击。可以通过验证用户身份、检查子域名是否在合法的用户列表中等方式来增强安全性。
性能和维护成本：使用大量的子域名可能会增加服务器配置的复杂性和维护成本。每次添加新的子域名都需要在服务器和 DNS 中进行配置，并且需要确保应用程序能够正确处理这些子域名请求。此外，过多的子域名可能会对服务器性能产生一定的影响，尤其是在处理大量并发请求时。
兼容性：有些浏览器或者网络环境可能对某些子域名设置有特殊的限制或者兼容性问题。在部署使用子域名的路由之前，最好进行充分的测试，以确保在各种主流设备和浏览器上都能正常工作。
一些需要保留的用户名或者分层进行路由处理。例如典型的www用户名，可能会使用户主页引向产品首页。还有比如github的security 用户，你打开他的主页就会跳转到 github.com/security 的页面。此外gitee也有类似的问题。

所以在设置用户路由或者用户页面时，需要首先考虑到安全性，其次就是功能性，这种可能影响到内容使用和系统安全的操作，用户体验或许需要向后排一排。

本地部署nexus3 搭建maven私服

作者: 搬砖日记
时间: 2024-12-13
分类: 服务器
评论

由于JFREG的一系列惊人操作，GITEE关闭maven功能，不得已，本地搭建以下maven服务。

准备工作：JDK （如果你的设备存在JDK环境，请忽略这部分。）

- 阅读剩余部分 -

Android Studio console 输出乱码解决

作者: 搬砖日记
时间: 2024-12-13
分类: android
评论

打开 Edit Custom VM Options ，打开方法有两种

1.双击shift键，输入ECVO或者Edit Custom VM Options

2024-12-13T03:33:02.png

2.或者手动打开用户名/AppData/Roaming/Google/AndroidStudiox.x/studio64.exe.vmoptions
然后把-Dfile.encoding=UTF-8添加进去

重启Android Studio即可

Android 的 v-a/b分区简单理解

作者: 搬砖日记
时间: 2024-12-13
分类: android
评论

基础理解

我们可以直接把v-a/b分区理解成，当你在使用手机，进行系统升级，系统会把升级内容存放在A分区，你继续使用B分区，前面的V就是虚拟的意思（virtual）。在尽量不影响你使用的开机情况下进行升级，取消了在rec分区进行升级的复杂操作

- 阅读剩余部分 -