首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WordPress 主题教程 #5b:日志内容

再次强调一次,上一篇关于 WordPress 主循环介绍的课程非常重要,你需要彻底明白之后才能继续学习。 下面开始这篇课程。...第1步:使用 the_content() 函数显示日志内容 在日志标题代码下面输入:。...保存并刷新浏览器,现在在日志标题下面看到了一些文本: 刚才发生什么了?...我使用的是 Firefox浏览器,下面是在 FireFox 中显示的样子: 你注意到 index.php 文件和它的源代码之间的区别了吗?...他们都没有在 index.php 文件中出现,但是他们在源代码中出现了。 P 标签,为什么和如何使用? 为什么 - 当我们输入日志的时候,每次跳过一行就是一个段落,这个时候需要一个方法去展示?

82680
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何在Vue.js中创建模态框(弹出框)

    开篇 模态框(弹出层对话框,Modal Popup)在大多数现代应用程序中非常常见。它们主要用于呈现简洁的信息,非常适合显示广告和促销内容。...class="popup" @click.self="closeModal"> div class="popup-content"> div class="popup-header...ref 用于创建一个包含在模态框中显示的响应式变量消息。 emit用于定义一个名为“close”的事件,该事件可被触发以关闭模态框。...在标题下方,有一个文章部分,其中包含了模态框的主要内容。...这样可以确保弹出窗口在当前组件的DOM层次结构之外渲染,并且可以显示在页面上的其他内容之上。 组件之间的通信: 当需要关闭弹出组件时,Popup组件会触发一个关闭事件@close。

    82420

    如何统计 Hexo 网站的访问地区和IP

    前言 在 Website FAQ,实现了使用"卜算子"来统计网站访问人数,但是"卜算子"仅可以提供访问人数的统计,进一步的信息却无法提供。...那么,如果想知道过往访客来自哪些国家和地区,显示网站访问实时动态的信息,应该怎么做呢? FYI 本博客实时更新于 个人网站 - 统计Hexo网站的访问地区和IP,请移步阅读最新内容。...网址提供了生成访问者地址分布图的代码,可以嵌入到网站或博客中,来显示来自世界各地访问者的实时地图,有助于发展您隐藏的兴趣社区。最重要的是,这个功能是免费的,能够满足个人网站的需求,如下图所示。 ?...点击选择后,拷贝网站出现的脚本 javascript代码,粘贴到Next主题下某个位置。博主测试过如下两个位置,挑选一个配置即可以。推荐位置二,自定义程度高。...位置一:将代码插入到 themes\next\layout\_partials\header.swig 的最后。 {% endif %} <!

    3.5K10

    WordPress主题Mac osX 2.02

    这是一款仿Mac osx外观的Wordpress杂志型主题。首页可以添加自定义图片并显示日志摘要,主题包含两套主页面模板。通过主流浏览器测试。...使用说明: ★首页日志摘要自定义图片添加方法:(1)发表日志时在自定义字段左侧输入small,右侧输入图片链接地址;(2)左侧输入link,右侧输入日志链接地址,点击图片就可以查看全文了....★打开header.php文件,查找div id="yahoo">"在此添加代码"div>可将此处替换为自己的第三方统计代码,也就是header部分左侧第一个图片的链接....PS:最近滑动门效果很流行,可以点击欢迎引导页面的红绿灯试试,也可以点击侧边模块顶部看看效果,还有一个隐藏的看看是否能找到^_^。不过觉得这个东西除了"好看好玩"之外,没有任何用处。...主题下载: 本站下载 | 纳米盘下载 ★使用或修改主题,请保留原作者信息,谢谢合作!★ 关于首页图片自定义字段补充说明,不多说了看图,这是这篇日志的自定义字段:

    1.1K10

    html其他语义化

    为什么这里使用无序 列表来实现呢?假如使用有序列表,我们是做不到这种外观效果的。因为有序列表前的数字外 观是固定的。在实际开发中,大多数情况下都是使用无序列表,极少情况下会使用有序列表。...基于 结构和样式分离的原则,标签仅仅是为了实现简单的加粗或者 斜体效果,我们一般不会用这两个。实际上,W3C对这两个标 签赋予“强调”的语义,在strong或者em标签内部的文本被 强调为重要文本。...image.png 【总结】 以上只是列举了在实际开发中比较常见的语义标签,其实HTML5新增了很多结构语义 标签,例如header、nav、aside、footer、article、section等。...但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。...image.png 语义不好的页面和语义好的页面 从上面两张图我们可以看出:一个语义良好的页面在“CSS裸奔”之后,可读性也是非 常高的。

    84640

    第 15 篇:优化博客功能的细节,提升使用体验—— HelloDjango 系列教程

    打开 base.html,修改 Logo 处的超链接: header id="site-header"> div class="row"> div class="logo">...div> header> 另外导航栏还有一个首页导航按钮,也希望点击它就能回到首页面,修改的任务作为练习交给你了(有两处,一处是桌面端导航,另一处是移动端导航)。...显示正确的评论量 有两处地方显示的评论量(首页文章列表和文章详情页),显示评论量的方法很简单。回顾一下我们是如何获取某篇文章下的评论列表的?...我们可以在评论区域增加一个锚点,2 处显示评论量的地方超链接都指向这个锚点处,这样点击这两个地方将直接跳转到评论列表区域,方便用户快速查看评论内容。...> header> 注意这里从 index.html 到评论区域需要跳转页面,因此 href 超链接指定为绝对 URL,而文章详情和评论区域在一个页面,因此仅需指定锚点即可。

    54020

    JavaWeb新手进阶经典项目 & 半小时高效开发 & 海量知识点涵盖 (二)

    用户列表显示 我们昨天完成了第一部分的开发,即项目搭建和登录、注册功能实现。今天本文将与读者一起实现用户列表的显示、部门模块的显示和头像上传功能。...第一种是将html文件改为jsp文件,使用jsp技术(jsp本质上也是一个java servlet)动态显示数据。第二种方式是使用ajax(异步处理技术)并结合JQuery框架进行前后端分离的开发。...在实际开发中,我们往往选择后者,因为jsp技术代码耦合度太高,前后端往往难以统一维护(前端人员不一定懂后端技术),并且jsp页面渲染效率低于html,运行速度也低于纯前端框架开发的运行速度。...-- Sidebar Header--> div class="sidebar-header d-flex align-items-center"> div...,因为图片的磁盘开销比较大,一般在实际项目中会有专门的图片服务器来存储图片的,数据库只是保存图片的地址而已,当拿到图片地址之后再去访问图片服务器的图片。

    1.2K20

    详解:tab 3

    .什么是浮动元素的脱标?...脱标: 脱离标准流 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标 2.浮动元素脱标之后会有什么影响?...如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素 但是核心是那么这个时候前面一个元就会盖住后面一个元素核心是同一种元素哈比如都是div 核心2:要让下面的...div固定相对于ul固定在ul的下面,然后是核心来了, background: #fff;变背景 z-index:1;点击哪一个哪一个就覆盖前两个在第一层,这时候就有一个问题了,那就是 ?...方法就是background: #fff;就能清楚覆盖的哪两个了,只留下最前面的哪一个。为什么呢,因为背景的的意思是清除覆盖的动懂吗? 问题?为什么李文123要用ulli,为什么下面用div?

    1.1K30

    第13天:页面布局实例-博雅主页

    绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。...绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了 绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。...页面如何滚动,这个盒子显示的位置不变。固定定位脱标! 4、z-index值表示谁压着谁。数值大的压盖住数值小的。 ● 只有定位了的元素,才能有z-index值。...而浮动的东西不能用。 ● z-index值没有单位,就是一个正整数。默认的z-index值是0。...● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

    62310

    pyspider使用教程

    新建任务 第一次跑起来的时候因为没有任务,界面的列表为空,右边有个Create按钮,点击新建任务。 ?...运行 点击左边绿色区域右上角的 run 按钮,这时候调用的是 on_start 方法,运行之后页面下册的 follows 按钮出现红色角标 ?...点击代码区域右上方的 save 按钮保存,并运行起来之后的结果如下图,中间的灰色区域为打印的结果 ?...标签页包含在 header 中,a 的文本内容即为标签,因为标签有可能不止一个,所以通过一个数组去存储遍历的结果 header.items(‘a’) response.doc(‘div[id=”post_content...运行完成后,浏览器查看结果,因为设置了数据库的存储,不再存储在默认的 resultdb 中,此时浏览器的result界面是没有数据的 ?

    3.9K32

    已知小问题修正

    因为只要是返回的文章列表,基本都是逆序排列的,因此我们可以在 Post 模型中指定 Post 的自然排序方式。...打开 base.html,修改 Logo 处的超链接: header id="site-header"> div class="row"> div class="logo">...div> header> 另外导航栏还有一个首页导航按钮,也希望点击它就能回到首页面,修改的任务作为练习交给你了。...当然还有一些跳转可以完善,比如文章标题下有分类、发布时间、作者、评论量、阅读量等信息,可以设置点击分类跳转到分类页面;点击评论量就跳转到文章详情页的评论处等,这些细节部分不涉及新知识,就当做练习交给你自己完成了...显示正确的评论量 有两处地方显示的评论量,显示评论量的方法很简单。回顾一下我们是如何获取某篇 post 的下的评论列表的?我们使用的是 post.comment_set.all()。

    1.2K40

    前端学习笔记之CSS网页布局 CSS网页布局

    #1、当某一个元素浮动走之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标 #2、如果前面一个元素浮动走了,而后面一个元素没有浮动,那么垂直方向的元素会自动填充,浮动元素重新归位后就会覆盖该元素...,跟标准流还是有一定的关系,比如说浮动的元素在浮动之前处于标准流的第二行,那么他浮动之后也是处于浮动流的第二行,不会去找其他行的浮动元素去贴靠,打一个比方就是:浮动流就是在标准流上面覆盖的一层透明薄膜,...元素浮动之后就会被从标准流中扔到浮动流这个薄膜上,他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠,贴靠的准则就是: (1)同一个方向上谁先浮动,谁在前面 (2)不同方向上左浮动找左浮动...在右侧元素还没有加载到时,clear:right是无用的 的两个元素,然后div内没有标准流元素能撑起他的高度,于是它的高度为0 此时content应该先填充到header原来的位置,由于此时header既没有高度也没有边框,

    4.8K20

    CSS笔记(10)

    CSS笔记(10) 唉,感觉最近好懒啊,一直在玩玩玩.得抓紧学了,每次看弹幕都感觉别人学的好快好多,在家的效率真的好低啊,比学校里低太多了555555....,从左到右顺序排列,碰到父元素边缘则自动换行.标准流是最基本的布局方式. ②浮动 为什么需要浮动?...语法: 选择器 { float : 属性值 } 浮动特性(重难点) 浮动元素会脱离标准流(脱标) ① 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标 ② 浮动的盒子不再保留原先的位置 浮动的元素会一行内显示并且元素顶部对齐...浮动的元素会具有行内块元素的特性 浮动元素会具有行内块元素特性:任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性....如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动以后,它的大小根据内容来决定. 浮动的盒子中间是没有缝隙的,是紧挨在一起的. 行内元素同理.

    31520

    React 中高阶函数与高阶组件(下)

    虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如何操作...点击这里,标星不迷路 ?...中高阶组件的应用 代理方式的高阶组件 返回的新组件直接继承自React.Component类,新组件扮演的角色传入参数组件的一个代理,在新组件的 render 函数中,将被包裹组件渲染出来,除了高阶组件自己要做的工作...说明 通过以上例子发现,使用继承方式的高阶组件相比代理方式高阶组件,是一件非常麻烦的操作,除非需要通过传入的参数组件来判断性的去修改一些属性,否则就没有必要使用继承方式高阶组件去操作props ⒉ 操纵生命周期函数...03 如何显示高阶组件名 显示高阶组件名,是为了更好的 debug 调试,如果没有进行设置,只能通过查看源代码的方式 无法在浏览器中非常的直观看到 未设置高阶组件名 ?

    78510

    WordPress添加暗黑模式并集成到主题教程

    在主题header.php页头的body加入php判断,检测到cookie相关字段直接输出body class为night,防止页面闪烁。 PHP "> 主要是cookie判断,判断如果你开启暗黑模式的cookie,如果有就输出night(达到暗黑效果),没有则空不开启。...有些主题下body已存在class了(没有可以忽略这一步),而且可能很多值,有可能会出现无效,这时可以写一个判断就ok啦。...“标准”,很明显上面的那个按钮不管是在哪种模式下都显示“暗黑”,太过于单调了,于是我在此基础上做了一些修改: HTML div class="darkmode"> 在主题后台加个开关,没准过两天不喜欢关掉,想用又打开,这样虽然不用了,但是还是存在的。

    1.1K20

    复用 Vue 组件的 6 层手段

    反转 与向子组件中传入一整块模版置标又有所不同的是,我们还能传入一组指令,以决定其 如何 渲染。 打个比方,这就像自己烹饪和叫外卖的对比。...下例中,一个 Modal 组件中分别有 header、default 和 footer 几个 slots: div class="modal"> 例子相当简单,但我们已经有了多种扩展这个组件的选项了: 只是覆写 default slot 来显示内容 显示默认内容,并增添 header slot 部分 显示默认内容,并增添...footer slot 以显示几个按钮 显示所有 slots 的内容 6....之后周而复始,直到你拥有了最终能真正工作的组件。 类似于经典的 OOP 例子,我们可以从一个相当通用的 动物 组件扩展到更特别一些的 哺乳动物,接下来是 狗 并最终得到 贵妇犬。

    39930
    领券