LearnWeb03-CSS01-基础CSS规则

LearnWeb03-CSS01-基础CSS规则

[!summary]+
在前文 web 入门中已经简单介绍了 CSS 是如何起作用,如何与 HTML 进行相互合作的,本篇主要简单介绍如何编写 CSS 文件中的各种样式。

ref: mdn css入门 | MDN css属性大全

在本文及后续的尝试中,都使用单独 CSS 文件外挂的格式,该种格式的结构会更清晰,即将下述代码放入 HTML 文件的 Head 部分。

1
<link rel="stylesheet" href="styles/style.css" />

href 部分需要替换为自己实际存放 css 文件的地址即可,此外也简单重复一下剩下的两种使用 CSS 的方式:内部样式表和内联样式表

  • 内部样式表即在 HTML 的 Head 部分添加 <style>your css code</style> 将 CSS 代码都包裹起来
  • 内联样式表即在特定元素中定义 style 属性,<p style="your css code"> 在 style 属性中填充需要的 CSS 代码。

接下来进入正文,讲解 css 部分的组成和编写规则。

Pattern 基础范式

The Principle to Write Css.

image.png

这是一个最基本的 CSS 结构,更为专业的名称是 CSS 规则集(简称为规则),其组成分成一下几个部分:

  • 选择器 Selector:类似表格中的筛选,筛选这个规则使用的范围,针对 Class、ID、Tag 等不同类型有不同的选择器写法
  • 属性 Property: 选择要修改的属性,如颜色,大小,位置灯多重类型。
  • 属性值 Property value: 各种对应属性的取值,如具体的哪个颜色,字体多大等。
  • 声明 Declaration:由属性和属性值组成的一条单独的规则,指定一种特定的样式。

上述结构称为规则,因为其可以同时包含多个规则(即声明),编写时有以下约定:

  • 每个规则使用 ; 作为结尾的分割
  • 同一个规则集的规则需要编写在 {} 之中
  • 属性和属性值为 K-V 对,声明时使用 : 作为分割符,且属性和值均不区分大小写

注释方法

1
2
3
/*
all between those two symbol is comment.
*/

LearnWeb02-HTML01-基础的标签

LearnWeb02-HTML01-基础的标签

[!Intro]+
在 Web 入门,How HTML Work 部分已经简单介绍过,HTML 是一种定义内容结构的标记语言,通过一系列标记(确定其表现形式)和对应内容组成的元素,嵌套,排列,构成完整的页面。本文主要是整理和熟悉一下基础的标记元素

image.png

REF: HTML 入门

从上述图像可以看到一个基本的 HTML 元素的构成,元素的 Tag 可以包含属性,多个属性之间用空格隔开,Class 属性可以为元素标识名称,进而为其指定 Style 等。

属性通常为 K-V 键值对,attr=”value” 的形式呈现,这里引号可以是单或者双,甚至可以没有,但是没有引号有时候会导致问题,所以建议保持使用引号的风格去编写。

Head/Overview 部分

参考网站中的范例如下,一个基本的 HTML 文件有以下这些可以注意的地方:

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>
  • <head> 就如 cpp 中的 head 文件,定义一些不用于向用户显示的内容,给浏览器的关键词,字符集声明,页面描述等内容
  • <meta charset="utf-8"> 定义文档使用的字符串编码类型,utf-8 支持世界上大部分语言的渲染,避免因为中文等出现乱码的情况。
  • <meta name="viewport" content="width=device-width"> 视口元素,可以确保页面以视口宽度进行渲染,避免移动端浏览器上因页面过宽导致缩放。
  • <title> 对当前网页的描述和注解,显示在标签栏中,以及收藏时显示的文字
  • <body> 部分则是包含网站的全部需要显示的内容。

LearnWeb01-DevPipeline

LearnWeb01-DevPipeline

[!summary]+
Familiar with the pipeline of how to build a website, how to organize the files, etc…

Start Design

开始设计一个网站的时候,可以从以下三个方面入手来启动整个开发设计过程:网站的主题->基础的一些内容->整体的外观设计(草稿)

image.png

更具体一些:确定完要制作的网页,可以绘制草图有一个粗浅的整体效果,然后指定文本、图像、色彩、字体等资源,就可以开始制作了。

File Structure

关于项目中的文件命名,需要注意的是以下的三点,建议养成这样的规范去建立网页文件夹。

  • 建议使用完全小写来命名文件,webserver 是大小写敏感的,所以复杂的大小写关系容易导致访问不到文件。
  • 尽量不要使用空格,空格可能会破坏链接被视为两个文件等,如果没有被区分很多服务器也需要使用 %20 对空格进行替换
  • 尽量使用连字符代替下划线进行文件命名,google 搜索引擎将连字符作为单词的分割符,而不会识别下划线

而文件存储结构部分,通常而言,有以下的关键文件和文件夹结构,在很多场景下也会将 image 等文件夹放到 static 文件夹中。

  • index.html
  • styles: 存放 css 文件
  • images: 存放图片等媒体资源文件
  • scripts: 存放 js 等脚本代码文件

资源的文件路径一般而言以 html 为 Basepath,然后根据上下级关系确认索引地址即可。


LearnWeb00-Web入门

LearnWeb00-Web入门

[!summary]+
Web 前端开发者路线学习,基本的目的是能够为自己想做的项目搭建前端界面,从 web 开始再到各个移动设备的前端 UI,基于 Mdn 课程,Roadmap 具体项目逐步推进对各个知识点的学习。

根据下面的课程、Roadmap、搭建自己的知识架构,在搭建过程中结合具体的项目,包括自己部署的界面去逐步实践,完善和熟悉整个知识体系和技术栈,并通过和现代 AI 辅助工具的合作,建立自己独立的前端开发流。

Be Ready 准备以及基础了解

image.png

  • 基础:开发环境准备、页面设计、文件架构规划(由于网站需要包含多种代码、文本、素材、因此如何组织文件是相当重要的)
  • 语言:HTML 、CSS、JS 三驾马车为一个网页必不可少的要素,通过结合各自不同的功能来实现多样化的页面设计。

What’s WEB

What’s WEB? 通过 URL 统一资源定位符向服务器请求 HTML,HTML 通过包含的信息告诉 Browse 需要额外的信息来呈现该页面,因此基于 HTML 提供的信息 web browser 继续请求资源、CSS、JS 等文件,并将这些文件按照 HTML 的描述进行组合最终呈现完整的页面。


Windows Powershell 01 后台任务

Windows Powershell 01 后台任务

[!summary]+
有一些希望能在后台运行的任务,例如 nohup,tmux,screen 可实现的一些功能,简单介绍以下 powershell 中的类似用法和功能。

To run a Command Prompt (cmd.exe) command in the background from PowerShell and retrieve it later, similar to sessions in tmux, you can use PowerShell Jobs. PowerShell Jobs allow you to start a command or script in the background and then retrieve the results later. Here’s how you can do it:

从 PowerShell 在后台运行命令提示符 (cmd.exe) 命令并稍后检索它(与 tmux 中的会话类似),可以使用 PowerShell Jobs。 PowerShell Jobs 允许在后台启动命令或脚本,然后稍后检索结果。

具体的一些操作如下:

Start a Job in the background

使用 Start-Job 和 ScriptBlock 参数执行选定的命令

1
$job = Start-Job -ScriptBlock { pwsh.exe /c "your_command_here" }

这里将 your_command_here 改为自己需要执行的命令,例如启动局域网内可访问的 Stable-Diffusion Webui:

1
$job = Start-Job -ScriptBlock { pwsh.exe /c ".\webui.bat --xformers --listen" }

如果需要同时执行多条命令(例如执行 python 命令之前需要切换环境,默认为 base 环境)可以使用 &&

1
$job = Start-Job -ScriptBlock { pwsh.exe /c "conda activate flask && python .\app.py" }

StableDiffusionWebUI鉴权设计

StableDiffusionWebUI鉴权设计

[> [!summary]+

this article purpose is to build an authority page for stable diffusion webui using nginx & python/js. Which can publish my personal stable diffusion server. Wrote by GPT(try).

image.png

Introduction

In the digital age, the security and user-friendliness of web services are not just conveniences; they are necessities. Balancing robust security protocols with an engaging user experience is key to maintaining both the integrity and popularity of any online service. This blog post dives into the intricacies of securing web services using Nginx for authentication, coupled with designing an appealing frontend. Our journey begins with a practical scenario:

publishing a stable diffusion webUI service, accessible only to an authenticated audience.

Setting Up Nginx for Secure Authentication

Nginx excels in serving web pages and as a reverse proxy, providing enhanced security through authentication mechanisms. Let’s explore a typical Nginx configuration for secure authentication:

  • /verify_token: This block forwards authentication requests to a dedicated server. By excluding the request body and focusing on essential headers, it ensures that only valid, authenticated requests proceed.
1
2
3
4
5
6
7
8
location = /verify_token {
proxy_pass http://{your_auth_server}:2424;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
proxy_set_header X-Original-URI $request_uri;
proxy_set_header X-Original-Remote-Addr $remote_addr;
proxy_set_header X-Original-Host $host;
}
  • /login: Catering to login requests, this configuration forwards the necessary details to the authentication server, preserving crucial information about the request’s origin.
1
2
3
4
5
6
7
location /login {
proxy_pass http://{your_auth_server}:2424;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
  • Error Handling (@error401): A clever redirect mechanism that guides unauthenticated users to the login page, keeping the original URL intact.
1
2
3
location @error401 {
return 302 {your_domain}/login;
}
  • Root Location (/): The gateway to your service, which rigorously checks each request for authentication, granting access only to verified users.
1
2
3
4
5
6
7
8
9
10
location / {
auth_request /verify_token;
error_page 401 = @error401;
proxy_pass http://{your_server}:2323/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

This setup not only fortifies your service against unauthorized access but also maintains a seamless user experience, redirecting unauthenticated users without hassle.


家庭服务器的备份工具选择

家庭服务器的备份工具选择

[!summary]+
在搭建了 Immich 服务之后,考虑到数据本身的重要性,又对硬盘本身的寿命和各种数据安全的场景有所顾虑,对加密备份的需求就浮出水面了,希望能有一个备份的预案来对抗各种数据风险,因此有本篇文章,对各种备份工具做简单调研和选择。

image.png

👾Intro 调研对象介绍

👍出场选手介绍,节选来自以下网站的备份方案:awesome-sysadmin-backup

为了备份大量包含隐私的图像信息,这里最基础的需求有以下几点:加密支持云端存储服务/Webdav,增量备份免费

额外如果能够支持以下的需求则额外加分:压缩去重平台一致性用户界面友好(备份状态检查等)

🏓Compare 特性对比

Name PSWD Zip Webdav Add Type ui Consis free rate
kopia y y y y Full y y y 🔥🔥🔥🔥🔥
urbackup y n n y C/S y y y 🔥
restic y n r/o y CLI n y y 🔥
duplicity y n y y CLI n n y 🔥🔥
duplicati y n y y Full y n y 🔥🔥🔥🔥
duplicacy y y y y Full y- y y- 🔥🔥🔥🔥🔥

家庭服务器整体方案

家庭服务器整体方案

[!summary]+
本文主要介绍笔者的家庭服务器设计方案 V1。该方案中中涵盖影视、图像、图书&文献、博客、智能家居管理、密码管理服务,以及公网上内容分发的初步设计和选择的考量。

整体架构

整个服务中心在设计的时候主要考虑以下的几个方面:

  • 💻操作设备&系统(OS)和内容存储方案:如何经济实惠的选择合适的设备和系统
  • 🌦️服务需求:需要搭建哪些服务,应该选择哪个服务进行自托管
  • 🌍部署方案:如何保证在局域网+公网都能顺利且安全的访问
  • 📱访问策略:各个平台上的访问方式的选择

此外,并非所有服务都需要在公网上进行部署,这里的部分服务可以仅用于局域网,由于仅开放了 Nginx 端口,因此从公网中访问不到未分发的内容,因此,部分存储与敏感信息相关的服务可以仅保留在局域网中进行访问。

[!note]+
在这种情况下如果希望能够使用一致的域名访问方式,是否可以考虑使用 Nginx 鉴权限制访问 ip 为内网 ip,其他公网访问直接丢弃?

初版家庭服务中心的架构图如下,(这里并非列出所有的服务组件),该架构图中所有的应用都是为了方便日常生活中的各项活动,下面会对架构图自底向上的做一些简单的说明。

image.png


树莓派家庭影音中心2

树莓派家庭影音中心2

禁止屏幕休眠显示作为 Dashboard 显示

树莓派官方的 Raspbian 系统使用的是 lightdm 桌面显示管理器,可以设置 xservice 桌面交互显示来达到屏幕常亮的目的,也就是修改桌面配置文件 lightdm.Conf

参考资料:树莓派设置禁止让屏幕休眠,显示器保持常亮状态-树莓派基础学习入门-树莓派极客,raspi.cc - Powered by raspi

1
sudo vim /etc/lightdm/lightdm.conf

找到 x-server-command 取消注释并在后面加 -s 0-dpms,添加完后重启即可。

image.png

参数里的:-s 参数:设置屏幕保护不启动,0 数字零,-dpms 参数:关闭电源节能管理。


破解本地自托管Emby服务

破解本地自托管Emby服务

Intro 问题描述

以 emby 为例,学习如何对这种自托管的服务,请求验证网站的软件进行破解,破解的整体思路分为以下的两类:

一种是改客户端,一种是改服务端。两种方式的最终原理一样,都是搭建仿冒认证服务器,客户端访问伪服务器拿到授权信息;【3】

因此无论是那种方法我们都需要搭建伪验证服务器:所以以下的操作是必须的:

  1. 抓取定位到验证服务器的地址,并获取验证服务器返回的验证信息格式;
  2. 使用 Nginx 搭建虚拟的验证服务器,使其返回激活/验证信息;

如果是修改客户端,则在搭建完验证站后需要:

  • 修改 Host 文件,将请求验证服务器的请求劫持到本地搭建的服务上;
  • 需要伪服务器和客户端都要安装自签名证书

如果是修改服务端,则后续需要:

  • 修改服务端源文件,将默认的认证服务器 mb3admin.com 地址直接改成伪服务器
  • 这样就不需要安装自签名证书

如果是使用 Docker 进行部署的 emby 可以使用别人修改好的服务端的镜像进行部署安装(like 开心版)

本文主要介绍验证服务器的搭建、修改客户端的方法,以及一些其他的注意事项;