整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tmlq能夠對 HTML 數據進行 sed 或 grep 操作。我們可以使用 htmlq 搜索、切片和過濾 HTML 數據。讓我們看看如何在 Linux 或 Unix 上安裝和使用這個方便的工具并處理 HTML 數據。 |
什么是htmlq？
htmlq類似于 jq，但用于 HTML。使用 CSS 選擇器從 HTML 文件中提取部分內容。在 CSS 中，選擇器用于定位我們想要設置樣式的網頁上的 HTML 元素。例如，我們可以使用此工具輕松提取圖像或其他 URL。
安裝htmlq
首先需要在系統中安裝cargo然后使用cargo來安裝htmlq：
[root@localhost ~]# yum -y install cargo
[root@localhost ~]# cargo install htmlq
設置可執行的路徑
確保將 $HOME/.cargo/bin 添加到 PATH 變量中，以便能夠使用 export 命令運行已安裝的二進制文件：
[root@localhost ~]# echo 'export PATH="$PATH:$HOME/.cargo/bin"' >> ~/.bash_profile
[root@localhost ~]# . ~/.bash_profile
如何使用 htmlq 從 HTML 文件中提取內容？
下面是使用curl和htmlq的用法：
curl -s url | htmlq '#css-selector'
curl -s url2 | htmlq '.css-selector'
curl -s https://www.linuxprobe.com | htmlq --pretty '#content' | more
讓我們找到頁面中的所有鏈接。例如：
[root@localhost ~]# curl -s https://www.linuxprobe.com | htmlq --attribute href a
人性化顯示HTML:
[root@localhost ~]# curl --silent https://mgdm.net | htmlq --pretty '#posts'
幫助手冊
使用下面命令查看幫助頁面：
[root@localhost ~]# htmlq --help
htmlq 0.3.0
Michael Maclean <michael@mgdm.net>
Runs CSS selectors on HTML
USAGE:
htmlq [FLAGS] [OPTIONS] [selector]...
FLAGS:
-B, --detect-base Try to detect the base URL from the <base> tag in the document. If not found, default to
the value of --base, if supplied
-h, --help Prints help information
-w, --ignore-whitespace When printing text nodes, ignore those that consist entirely of whitespace
-p, --pretty Pretty-print the serialised output
-t, --text Output only the contents of text nodes inside selected elements
-V, --version Prints version information
OPTIONS:
-a, --attribute <attribute> Only return this attribute (if present) from selected elements
-b, --base <base> Use this URL as the base for links
-f, --filename <FILE> The input file. Defaults to stdin
-o, --output <FILE> The output file. Defaults to stdout
ARGS:
<selector>... The CSS expression to select [default: html]
總結
htmlq能夠對 HTML 數據進行 sed 或 grep 操作。我們可以使用 htmlq 搜索、切片和過濾 HTML 數據。
尋找熱愛表達的你#
"一鍵將網頁截圖制作成HTML網頁"是指一種技術，它允許用戶通過簡單的操作，將網頁的截圖轉換成HTML代碼的網頁。這通常涉及到自動布局、樣式提取和代碼生成。以下是實現這一功能的相關技術和步驟：
1. 截圖捕捉：首先，需要有一個方法來捕捉網頁的截圖，這可以通過瀏覽器插件、屏幕捕獲工具或專門的應用程序來完成。
2. 圖像處理：捕捉到的截圖可能需要進行預處理，比如裁剪、壓縮或調整分辨率，以確保圖像的質量。
3. 元素識別：使用圖像識別技術來分析截圖，識別網頁中的元素，比如文本、按鈕、圖片等。
4. 布局分析：基于識別出的元素，分析頁面的布局信息，包括元素的大小、位置和層級。
5. 樣式解析：提取頁面的樣式信息，包括顏色、字體、間距等，并將它們轉換為CSS代碼。
6. HTML生成：根據布局和樣式信息，生成HTML結構代碼，將截圖中的元素轉換為HTML標簽。
7. 代碼優化：對生成的HTML代碼進行優化，確保代碼的可讀性、維護性和性能。
8. 響應式設計：確保生成的網頁代碼能夠適應不同的屏幕尺寸和設備，實現響應式布局。
9. 交互性實現：如果截圖中的頁面包含交互元素，需要添加相應的JavaScript代碼來實現這些交互。
10. 一鍵操作：提供一個簡單的用戶界面，用戶只需點擊一個按鈕，就可以完成截圖到HTML的轉換。
11. 預覽功能：在轉換過程中提供實時預覽，讓用戶可以實時看到轉換效果。
12. 自定義選項：允許用戶對生成的HTML代碼進行自定義，比如修改布局、添加額外的樣式或功能。
13. 保存和導出：用戶可以保存或導出生成的HTML代碼，以便進一步使用或分享。
14. 錯誤處理：在轉換過程中識別和處理潛在的錯誤，比如布局沖突或樣式問題。
15. 兼容性測試：確保生成的網頁在不同的瀏覽器和設備上都能正常顯示和工作。
16. 安全性考慮：生成的代碼應遵循安全最佳實踐，避免潛在的安全風險。
17. 用戶反饋：收集用戶反饋，不斷改進轉換算法和用戶體驗。
18. 開源和社區支持：作為開源項目，鼓勵社區參與貢獻代碼和改進功能。
這種一鍵轉換技術可以大大提高網頁開發的效率，尤其是對于快速原型設計和演示目的。然而，需要注意的是，自動生成的代碼可能需要進一步的人工審查和調整，以確保最終產品的質量和性能。此外，一些復雜的網頁效果和動態交互可能需要手動編寫代碼來實現。
在完成了花架子的搭建之后，現在需要看一下前端的Html代碼了。
Html代碼
打開這幾份代碼進行橫行對比，可以發現里面好大一部分都是一樣的
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="author" content="Kodinger"> 6 <title>My Login Page — Bootstrap 4 Login Page Snippet</title> 7 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 8 <link rel="stylesheet" type="text/css" href="css/my-login.css"> 9</head> 10<body class="my-login-page"> 11 <section class="h-100"> 12 <div class="container h-100">
每一個的頭部都是這樣的，作為一個懶惰的程序員，當然是要把他們拎出來了。
我們寫一個base.html來當作模版。
以forgot.html為例，可以看出只有紅框框選中的地方和其他幾個文件不一樣
forgot
那么我們的base.html可以寫出這樣
1{% load static %}
2<!DOCTYPE html>
3<html>
4<head>
5 <meta charset="utf-8">
6 <meta name="author" content="Kodinger">
7 <title>
8 {% block title %}
9 登錄
10 {% endblock %}
11 </title>
12 <link rel="stylesheet" type="text/css" href={% static 'bootstrap/css/bootstrap.min.css' %}>
13 <link rel="stylesheet" type="text/css" href={% static 'css/my-login.css' %}>
14</head>
15<body class="my-login-page">
16<section class="h-100">
17 <div class="container h-100">
18 {% block main %}
19
20 {% endblock %}
21 </div>
22</section>
23
24<script src={% static "js/jquery.min.js" %}></script>
25<script src={% static "bootstrap/js/bootstrap.min.js" %}></script>
26<script src={% static "js/my-login.js" %}></script>
27</body>
28</html>
留出了{% block main %} {% endblock %}來擺放差異的內容
模塊化后的forgot
新的forgot.html如圖所示。
同理，完成其他幾個html的模版提取。
編寫代碼可以通過url訪問幾個頁面
首先是首頁
有兩種方式可以實現：
1from django.shortcuts import render 2from django.views import View 3 4class LoginView(View): 5 def get(self, request): 6 return render(request, 'login/index.html')
定義類視圖的路由：
1from django.urls import path
2from . import views
3
4urlpatterns=[
5 path('', views.LoginView.as_view(), name='login'),
6]
同理，完成其他幾個頁面的類視圖GET代碼編寫：
1from django.shortcuts import render 2from django.views import View 3 4 5class LoginView(View): 6 def get(self, request): 7 return render(request, 'login/index.html') 8 9 10class ForgotView(View): 11 def get(self, request): 12 return render(request, 'login/forgot.html') 13 14 15class RegisterView(View): 16 def get(self, request): 17 return render(request, 'login/register.html') 18 19 20class ResetView(View): 21 def get(self, request): 22 return render(request, 'login/reset.html')
路由配置
1from django.urls import path
2from . import views
3
4urlpatterns=[
5 path('', views.LoginView.as_view(), name='login'),
6 path('forgot/', views.ForgotView.as_view(), name='forgot'),
7 path('register/', views.RegisterView.as_view(), name='register'),
8 path('reset/', views.ResetView.as_view(), name='reset'),
9]
下面修改index.html里面的a標簽完成頁面上直接跳轉
image.png
改為 <a href={% url 'forgot' %} class="float-right">
同理找到全部需要修改的a標簽
運行后點擊頁面上僅有的幾個按鈕測試跳轉是否正常。
再把里面的一些英文改成中文，到此這個抄來的前端頁面，大半都變成我們自己的東西了。
本土化
以上就完成了頁面模版的提取與簡單的類視圖。
后續再講POST的實現。
由于代碼的量已經增加的有點多，全部貼出來不太美觀，所以上庫進行版本管理量。
Git地址：https://github.com/zx490336534/Zxapitest.git
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
