查看“︁Module:背景图片”︁的源代码

local p = {}
local getArgs = require('Module:Arguments').getArgs
local html = mw.html.create()
 
-- 内部图片响应式布局
function p.width(imgname, srcset)
	if not imgname then return "" end
	local width = {800, 1024, 1280, 1366, 1400, 1440, 1600, 1680, 1920} -- 常见屏幕宽度
	local imgwidth = mw.title.new('File:'..imgname).file.width
	local pieces = {}
	for i, v in ipairs(width) do
		if v < imgwidth then -- 比较屏宽与图片尺寸
			table.insert(pieces, srcset.." "..v.."w") -- 缩略图生成
		else break
		end
	end
	srcset = table.concat(pieces, ",")..","..srcset -- 组装缩略图
	return srcset
end
 
-- 动画效果
function p.animate(animate, position, action)
	if animate == "none" then return "" end
	local animateName = animate
	local actionhub = {
		['show'] = "2s",
		['shrink'] = "4s ease-out",
		['clear'] = "2s",
		['appear'] = "5s ease",
		['look'] = "5s ease",
		['look-top'] = "5s ease",
		['look-bottom'] = "5s ease",
	}
	local effect
	if animate == "look" then
		effect = (position == "top") and "look-bottom" or "look-top"
	else
		effect = action or animateName
	end
	if actionhub[effect] then
		return ";animation:"..animateName.." "..actionhub[effect]
	else
		return ";animation:"..animateName.." 2s"
	end
end
 
-- 主函数
function p.main(frame)
	local args = getArgs(frame)
	local obj_position, datasrc
	local imgname = args.url or args[1] or ""
	local imginside = frame:callParserFunction('filepath', imgname)
	local changelogo = ""
	-- 图片数据判定	
	if imginside ~= "" then
		datasrc = imginside
	else
		datasrc = args.url or args[1] or "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
	end
	-- 生成img标签
	if args.position then
		obj_position = "object-position:"..args.position
	else
		obj_position = "object-position:center center"
	end
	local imgele = html:tag("img")
			:attr("data-src", datasrc)
			:cssText( 'position:fixed;top:0;width:100%;height:100%;object-fit:cover;'..obj_position)
	if imginside ~= "" then
		imgele:attr("srcset", p.width(imgname, datasrc)) -- 响应式布局
	end
	-- 生成动画效果
	local animate = args.animate or "show" -- 动画效果-- 动画进行方式
	local animation = p.animate(animate, args.position, args.action)
	-- 背景颜色生成
	local color = args.color or "transparent"
	local backcolor = html:tag("div"):cssText( 'position:fixed;top:0;left:0;width:100%;height:100%;background:'..color..animation)
	-- make and shade
	local opacity = args.shade or 0
	local shadeColor = args.shadeColor or "#fff"
	local shadeval = "background:"..shadeColor..";opacity:"..opacity..animation
	local shade = html:tag("div"):cssText( 'position:fixed; top:0; width:100%; height:100%;'..shadeval)
	if args.make then
		local make = html:tag("div"):cssText( 'position:fixed; top:0; width:100%; height:100%; '..args.make)
		shade = tostring(make)..tostring(shade)
		imgele = "" -- make会遮住图片
	end
	-- display logo
	local displaylogo = args.displaylogo ~= "no" and "yes" or "no"
	-- 替换logo
	if args["logo-url"] then
		local logoUrl = frame:callParserFunction('filepath', args["logo-url"])
		changelogo = html:tag("span")
			:addClass("nomobile")
			:attr("id","wglogo")
			:attr("data-background-position",args["logo-position"])
			:attr("data-background-image", logoUrl and logoUrl or frame:callParserFunction('filepath', "ZhMoegirl15.2.png"))
		--对应原来的 false = False = ""
		if args["logo-size"] ~= "false" or args["logo-size"] ~= "False" then
			changelogo:attr("data-background-size",args["logo-size"])
		end
		changelogo = tostring(changelogo)..mw.getCurrentFrame():preprocess("{{#Widget:Wglogo}}")
   	 end
	-- 包装
	local backpic = html:tag("div")
		:addClass("nomobile sidebar-character")
		:cssText('display:none;width:100%;height:100%;top:0;left:0;z-index:-3;')
		:attr("data-displaylogo", displaylogo)
		:wikitext(tostring(backcolor)..tostring(imgele)..tostring(shade))
	return tostring(backpic)..tostring(changelogo)
end
 
return p