我想為 Github README 創建一個徽章（例如，像這個）。我創建了一個函式，使用JavaScript從URL中獲取GET值，并將其放入SVG中，當我在本地嘗試時，它是有效的，但如果我將其放入Markdown檔案中，它不會改變數字。
! [No](http://luigitest.altervista.org/widget/font.svg?years=9)
index.svg:
< svg width="200" 高度="75"/span> xmlns="http: //www. w3.org/2000/svg"/span>
xmlns:xlink="http://www.w3.org/1999/xlink"/span>
style="-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" >
<g>/span>
< rect x="0" y="0" width="125" height="75" style="fill: #F84949F5"></rect>>
<text x="0"/span> y="37. 5" font-family="Segoe UI" font-size="16" font-weight="bold" fill="white">
<tspan x="62. 5" text-anchor="middle" dy="-3。 5%">我開始</tspan>/span>
<tspan x="62. 5" text-anchor="middle" dy="25%"> 編程</tspan>
</text>/span>
< rect x="124" y="0" width="75" height="75" style=fill。 #F84949"></rect>/span>
< text x="124" y="75" font-family="Segoe UI" 字體大小="13" fill="white" font-weight="bold">
<tspan x="162. 5" text-anchor="middle" y="45。 891675" font-size="40" id="年號"> 5</tspan>
<tspan x="162. 5" text-anchor="middle" y="67。 5" font-weight="bold">幾年前</tspan>
</text>/span>
</g>/span>
<script xlink:href="script.js" />
</svg>
script.js:
function changeNumber() {
document.getElementById("year-number").textContent = getValue;
}
let getValue。
window.addEventListener("load", function（） {
let name="year";
if(name=(new RegExp(' [? &]' encodeURIComponent(name) '=([^&]*)').exec（ location.search)
getValue = decodeURIComponent（name[1]）。
changeNumber()。
});
在瀏覽器中的輸出。 正確的輸出
在markdown中的輸出（正確的）。 錯誤的輸出
我怎樣才能解決這個問題呢？
uj5u.com熱心網友回復：
你可以使用模板svg和pupa創建一個無服務器函式。
Svg檔案：
...svg
<tspan x="162. 5" text-anchor="middle" y="45。 891675" font-size="40" id="年-數"> {years}</tspan>。
...svg
服務器端代碼：
// https://stackoverflow.com/questions/69164294/create-a-github-badge
import pupa from 'pupa'
import { readFileSync } from 'fs'
import { join } from 'path' { join }
import { dirname } from 'dirname-filename-esm'
const __dirname = dirname（import.meta）。
const template = readFileSync(join(__dirname, ' 。 ./badge.svg'), 'utf8')
export default （req, res）=> {
let { years } = req.query[/span]。
if (typeof years !== 'string'/span>) return res.status(400).end（)
res.setHeader('Content-Type'/span>, 'text/xml'/span>)
res.end(pupa(template, { years })
}
我使用Vercel來部署無服務器函式。除了Vercel，也有其他方法。
鏈接到復制。https://replit.com/@Programmerraj/serverless-api#api/index.js
鏈接到實際例子。https://serverless-api-ebon.vercel.app/api?years=6（將years改為任何內容）。
鏈接到GitHub repo。https://github.com/ChocolateLoverRaj/serverless-api。
在這個答案中用markdown撰寫的預覽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/317547.html
標籤：
上一篇：對不同的物體采用不同的模式