Question

我的网站在所有网页上都有相同的侧边栏。为了避免复制和粘贴每个页面的侧边栏的html我写了一些javascript，因为这个答案建议：How can I make my navi-bar the same across my html?

我对这些结果感到满意，除了一件事，我的侧边栏显示的是用户名称，我使用{{ request.user.get_full_name }}访问的内容，但是当我将其放入sidebar.js时，这不起作用。所以我认为一个好的方法是在我的html文件中的var user={{request.user.get_full_name}}标签中设置<script>，然后在我的js中使用<h3>user</h3>，但我不知道如何做到这一点。

这是我的sidebar.js

document.getElementById("navMenu").innerHTML =
  '<a href="/profile/" style="text-decoration: none; color: white;"><div id="circle"><span class="glyphicon glyphicon-user"></span></div><h3>Your Name</h3></a>'+
  '<ul class="nav nav-pills nav-stacked" style="text-align: left;">'+
    '<li><a href="/userhome/"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;  Home</a></li>'+
    '<li><a href="/profile/"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp;  Profile</a></li>'+
    '<li><a href="#"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp;  Messages</a></li>'+
    '<li><a href="/boards/"><i class="fa fa-users fa-fw" aria-hidden="true"></i>&nbsp;  Boards</a></li>'+
    '<li><a href="#"><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i>&nbsp;  Feed</a></li>'+
    '<li><a href="#"><i class="fa fa-globe fa-fw" aria-hidden="true"></i>&nbsp;  Notifications</a></li>'+
    '<li><a href="#"><label for="logout" style="font-size: 15px; font-weight: inherit;"><i class="fa fa-lock fa-fw" aria-hidden="true"></i>&nbsp;  Logout</label></a></li>'+
  '</ul>';

所以在它有<h3>Your Name</h3>的第二行我希望它是用户变量。这就是我试图在我的HTML页面中传递变量的方式：

<div id="sidebar">
  <nav id="navMenu"></nav>
  <script src="{% static 'app/js/sidebar.js' %}">var user={{request.user.get_full_name}}</script>
  <!-- logout button/form -->
  <form action="/" method="post">
    {% csrf_token %}
    <input class="hidden" id="logout" type="submit" value="Logout"/>
  </form> 
</div>

我想避免使用PHP。底线是我可以在<script>标签内使用django，如果是这样，我如何在我的javascript中使用该变量？

Answer 1

我无法找到参考，但我怀疑<script src="something.js">也可以在其中找到来源。我没记过这件事，我记得。

这应该有效，这与你正在做的相似：

<script>
    var user = '{{request.user.get_full_name}}'; // created by your django html 
</script>
<script src="{% static 'app/js/sidebar.js' %}"></script>

然后在sidebar.js中，你只需要这样做：

"....<h3>" + user + "<h3>..."

但是，更简洁的方法是将js封装到一个以用户名作为参数的函数中：

<script src="{% static 'app/js/sidebar.js' %}"></script>

你的js在哪里，

function sidebar(user) {
    document.getElementById("navMenu").innerHTML = "....<h3>" + user + ";<h3>..."
}

其次是：

<script>
    sidebar('{{request.user.get_full_name}}'); // where this is created via your template.
</script>

如何将django变量从html页面传递给javascript

1 个答案: