如何在網(wǎng)站中添加代碼 - 英深網(wǎng)建站

深網(wǎng)建站 www.gxyings.com

一、效果說明　　

建站網(wǎng)站可以支持包括百度網(wǎng)盟、淘寶客、凡客誠品等在內(nèi)的許多CPA（CPS等）類的廣告代碼，包括html，js等類型，還支持css代碼。

二、功能說明

【版本】插入代碼是一個付費功能，必須是展示中級版及以上的用戶才可以在自己的網(wǎng)站中添加源代碼。

【特殊】購買了域名，但是使用展示中級版以下用戶無法使用插入源代碼功能。

三、使用教程

目前網(wǎng)站添加代碼主要是兩個位置：1、模塊中的【插件代碼】模塊；2、設(shè)置中的【網(wǎng)站插件代碼】。以下分別介紹：

1. 插件代碼模塊

進(jìn)入電腦版網(wǎng)站設(shè)計頁面，點擊右側(cè)導(dǎo)航【模塊-新增模塊-高級-插件代碼】進(jìn)入添加代碼。

如第三方無特殊要求，插入代碼位置選擇“默認(rèn)”即可。

（注意：使用插件代碼模塊添加的代碼僅對當(dāng)前頁面有效果。）

2. 網(wǎng)站插件代碼設(shè)置

進(jìn)入電腦版網(wǎng)站設(shè)計頁面，點擊右側(cè)導(dǎo)航【設(shè)置-高級設(shè)置】進(jìn)入勾選開啟【網(wǎng)站插件代碼】，點擊【設(shè)置】按鈕進(jìn)入添加代碼。

如第三方無特殊要求，插入代碼位置選擇“默認(rèn)”即可。

（注意：使用高級設(shè)置中的網(wǎng)站插件代碼來添加的代碼會在全站顯示。）

四、代碼相關(guān)

① 在網(wǎng)站插件代碼的位置我們可以插入多個代碼，只需要每個代碼另起一行添加即可（代碼之間不要有沖突）。

② 請確認(rèn)代碼無誤，否則可能會導(dǎo)致您的網(wǎng)站出錯或影響打開速度。

③ 代碼是由第三方平臺提供，建站作為平臺提供自有的模塊功能，不提供代碼。

溫馨提示：由于使用的是第三方平臺的代碼，不排除代碼有時效性，建議您咨詢獲取代碼的平臺客服。如果過了生效時間還是不顯示，有可能是代碼不兼容，這個只能由您再調(diào)整嘗試或者您可以重新到代碼平臺去獲取新的代碼哦。

英深網(wǎng)建站 www.gxyings.com

avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨立的以 .js 結(jié)尾的文件中，然后通過 <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么標(biāo)簽的代碼會被忽略！！！如下代碼所示：

些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。

花了一點時間研究了一下各家的編輯器，規(guī)則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關(guān)鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進(jìn)，或者丟失顏色樣式。

所以，這就難了。先得找個支持代碼高亮的編輯器，仔細(xì)地選擇并復(fù)制代碼塊，復(fù)制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉(zhuǎn)換工具了。

因為瀏覽器操作系統(tǒng)剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。

先看軟件成品演示：

軟件用法：

1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉(zhuǎn)換的編程代碼。
3、點擊「復(fù)制高亮代碼塊」按鈕。

然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

下面是這個軟件的 aardio 源代碼：

import win.ui;
/*DSG{{*/
var winform=win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復(fù)制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網(wǎng)頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/

import web.view;
var wb=web.view(winform.webCtrl);

import win.clip.html;
wb.export({ 
    onHighlight=function(html,background,foreground){
        html=`<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
            + html + `</code></pre>`;

        html,count=string.replace(html,'\n',"<br>");
        if(!count){
            html=string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
        }
        var cb=win.clip.html();
        cb.write(html); 

        winform.setTimeout( 
            function(){
                winform.editCode.show(true);
                winform.webCtrl.show(false);
                winform.text="HTML 代碼塊生成工具 - 已復(fù)制高亮代碼塊到剪貼板，可在網(wǎng)頁直接粘貼";
            },1000); 
    };
    setLanguages=function(langs){
        winform.languages=langs;
    }  
})


winform.cmbLangs.onEditChange=function(){ 

    var text=string.lower(winform.cmbLangs.text);
    var items=table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
    winform.cmbLangs.autoComplete(items);  
}
winform.cmbLangs.editBox.disableInputMethod();

import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer=wsock.tcp.asynHttpServer(); 
httpServer.run(web.prism,{
    ["/index.html"]=/*****
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> 
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
    <script src="prism.js"></script>
    <script>
   function computedColorStyle(element, options={}) {

        Array.prototype.forEach.call(element.children,child=> {
            computedColorStyle(child, options);
        });

        const computedStyle=getComputedStyle(element);
        element.style["color"]=computedStyle.getPropertyValue("color");  
    }

    highlight=function(code,language){
        var html=Prism.highlight(code, Prism.languages[language], language);

        var codeEle=document.getElementById("code");
        codeEle.innerHTML=html;
        computedColorStyle(codeEle);

        const computedStyle=getComputedStyle(codeEle);  
        onHighlight(codeEle.innerHTML
            ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
            ,computedStyle.getPropertyValue("color"));
    }

    setLanguages( Object.keys(Prism.languages) );
    </script>
  </body> 
</html> 
    *****/
});

wb.go( httpServer.getUrl("/index.html"));

winform.button.oncommand=function(id,event){
    winform.text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
    winform.editCode.show(false);
    winform.webCtrl.show(true);

    wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}


winform.show();
win.loopMessage();

打開 aardio 創(chuàng)建工程，然后復(fù)制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：

這個軟件的原理：

1、首先通過 WebView2 調(diào)用 Prism.js 高亮代碼。為了可以內(nèi)存加載 Prism.js （支持生成獨立 EXE ），我寫了一個 aardio 擴展庫 web.prism 。關(guān)于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發(fā)獨立 EXE 程序

2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調(diào)用 getComputedStyle 獲取最終渲染的字體顏色屬性。

3、最后在 JavaScript 里調(diào)用 aardio 函數(shù)處理生成的 HTML 代碼塊，aardio 的任務(wù)是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調(diào)用 win.clip.html 將處理好的 HTML 復(fù)制到系統(tǒng)剪貼板：

import win.clip.html;

var cb=win.clip.html();
cb.write(html);

然后只要愉快地粘貼代碼塊就可以。

如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『復(fù)制全部到 HTML 代碼塊』就可以了：

在線咨詢

上一篇：2287.9萬中標(biāo)公告！深圳市大數(shù)據(jù)資源管理中心應(yīng)用
下一篇：jsp與jsp之間的跳轉(zhuǎn)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何在網(wǎng)站中添加代碼 - 英深網(wǎng)建站

您的項目需求