綁定帳號登入

Android 台灣中文網

打印 上一主題 下一主題

[知識] 【WEB網站教學】教你為網站添加外連網址的檢測!

[複製連結] 查看: 19761|回覆: 0|好評: 0
跳轉到指定樓層
樓主
510208PGB | 收聽TA | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
發表於 2023-6-18 12:28

馬上加入Android 台灣中文網,立即免費下載應用遊戲。

您需要 登錄 才可以下載或查看,沒有帳號?註冊

x
[color=var(--ast-global-color-2)][size=2.625]原文網址:https://pse.is/510208site導言
網路上有許多教學網站,都帶有外連網址的安全檢測,510208我一度也想做做看,但網路上怎麼也找不到教學,連老舊的版本都沒有!於是我靠自己摸索,成功找到了方法!以下是簡單教學,希望可以讓更多站長們放更多廣告(痾不對,是寫更多好文章/

在那之前
在開始之前,麻煩先安裝開發環境,如我常用的[color=var(--ast-global-color-0)]Visual Studio Code([url]https://code.visualstudio.com/)[/url],並安裝擴充功能(我一般會安裝[color=var(--ast-global-color-0)]Live Server方便操作)
先試試看水溫
點擊底下連結看看我自己的版本怎麼樣?
[color=var(--ast-global-color-0)]https://google.com
[color=var(--ast-global-color-5)][backcolor=var(--ast-global-color-2)]https://google.com


Tips!按鈕部分時候會造成小Bug開始!
請定位到以下Github儲存庫
[color=var(--ast-global-color-5)][backcolor=var(--ast-global-color-2)]GitHub儲存庫位址


將所有檔案下載下來,這些檔案會形成以下樣式:

                               
登錄/註冊後可看大圖
上面會出現調用網站檢查函數失敗或無有效參數,請開發者檢查網站軟體狀況只是因為你沒給他網頁參數,把網址改為以下樣式試試看:
[size=0.875]<檔案路徑>?url=https://google.com
你將會看到這樣子:

                               
登錄/註冊後可看大圖
這樣就成功了,你如果有問題載不了這個檔案,也可以製作以下的代碼貼上:
[size=0.875]<!DOCTYPE html><html>    <head>        <title>外部網站安全檢查</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="style.css">        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>        <!-- 檢查使用者索引的網站網址 -->        <!-- 調用VT API -->        <script>            $(document).ready(function() {                var url = getParameterByName('url');                if (url) {                    url = normalizeURL(url);                    $('#site-url').text(url);                    $('#confirm-button').attr('href', url);                } else {                    $('#site-url').text('調用網站檢查函數失敗或無有效參數,請開發者檢查網站軟體狀況');                    $('#confirm-button').attr('href', 'about:blank');                }                $('#confirm-button').on('click', function() {                    window.location.href = url;                });                // 其他程式碼...                function getParameterByName(name, url) {                    if (!url) url = window.location.href;                    name = name.replace(/[\[\]]/g, '\\$&');                    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),                        results = regex.exec(url);                    if (!results) return null;                    if (!results[2]) return '';                    return decodeURIComponent(results[2].replace(/\+/g, ' '));                }                function normalizeURL(url) {                    if (!/^https?:\/\//i.test(url)) {                        url = "http://" + url;                    }                    return url;                }            });        </script>    </head>    <body>        <div class="containerSelf">            <div class="content">                <img src="image/logo.svg" width="200px" height="200px">                <h1>您即將訪問以下網站</h1>                <p>  </p>                <p id="site-url">調用網站檢查函數失敗或無有效參數,請開發者檢查網站軟體狀況</p>                <p>  </p>                <button id="confirm-button">確認前往</button>            </div>        </div>        <div class="footer">            <p>© 2023 510208 PenguinBrother. All rights reserved.</p>            <a href="https://storyset.com/online">Online illustrations by Storyset</a>        </div>            </body>    </html>
將以上檔案存成index.html檔案,底下這個是style.css的內容
[size=0.875]@font-face {    font-family: YaheiConsola;    src: url('/font/font.ttf') format('truetype'),         url('/font/font.woff') format('woff'),         url('/font/font.woff2') format('woff2');    /* 添加其他字型格式,以支援不同的瀏覽器 */}body {        font-family: YaheiConsola, 'Courier New', monospace;        margin: 0;        padding: 0;}h1, h2, p {        text-align: center;}.warning {        color: red;        font-weight: bold;}p#site-url {        background-color: #636363;        padding: 10px;        margin: 0;        text-align: center;        padding-bottom: 10px;        width: 80%;        margin-left: auto;        margin-right: auto;}h1 {        text-align: center;}button {        display: block;        margin: 0 auto;        padding: 10px 20px;        font-size: 16px;        border: none;        border-radius: 4px;        background-color: #005813;        color: #fff;        cursor: pointer;}button:hover {        background-color: #1c4b00;}body {        font-family: Arial, sans-serif;        margin: 0;        padding: 0;    background-color: rgb(9, 56, 0);    font-family: YaheiConsola, 'Courier New', monospace;}.containerSelf {        display: flex;        align-items: center;        justify-content: center;        height: 100vh;        width: 90%;        margin: 0 auto;}.content {        width: 80%;        text-align: center;    color: lightgray;}h1, p, button {        text-align: center;}h1, p {        margin: 0;}button {        margin-top: 20px;        padding: 10px 20px;        font-size: 16px;        border: none;        border-radius: 4px;        background-color: #134200;        color: #fff;        cursor: pointer;}button:hover {        background-color: #004216;}.footer {    position: fixed;    bottom: 0;    left: 0;    width: 100%;    background-color: #333333;    color: #ffffff;    text-align: center;    padding: 20px;    z-index: 9999; /* 確保頁尾在最上層 */}.footer p {    margin: 0;}a {    color: #6699cc; /* 調整顏色值為您想要的淺,如果你這麼自    }@keyframes flashing {    0% { color: red; }    50% { color: transparent; }    100% { color: red; }}.flashing {    animation: flashing 1s infinite;}
很好,再來請將它傳進自己的網站空間裡即可,注意不要修改footer中的內容,那是我的版權聲明,我有規定囉!
Tips!記得在根目錄下image資料夾放入一個logo.svg來代替原本的圖片檔,如果你這麼做,就可以把底下<a href="https://storyset.com/online">Online illustrations by Storyset</a>這行刪掉啦!Tips!如果要用Noto Sans TC(這個網站的字體)當頁面字體的話,記得在根目錄底下font資料夾放入以下三個檔案:font.ttf、font.woff、font.woff2這三個檔案在Github頁面裡面有,網址上面有給。傳到GITHUB PAGES空間中
首先,你要有Github帳戶(廢話),網址在這:[color=var(--ast-global-color-0)]https://github.com/signup

                               
登錄/註冊後可看大圖
註冊好了以後,建立一個新的repo,設定如下:

                               
登錄/註冊後可看大圖
再來會出現Upload Files點下去
然後把剛剛的檔案扔上去,最後按下Commit Changes即可(一直忘記截圖XD)
啟用GITHUB PAGES

                               
登錄/註冊後可看大圖

                               
登錄/註冊後可看大圖
之後再等一陣子,就可以直接存取了,網址如下:
[size=0.875]https://<username>.github.io/<repo name>
  • <username>:帳號名稱(我是510208)
  • <repo name>:儲存庫名稱(我是safecheck)
  • 因此,我就是:https://510208.github.io/safecheck
WORDPRESS網站配置
先切到這:

                               
登錄/註冊後可看大圖

                               
登錄/註冊後可看大圖
[size=0.875]/* * 設定外連網址自動編輯 */function modify_button_link($block, $editor_block_type) {    if ($editor_block_type->name === 'core/button') {        $block['url'] = 'https://510208.github.io/safecheck/index.html?url=' . $block['url'];    }    return $block;}add_filter('block_editor_block_edit', 'modify_button_link', 10, 2);function replace_external_urls_with_custom_format($content) {    $pattern = '/(<a\s+[^>]*href=[\'"])(https?:\/\/[^\s"\']+)/i';    $replacement = '$1https://510208.github.io/safecheck/index.html?url=$2';    $content = preg_replace($pattern, $replacement, $content);    return $content;}add_filter('the_content', 'replace_external_urls_with_custom_format');add_filter('widget_text_content', 'replace_external_urls_with_custom_format');
Alert!貼在最下面!!Alert!底下記得按下儲存設定喔!!結語
完成,我也不知道寫啥好,掰掰

「用Android 就來APK.TW」,快來加入粉絲吧!
Android 台灣中文網(APK.TW)

style.css

2.06 KB, 下載次數: 0, 下載積分: 碎鑽 -1 個

網站主題檔案

safecheck-main.zip

10.55 KB, 下載次數: 0, 下載積分: 碎鑽 -1 個

所有檔案的壓縮包

收藏收藏 分享分享 分享專題
用Android 就來Android 台灣中文網(https://apk.tw)
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則