开启辅助访问 勋章商城切换到宽版
o(￣ヘ￣o＃) 任务菌(`へ´*)ノ懒人通道_(:3」∠)_签到领奖官方微博紧急反馈中心

有爱，有技术，有你^_^)y
╱人◕‿‿◕人╲订下契约（注册新用户）

合作站点账号登陆

QQ登录

只需一步，快速开始
快捷导航
技术宅社区 | Z站»家 › 宅区 › 新宅报到区 › 迎新大队 › 迎新模板样式库
返回列表 发新帖发新帖
查看: 1224|回复: 8
收起左侧

迎新模板样式库

[复制链接]
Blue_sdo

签到天数: 1056 天

连续签到: 17 天

[LV.10]以坛为家III

260

主题

224

好友

9万

积分

Webmaster

工作组

积分
97710

星座|天蝎座国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫1全职猎人|伊耳谜宫崎骏|千寻魔道祖师|金凌歌王|寿岭二Free|叶月渚野良神|雪音刀剑神域|诗乃刀剑神域|有纪刀剑神域|亚丝娜刀剑乱舞|狮子王
发表于 2018-9-7 22:50:46 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看，没有账号？╱人◕‿‿◕人╲订下契约（注册新用户）

x
回复

使用道具 举报

Blue_sdo

签到天数: 1056 天

连续签到: 17 天

[LV.10]以坛为家III

260

主题

224

好友

9万

积分

Webmaster

工作组

积分
97710

星座|天蝎座国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫1全职猎人|伊耳谜宫崎骏|千寻魔道祖师|金凌歌王|寿岭二Free|叶月渚野良神|雪音刀剑神域|诗乃刀剑神域|有纪刀剑神域|亚丝娜刀剑乱舞|狮子王
 楼主| 发表于 2018-9-16 00:47:55 | 显示全部楼层
  1. <div id=main_20180907230001></div>
  2.     <!--这后面的数值为当前的年月日时分秒，秒数随意-->
  3.     <script>
  4.         (function () {
  5.             var root = document.getElementById("main_20180907230001")

  7.              //生成系统
  8.             var TagGroup = function (comVar, tags, htmlTag, className, className2, htmlTag2="a") {
  9.                 this.comVar = comVar
  10.                 this.tags = tags
  11.                 this.htmlTag = htmlTag
  12.                 this.htmlTag2 = htmlTag2
  13.                 this.className = className
  14.                 this.className2 = className2                     
  15.             }
  16.             TagGroup.prototype.create = function(){
  17.                 var _this = this
  18.                 return {
  19.                     view: function () {
  20.                         return _this.tags.map(function (value, index) {
  21.                             return m(_this.htmlTag, {
  22.                                 class: _this.comVar == index ? _this.className + ' ' + _this.className2 : _this.className,
  23.                                 onclick:
  24.                                     function () {
  25.                                         _this.comVar = index
  26.                                     },
  27.                             },
  28.                                 m(_this.htmlTag2,value))
  29.                         })
  30.                     }
  31.                 }
  32.             }
  33.             TagGroup.prototype.page = function(contents,tagName=""){
  34.                 var _this = this
  35.                 return {
  36.                     view:function(){
  37.                         return _this.tags.map(function(value,index){
  38.                             return m(tagName,{style:_this.comVar == index ? "" : "display:none"},contents[index])
  39.                         })
  40.                     }
  41.                 }
  42.             }

  44.             var 列表 = new TagGroup("",["欢迎词与寄语","社区地图","最新活动"],"li","li","gn-is-active","a[style=text-decoration:none]")
  45.             var 列表内容 = [
  46.                 m("",m.trust(`这里是欢迎词与寄语`)),
  47.                 m("",m.trust(`这里是社区地图`)),
  48.                 m("",m.trust(`这里是最新活动`)),
  49.             ]

  51.             var home = function () {
  52.                 return {
  53.                     view: function () {
  54.                         return m("", [
  55.                             m("section.gn-hero.gn-is-primary", [
  56.                                 m(".gn-hero-body", [
  57.                                     m(".gn-has-text-centered", [
  58.                                         m("h1[style=font-size:28px].gn-title", "欢迎加入技术宅社区♪(･ω･)ﾉ"),
  59.                                         m("h2.gn-subtitle", "迎新大队：@Blue_Sdo")
  60.                                     ])
  61.                                 ]),
  62.                                m(".gn-hero-footer", [
  63.                                     m("nav.gn-tabs.gn-is-boxed.gn-is-fullwidth", [
  64.                                         m("", m("ul[style=margin:0;padding:0]", [
  65.                                             /* m("li.gn-is-active", m("a[style=text-decoration:none]", "欢迎词与寄语")),
  66.                                             m("li", m("a[style=text-decoration:none]", "最新活动")),
  67.                                             m("li", m("a[style=text-decoration:none]", "社区地图")),
  68.                                             m("li", m("a[style=text-decoration:none]", "社区介绍")), */
  69.                                             m(列表.create())

  71.                                         ]))
  72.                                     ])
  73.                                 ])

  75.                             ]),
  76.                             m("gn-section",[
  77.                                 m(列表.page(列表内容))
  78.                             ])
  79.                         ])
  80.                     }
  81.                 }
  82.             }
  83.             m.mount(root, home)
  84.         })()
  85.     </script>
复制代码
回复 支持 反对

使用道具 举报

Blue_sdo

签到天数: 1056 天

连续签到: 17 天

[LV.10]以坛为家III

260

主题

224

好友

9万

积分

Webmaster

工作组

积分
97710

星座|天蝎座国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫1全职猎人|伊耳谜宫崎骏|千寻魔道祖师|金凌歌王|寿岭二Free|叶月渚野良神|雪音刀剑神域|诗乃刀剑神域|有纪刀剑神域|亚丝娜刀剑乱舞|狮子王
 楼主| 发表于 2018-9-16 00:53:17 | 显示全部楼层
#使用说明：
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代码，即这部分：
  1. var 列表内容 = [
  2.                 m("",m.trust(`这里是欢迎词与寄语`)),
  3.                 m("",m.trust(`这里是社区地图`)),
  4.                 m("",m.trust(`这里是最新活动`)),
  5.             ]
复制代码

其中的汉字可以替换成在现成帖子里编辑完毕的Discuz代码，复制粘贴过来即可，比如替换为：
  1. var 列表内容 = [
  2.                 m("",m.trust(`[align=center]这里是欢迎词与寄语[/align]
  3. [p]我是第一段[/p]
  4. [p]我是第二段[/p]
  5. `)),
  6.                 m("",m.trust(`这里是社区地图`)),
  7.                 m("",m.trust(`这里是最新活动`)),
  8.             ]
复制代码

注意只能修改``之间的部分，外包括号请勿修改
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文档即可
回复 支持 反对

使用道具 举报

Blue_sdo

签到天数: 1056 天

连续签到: 17 天

[LV.10]以坛为家III

260

主题

224

好友

9万

积分

Webmaster

工作组

积分
97710

星座|天蝎座国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫1全职猎人|伊耳谜宫崎骏|千寻魔道祖师|金凌歌王|寿岭二Free|叶月渚野良神|雪音刀剑神域|诗乃刀剑神域|有纪刀剑神域|亚丝娜刀剑乱舞|狮子王
 楼主| 发表于 2018-9-16 01:17:28 | 显示全部楼层
HTML功能目前只有版主有权限使用┭┮﹏┭┮
@千梦  @丶蓝堇  @月夜琉璃猫 @戴蒙先生 @nolan123 @tony168 @F丶异声 @Doooog @HujiDesune

不过好像这个迎新模板手机看不到

点评

Doooog
感谢！！！  发表于 2018-9-18 21:03
Doooog
老大，这个代码我这里好像用不了（显示为空白）https://www.gn00.com/forum.php?mod=viewthread&tid=964021&page=1&extra=#pid32486835  发表于 2018-9-18 18:59
[发帖际遇]: Blue_sdo 把捡到的库洛牌交给了小樱，得到知世 2 枚 宅币的感谢。 幸运榜 / 衰神榜
回复 支持 反对

使用道具 举报

千梦

签到天数: 785 天

连续签到: 1 天

[LV.10]以坛为家III

62

主题

211

好友

21万

积分

版主

人心怎么能说变就变呢

积分
213589

阴阳师|安倍晴明阴阳师|酒吞童子宫崎骏|千寻宫崎骏|龙猫2刀剑神域|诗乃刀剑神域|有纪刀剑乱舞|狮子王刀剑乱舞|骨喰藤四郎魔卡少女樱|李小狼魔卡少女樱|木之本樱魔卡少女樱|月城雪兔PP|槙岛圣护Free|橘真琴K-ON|琴吹紬野良神|一岐日和国庆70周年纪念
发表于 2018-10-15 17:18:55 | 显示全部楼层
本帖最后由 千梦 于 2018-10-15 17:20 编辑

       

点评

千梦
试验成功，感谢蓝大。  发表于 2018-10-15 17:20
[发帖际遇]: 千梦 发帖时在路边捡到 2 枚 宅币，偷偷放进了口袋. 幸运榜 / 衰神榜
回复 支持 反对

使用道具 举报

路人鬼

签到天数: 126 天

连续签到: 1 天

[LV.7]常住居民III

14

主题

60

好友

3万

积分

区版主

积分
35598

一人之下|王也宫崎骏|龙猫1宫崎骏|吉吉宫崎骏|猫男爵宫崎骏|卡西法宫崎骏|波妞宫崎骏|白龙宫崎骏|龙猫3星座|双鱼座学园奶爸|鹿岛虎太郎
发表于 2018-12-27 22:40:44 | 显示全部楼层
本帖最后由 路人鬼 于 2018-12-27 22:46 编辑

自力更生，放弃，卒。
回复 支持 反对

使用道具 举报

返回列表 发新帖发新帖

本版积分规则

小黑屋|手机版|技术宅（基宅） ( 粤ICP备18082987号-1 | 浙公网安备 33010902001746号 )

GMT+8, 2024-4-26 04:05 , Processed in 6.168515 second(s), 19 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表