简体   繁体   English

在Python 3.3服务器文件中使用Twitter-Bootstrap

[英]Using Twitter-Bootstrap in Python 3.3 Server File

I'm currently in the proccess of editing the html in the Python 3.3 http server code. 我目前正在编辑Python 3.3 http服务器代码中的html。 I am doing this so I can access my media files from anywhere in my LAN. 我这样做是为了可以从LAN的任何位置访问媒体文件。 The default interface is quite boring, so I wanted to spruce it up a bit with Twitter Bootstrap buttons. 默认界面很无聊,所以我想用Twitter Bootstrap按钮来修饰一下它。 The below code is from my edited server.py file, starting on line 740 (please excuse the lack of editing or elegance): 下面的代码来自我编辑的server.py文件,从第740行开始(请原谅缺乏编辑或优雅):

title = 'Media Listing on Computer'
    r.append('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" '
             '"http://www.w3.org/TR/html4/strict.dtd">')
    r.append('<html>\n<head>')
    r.append('<meta http-equiv="Content-Type" '
             'content="text/html; charset=%s">' % enc)
    r.append('<title>%s</title>\n<link href="file:///C:/Server/bootstrap.css" rel="stylesheet">\n<style type="text/css">a:link {color:grey; text-decoration: none;}</style>\n</head>' % title)
    r.append('<body>\n<FONT FACE="arial" COLOR="grey">\n<h1>%s</h1>' % title)
    #<body style="background-color:#B4F200;>
    #<FONT FACE="courier" COLOR="grey">
    r.append('<ul class="nav nav-pills nav-stacked">')
    for name in list:
        fullname = os.path.join(path, name)
        displayname = linkname = name
        # Append / for directories or @ for symbolic links
        if os.path.isdir(fullname):
            displayname = name 
            linkname = name + "/"
        if os.path.islink(fullname):
            displayname = name + "@"
            # Note: a link to a directory displays with @ and links with /
        r.append('<li class="active"><a href="%s">%s</a></li>'
                % (urllib.parse.quote(linkname), html.escape(displayname)))
    r.append('</ul>\n</body>\n</html>\n')
    encoded = '\n'.join(r).encode(enc)
    f = io.BytesIO()
    f.write(encoded)
    f.seek(0)
    self.send_response(200)
    self.send_header("Content-type", "text/html; charset=%s" % enc)
    self.send_header("Content-Length", str(len(encoded)))
    self.end_headers()
    return f

This generates a page with the following html: 这将生成带有以下html的页面:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=mbcs">
<title>Media Listing on Computer</title>
<link href="file:///C:/Server/bootstrap.css" rel="stylesheet">
<style type="text/css">a:link {color:grey; text-decoration: none;}</style>
</head>
<body>
<FONT FACE="arial" COLOR="grey">
<h1>Media Listing on Computer</h1>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="FRAPS/">FRAPS</a></li>
<li class="active"><a href="iTunes/">iTunes</a></li>
<li class="active"><a href="Misc%20videos/">Misc videos</a></li>
<li class="active"><a href="Movies/">Movies</a></li>
<li class="active"><a href="TV/">TV</a></li>
</ul>
</FONT>
</body>
</html>

Now when I open the html in a web browser it works fine, in that it loads the Twitter Bootstrap UI, however, when I run the python server, the UI doesn't load. 现在,当我在网络浏览器中打开html时,它可以正常工作,因为它可以加载Twitter Bootstrap UI,但是,当我运行python服务器时,不会加载UI。 I would really like to know how I can fix this, so if someone could give me a hand in sorting this out, that would be appreciated. 我真的很想知道如何解决这个问题,因此,如果有人可以帮我解决这个问题,将不胜感激。

Does your browser know you are using the correct stylesheet? 您的浏览器是否知道您使用的是正确的样式表? Maybe try using a relative path for bootstrap instead of an absolute file:///C:/Server/bootstrap.css ? 也许尝试使用相对路径而不是绝对file:///C:/Server/bootstrap.css

UPDATE (from comments) 更新 (来自评论)

You placed bootstrap in a directory outside of the server root directory, so your browser wasn't able to access the css and render it. 您将引导程序放置在服务器根目录之外的目录中,因此您的浏览器无法访问css并进行渲染。 Move bootstrap into the server directory (eg C:\\Server\\lib\\http\\bootstrap\\ ) and update the stylesheet path accordingly (eg <link href="/bootstrap/bootstrap.css" rel="stylesheet"> ) 将引导程序移至服务器目录(例如C:\\Server\\lib\\http\\bootstrap\\ ),并相应地更新样式表路径(例如<link href="/bootstrap/bootstrap.css" rel="stylesheet">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM