如何自定义StoreFront的访问页面 - Part3

我就是我 2022-02-09 12:49 266阅读 0赞

通过前面两个章节，我们已经了解到了如何通过StoreFront自带的管理控制台以及CSS完成对登录页面以及内容页面的自定义。本章节将介绍如何创建一些细化的设定，完成例如登录提示等功能。

很多时候用户在登陆页面上需要做一些登录提醒，例如，登录限制说明，或者一些公司通告等！

仍然是访问StoreFront服务器上的C:\\inetpub\\wwwroot\\Citrix\\<storename>Web\\custom 文件夹，

编辑scripts.js文件，

取消var 之前的/\* 和 /\* End of sample之前 \*/，使得在这组注释符号之间的内容生效。

[![wKiom1X6KmmyAg2FAAAYbqZjodM720.jpg][]][wKiom1X6KmmyAg2FAAAYbqZjodM720.jpg]

[![wKioL1X6LQGiT8XVAAAl8Em6-UE649.jpg][]][wKioL1X6LQGiT8XVAAAl8Em6-UE649.jpg]

编辑messgeTitle/messageText/okButton/Text信息，输入你期望的内容，并保存。

[![wKiom1X6Kzehfl7oAADR0ie8y-o801.jpg][]][wKiom1X6Kzehfl7oAADR0ie8y-o801.jpg]

在StoreFront主机的cmd窗口中运行IISREST，是配置生效。（更改scripts.js需要充值IIS，修改style.css不需要）

在此登录StoreWeb站点，则会弹出此对话框。

[![wKioL1X6LKDS\_5\_fAAA5p66pNoM505.jpg][wKioL1X6LKDS_5_fAAA5p66pNoM505.jpg]][wKioL1X6LKDS_5_fAAA5p66pNoM505.jpg]

完成这个之后，我们考虑为内容页面增加页脚。

继续编辑script.js，增加如下内容：对于文字内容请自行修改。

/\* footer \*/

$('\#customBottom').html("仅接受Citrix员工访问！");

[![wKioL1X6Ni-isoBKAAA8j8MrWr0310.jpg][]][wKioL1X6Ni-isoBKAAA8j8MrWr0310.jpg]

编辑style.css，增加如下内容：可以根据需要修改字体颜色、大小、位置。

\#customBottom

text-align:center;

font-size:10px;

color:white;

background:Gray;

position:static;

[![wKiom1X6M\_jCQ2LqAABir\_TfayM949.jpg][wKiom1X6M_jCQ2LqAABir_TfayM949.jpg]][wKiom1X6M_jCQ2LqAABir_TfayM949.jpg]

运行IISRESET，登录至内容页面，则可以看到在最底部会有一行对应的文字。

[![wKioL1X6No3g8mVCAAC29D5DFkw460.jpg][]][wKioL1X6No3g8mVCAAC29D5DFkw460.jpg]

在此之后，我们可以创建一个滚动进度条，这样方便给出一些内容提醒，比如：系统需要做运维了之类。

定位到C:\\inetpub\\wwwroot\\Citrix\\<storename>Web 文件夹，编辑receiver.html

找到此行：

> <div id=”pluginTop”><div id=”customTop”></div></div>

修改为：

编辑style.css，增加如下内容：

/\* StoreFront messaging begin \*/

\#customTop \{

height:30px;

background:Gray;

.StoreMarquee \{

width: 0 auto;

margin: 0 auto;

white-space: nowrap;

overflow: hidden;

box-sizing: border-box;

.StoreMarquee span \{

font-family:'Arial Black', sans-serif;

font-size:1.8em; /\*修改字体大小\*/

font-weight:bold;

color:White;

display: inline-block;

padding-left: 100%; /\* show the marquee just outside the paragraph \*/

animation: StoreMarquee 15s linear infinite;

\-moz-animation: StoreMarquee 15s linear infinite;

\-webkit-animation: StoreMarquee 15s linear infinite;

/\* Make it move \*/

@keyframes StoreMarquee \{

0% \{ transform: translate(0, 0); \}

100% \{ transform: translate(-100%, 0); \}

@-moz-keyframes StoreMarquee \{

0% \{ -moz-transform: translate(0, 0); \}

100% \{ -moz-transform: translate(-100%, 0); \}

@-webkit-keyframes StoreMarquee \{

0% \{ -webkit-transform: translate(0, 0); \}

100% \{ -webkit-transform: translate(-100%, 0); \}

.StoreMarquee span:after \{

Content: '欢迎访问Citrix上海演示中心！'; /\*需要显示的内容\*/

display: inline;

/\* StoreFront messaging end \*/

保存，并运行IISREST，登录StoreWeb的内容页面，可以看到有一行滚动的字体在显示。

[![wKiom1X6N16TIbLyAABO2QvxwtE583.jpg][]][wKiom1X6N16TIbLyAABO2QvxwtE583.jpg]

StoreFront的提示部分的内容介绍到这。

本文转自sesame.qian 51CTO博客，原文链接：http://blog.51cto.com/kaiqian/1695638，如需转载请自行联系原作者

[wKiom1X6KmmyAg2FAAAYbqZjodM720.jpg]: /images/20220206/36867d35070a49bba6382e6a2428ce4f.png
[wKioL1X6LQGiT8XVAAAl8Em6-UE649.jpg]: /images/20220206/23b977e7e4064489991b124a9b749af2.png
[wKiom1X6Kzehfl7oAADR0ie8y-o801.jpg]: /images/20220206/1441fe25b5db49ddb12ac36354a37264.png
[wKioL1X6LKDS_5_fAAA5p66pNoM505.jpg]: /images/20220206/f278e790f8fe4fd586169a1a84db44d4.png
[wKioL1X6Ni-isoBKAAA8j8MrWr0310.jpg]: /images/20220206/4b3ac4840e3e491ea695e2db1eb1bffe.png
[wKiom1X6M_jCQ2LqAABir_TfayM949.jpg]: /images/20220206/12dcfd4ab11b4c8b88ecd986adeed071.png
[wKioL1X6No3g8mVCAAC29D5DFkw460.jpg]: /images/20220206/09aa96d8d88a419b886d8a38773bb25a.png
[wKiom1X6N16TIbLyAABO2QvxwtE583.jpg]: /images/20220206/aabf43a4f0414e23902427cae484da34.png