本帖最后由 路人鬼 于 2018-12-27 22:46 编辑 <br /><br /><div id=main_20181227224601></div>
<!--这后面的数值为当前的年月日时分秒，秒数随意-->
*本站禁止HTML标签噢*
(function () {
var root = document.getElementById("main_20181227224601")
//生成系统
var TagGroup = function (comVar, tags, htmlTag, className, className2, htmlTag2="a") {
this.comVar = comVar
this.tags = tags
this.htmlTag = htmlTag
this.htmlTag2 = htmlTag2
this.className = className
this.className2 = className2
}
TagGroup.prototype.create = function(){
var _this = this
return {
view: function () {
return _this.tags.map(function (value, index) {
return m(_this.htmlTag, {
class: _this.comVar == index ? _this.className + ' ' + _this.className2 : _this.className,
onclick:
function () {
_this.comVar = index
},
},
m(_this.htmlTag2,value))
})
}
}
}
TagGroup.prototype.page = function(contents,tagName=""){
var _this = this
return {
view:function(){
return _this.tags.map(function(value,index){
return m(tagName,{style:_this.comVar == index ? "" : "display:none"},contents[index])
})
}
}
}
var 列表 = new TagGroup("",["欢迎词与寄语","社区地图","最新活动"],"li","li","gn-is-active","a[style=text-decoration:none]")
var 列表内容 = [
m("",m.trust(`
欢迎加入有爱的技术宅社区#5m
[p]
这里是很一只喜欢你的路人#28m
[p]
欢迎来戳或者来地下研究所找我玩唷#19m
`)),
m("",m.trust(`
社区很大小心迷路{:43_8915:}#28m
[p]
请不要大意地阅读社区规定#7055!
[p]
防止踩雷请戳这里#7086!
[p]
地图奉上请随意造访社区各地
[p]
这里是懒人通道哦
[p]
`)),
m("",m.trust(`
即将开启元旦狂欢活动，敬请期待#7172!
[p]
`)),
]
var home = function () {
return {
view: function () {
return m("", [
m("section.gn-hero.gn-is-black", [
m(".gn-hero-body", [
m(".gn-has-text-centered", [
m("h1[style=font-size:28px].gn-title", "欢迎加入技术宅社区♪(･ω･)ﾉ"),
m("h2.gn-subtitle", "迎新大队：@路人鬼")
])
]),
m(".gn-hero-footer", [
m("nav.gn-tabs.gn-is-boxed.gn-is-fullwidth", [
m("", m("ul[style=margin:0;padding:0]", [
/* m("li.gn-is-active", m("a[style=text-decoration:none]", "欢迎词与寄语")),
m("li", m("a[style=text-decoration:none]", "最新活动")),
m("li", m("a[style=text-decoration:none]", "社区地图")),
m("li", m("a[style=text-decoration:none]", "社区介绍")), */
m(列表.create())
]))
])
])
]),
m("gn-section",[
m(列表.page(列表内容))
])
])
}
}
}
m.mount(root, home)
})()
</script>
[查看全文]

本帖最后由 千梦 于 2018-10-15 17:20 编辑 <br /><br /><div id=main_20181015230001></div>
<!--这后面的数值为当前的年月日时分秒，秒数随意-->
*本站禁止HTML标签噢*
(function () {
var root = document.getElementById("main_20181015230001")
//生成系统
var TagGroup = function (comVar, tags, htmlTag, className, className2, htmlTag2="a") {
this.comVar = comVar
this.tags = tags
this.htmlTag = htmlTag
this.htmlTag2 = htmlTag2
this.className = className
this.className2 = className2
}
TagGroup.prototype.create = function(){
var _this = this
return {
view: function () {
return _this.tags.map(function (value, index) {
return m(_this.htmlTag, {
class: _this.comVar == index ? _this.className + ' ' + _this.className2 : _this.className,
onclick:
function () {
_this.comVar = index
},
},
m(_this.htmlTag2,value))
})
}
}
}
TagGroup.prototype.page = function(contents,tagName=""){
var _this = this
return {
view:function(){
return _this.tags.map(function(value,index){
return m(tagName,{style:_this.comVar == index ? "" : "display:none"},contents[index])
})
}
}
}
var 列表 = new TagGroup("",["欢迎词与寄语","社区地图","最新活动"],"li","li","gn-is-active","a[style=text-decoration:none]")
var 列表内容 = [
m("",m.trust(`
欢迎小可爱加入技术宅社区~
这是迎新大队可爱的千梦君
有任何问题都可以艾特或者私信我
`)),
m("",m.trust(`
技术宅社区违规处理办法【2018版 试行】
【导航】社区地图 - 版块一览表
「迎新大队」登记审核办公室
◇◆◇◆这里是可以刷任务刷回复的地方◆◇◆◇
升级技术宅社区懒人用户租
◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣◢◣`)),
m("",m.trust(`
<①)>⑧<国庆♪活动总贴
◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶
◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶
`)),
]
var home = function () {
return {
view: function () {
return m("", [
m("section.gn-hero.gn-is-danger", [
m(".gn-hero-body", [
m(".gn-has-text-centered", [
m("h1[style=font-size:28px].gn-title", "欢迎加入技术宅社区♪(･ω･)ﾉ"),
m("h2.gn-subtitle", "迎新大队：@千梦")
])
]),
m(".gn-hero-footer", [
m("nav.gn-tabs.gn-is-boxed.gn-is-fullwidth", [
m("", m("ul[style=margin:0;padding:0]", [
/* m("li.gn-is-active", m("a[style=text-decoration:none]", "欢迎词与寄语")),
m("li", m("a[style=text-decoration:none]", "最新活动")),
m("li", m("a[style=text-decoration:none]", "社区地图")),
m("li", m("a[style=text-decoration:none]", "社区介绍")), */
m(列表.create())
]))
])
])
]),
m("gn-section",[
m(列表.page(列表内容))
])
])
}
}
}
m.mount(root, home)
})()
</script>
[查看全文]

HTML功能目前只有版主有权限使用┭┮﹏┭┮
@千梦  @丶蓝堇  @月夜琉璃猫 @戴蒙先生 @nolan123 @tony168 @F丶异声 @Doooog @HujiDesune
不过好像这个迎新模板手机看不到@@3!!
[查看全文]

#使用说明：
1. 代码中所有的中文展示部分均可修改定制成任意文字
2. 使用前开启HTML功能
3. div的id请按照注释提示修改成当前日期时间 root后面的id也请一并修改
4. 颜色定制：默认提供如图所示的背景颜色
White
■■■■■■■■■■■■■
Black
■■■■■■■■■■■■■
Light
■■■■■■■■■■■■■
Dark
■■■■■■■■■■■■■
Primary
■■■■■■■■■■■■■
Link
■■■■■■■■■■■■■
Info
■■■■■■■■■■■■■
Success
■■■■■■■■■■■■■
Warning
■■■■■■■■■■■■■
Danger
■■■■■■■■■■■■■
要修改颜色，将代码中的primary替换为其他颜色名称即可，注意全小写
即将 m("section.gn-hero.gn-is-primary" 这里的 primary 替换成 info 等颜色代号
5. 其中的标签内容允许修改和使用HTML或Discuz代码，即这部分：
var 列表内容 = [
m("",m.trust(`这里是欢迎词与寄语`)),
m("",m.trust(`这里是社区地图`)),
m("",m.trust(`这里是最新活动`)),
]
其中的汉字可以替换成在现成帖子里编辑完毕的Discuz代码，复制粘贴过来即可，比如替换为：
var 列表内容 = [
m("",m.trust(`[align=center]这里是欢迎词与寄语[/align]
[p]我是第一段[/p]
[p]我是第二段[/p]
`)),
m("",m.trust(`这里是社区地图`)),
m("",m.trust(`这里是最新活动`)),
]
注意只能修改``之间的部分，外包括号请勿修改
6. 列表内容中的三个m分别对应三个标签点击后的切换内容
7. 开发者备注：技术宅内现可以使用Mithril.js框架和Bulma CSS样式库，相关参考文档请参阅：
[1] http://www.mithriljs.net/ https://mithril.js.org/
[2] https://bulma.io/documentation/
所有的CSS样式类名均要加上前缀 gn00-
比如class=button将修改为class=gn00-button以此类推
更多样式参考bulma文档即可
[查看全文]

<div id=main_20180907230001></div>
<!--这后面的数值为当前的年月日时分秒，秒数随意-->
*本站禁止HTML标签噢*
(function () {
var root = document.getElementById("main_20180907230001")
//生成系统
var TagGroup = function (comVar, tags, htmlTag, className, className2, htmlTag2="a") {
this.comVar = comVar
this.tags = tags
this.htmlTag = htmlTag
this.htmlTag2 = htmlTag2
this.className = className
this.className2 = className2
}
TagGroup.prototype.create = function(){
var _this = this
return {
view: function () {
return _this.tags.map(function (value, index) {
return m(_this.htmlTag, {
class: _this.comVar == index ? _this.className + ' ' + _this.className2 : _this.className,
onclick:
function () {
_this.comVar = index
},
},
m(_this.htmlTag2,value))
})
}
}
}
TagGroup.prototype.page = function(contents,tagName=""){
var _this = this
return {
view:function(){
return _this.tags.map(function(value,index){
return m(tagName,{style:_this.comVar == index ? "" : "display:none"},contents[index])
})
}
}
}
var 列表 = new TagGroup("",["欢迎词与寄语","社区地图","最新活动"],"li","li","gn-is-active","a[style=text-decoration:none]")
var 列表内容 = [
m("",m.trust(`这里是欢迎词与寄语`)),
m("",m.trust(`这里是社区地图`)),
m("",m.trust(`这里是最新活动`)),
]
var home = function () {
return {
view: function () {
return m("", [
m("section.gn-hero.gn-is-primary", [
m(".gn-hero-body", [
m(".gn-has-text-centered", [
m("h1[style=font-size:28px].gn-title", "欢迎加入技术宅社区♪(･ω･)ﾉ"),
m("h2.gn-subtitle", "迎新大队：@Blue_Sdo")
])
]),
m(".gn-hero-footer", [
m("nav.gn-tabs.gn-is-boxed.gn-is-fullwidth", [
m("", m("ul[style=margin:0;padding:0]", [
/* m("li.gn-is-active", m("a[style=text-decoration:none]", "欢迎词与寄语")),
m("li", m("a[style=text-decoration:none]", "最新活动")),
m("li", m("a[style=text-decoration:none]", "社区地图")),
m("li", m("a[style=text-decoration:none]", "社区介绍")), */
m(列表.create())
]))
])
])
]),
m("gn-section",[
m(列表.page(列表内容))
])
])
}
}
}
m.mount(root, home)
})()
</script>
[查看全文]