技术教程 – 新起点博客 https://www.henenseo.com 软件下载_免费源码_建站教程_资源分享_网络技术平台 Thu, 28 Mar 2024 01:56:21 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.0.7 Bootstrap教程:按钮(垂直导航分类) https://www.henenseo.com/archives/7557 https://www.henenseo.com/archives/7557#respond Thu, 28 Mar 2024 01:38:03 +0000 https://www.henenseo.com/?p=7557 一般来说按钮组都是水平显示展示出来的。但在实际运用当中,也多多少少都会碰到垂直显示的效果,比如说二级页面的左侧快捷导航、大型网站都有此风格展示效果,那么,在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。如下所示:

<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
   <ul class="dropdown-menu">
      <li><a href="##">公司简介</a></li>
      <li><a href="##">企业文化</a></li>
      <li><a href="##">组织结构</a></li>
      <li><a href="##">客服服务</a></li>
</ul>
</div>
</div>

通过以上代码可以得到以下展示效果,如图所示:

如何修改垂直导航样式呢?我们打开bootstrap.css文件夹找到大约第3234行左右代码。代码如下:

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

 

]]>
https://www.henenseo.com/archives/7557/feed 0
如何修改PbootCMS默认面包屑导航样式及自定义设置方法 https://www.henenseo.com/archives/7555 https://www.henenseo.com/archives/7555#respond Thu, 28 Mar 2024 01:23:48 +0000 https://www.henenseo.com/?p=7555 在使用PbootCMS建站时,面包屑导航是一个重要的元素,它可以帮助用户快速了解当前所处页面的位置和路径。然而,系统默认的面包屑样式可能无法满足我们的需求,如何修改可以达到我们想要的需求呢?这就需要一定的修改和自定义操作。

面包屑调用

PbootCMS中,面包屑导航的调用方式如下:

{pboot:position}

通过这个标签,系统会自动生成当前页面的面包屑导航。

自定义参数

如果我们需要自定义相关面包屑参数时,可以使用下方对应的变量进行调整。

  • separator:分隔符,非必填,默认为?>>
  • separatoricon:分割图标,非必填,如使用图标字体:separatoricon=’fa fa-angle-double-right’
  • indextext:首页文本,非必填,默认为?”首页”
  • indexicon:首页图标,非必填,如使用图标字体:indexicon=’fa fa-home’

这里的字体图标指的是fontawesome字体图标,不清楚的可以百度查看图标详解。

修改样式

常见的两种样式修改情况是自定义分隔符和修改首页文本。我们可以通过以下代码实现:

自定义分隔符

{pboot:position separator=/}

以上代码将分隔符修改为 /。

修改首页文本

{pboot:position indextext=Home}

以上代码将首页文本修改为 Home。

除了上述两种情况,我们还可以尝试其他参数的自定义,以满足具体需求。通过这些操作,我们可以让面包屑导航更符合网站风格和设计需求。

]]>
https://www.henenseo.com/archives/7555/feed 0
Bootstrap教程:按钮(等比例分列按钮) https://www.henenseo.com/archives/7561 https://www.henenseo.com/archives/7561#respond Sat, 23 Mar 2024 01:49:43 +0000 https://www.henenseo.com/?p=7561 等分按钮的效果是非常受欢迎的一种排列方式,尤其是在移动端上特别的实用。整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果你按钮组里面有五个按钮,那么每个按钮是20%的宽度,如果有四个按钮,那么每个按钮是25%宽度,以此类推。

等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名,如下所示:

<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首页</a>
  <a class="btnbtn-default" href="#">产品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">联系我们</a>
</div>
</div>

这样不管里面的内容有四个文字还是两个三个文字都会居中显示,如图所示:

实现原理非常简单,把“btn-group-justified”模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)。具体样式代码如下:

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}

ps:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。

]]>
https://www.henenseo.com/archives/7561/feed 0
PbootCMS搜索结果页面关键词和tags值 https://www.henenseo.com/archives/7545 Sat, 17 Feb 2024 16:10:04 +0000 https://www.henenseo.com/archives/7545 在使用PbootCMS进行网站开发时,有时需要获取搜索关键词和tags值进行展示或其他操作。本文将介绍如何在PbootCMS中获取结果页面的关键词和tags值。

获取搜索关键词

如果您的搜索结果页面地址后缀为?keyword=三角形,那么可以使用{$get.keyword}标签获取关键词的值。该标签可用于搜索列表页面获取搜索关键词的值,非常方便。以下是示例代码:

// 在搜索列表页面中获取搜索关键词的值
搜索关键词:{$get.keyword}

通过以上代码,可以在搜索列表页面中展示搜索关键词的值,并搭配分页条的总数据行数属性({page:rows})来实现类似于以下效果:

共找到123个包含“三角形”的结果。

获取tags关键词

如果您的搜索结果页面地址后缀为?tags=伪静态配置,那么可以使用{$get.tags}标签获取tags关键词的值。该标签可用于结果页面获取搜索tags的值。以下是示例代码:

// 在结果页面中获取搜索tags的值
搜索tags:{$get.tags}

通过以上代码,可以在结果页面中展示搜索tags的值。

其他页面

如果需要获取其他页面的关键词或者tags值,可以参照以上方式进行尝试,具体代码如下:

// 在其他页面中获取关键词或tags的值
关键词:{$get.xxx}
tags:{$get.yyy}

其中,xxx和yyy是根据实际情况设置的标签名称。

总结

PbootCMS提供了方便快捷的标签来获取搜索结果页面的关键词和tags值。通过本文介绍的方法,可以轻松获取并应用这些值,达到更好的展示效果。

]]>
介绍如何禁止PbootCms自动提取文章中的图片作为缩略图 https://www.henenseo.com/archives/7543 Tue, 13 Feb 2024 11:38:58 +0000 https://www.henenseo.com/archives/7543 PbootCms是一个基于PHP开发的内容管理系统,用于快速构建网站。它具有自动提取文章中第一张图片作为缩略图的功能,但有时候这个功能并不适用于所有的情况。本文将介绍如何禁止PbootCms自动提取文章中的图片作为缩略图。

  1. 打开IDE工具,例如VScode或Sublime等。
  2. 使用“无缩略图时”作为关键字搜索整个项目,可以找到两个文件,共三处代码。
  3. 打开搜索到的代码位置,在如下代码部分进行修改:
    // 无缩略图时,自动提取文章第一张图为缩略图
    if (! ico && preg_match('/<img\s+.*?src=\s?[\'|\"](.*?(\.gif|\.jpg|\.png|\.jpeg))[\'|\"].*?[\/]?>/i', decode_string(content), srcs) && isset(srcs[1])) {
    $ico = $srcs[1];
    }
  4. 将上述代码中的 if 开头的 3 行代码注释掉,即在这三行最前面加上双斜杠(//)即可。
  5. 在所有三处注释掉后,保存修改后的文件。
  6. 这样就成功禁止了PbootCms自动提取文章中的图片作为缩略图的功能。

总结

本文介绍了如何禁止PbootCms自动提取文章中的图片作为缩略图,这样就可以更好地控制缩略图的展示效果。需要注意的是,在修改代码前一定要备份原来的文件,以免出现不可预料的错误。希望本文对您有所帮助。

]]>
如何在pbootcms网站中调用公司简介等频道内容 https://www.henenseo.com/archives/7539 Tue, 06 Feb 2024 20:05:56 +0000 https://www.henenseo.com/archives/7539 在pbootcms网站中,首页通常包含了公司简介等频道内容,为此我们可以使用pboot:content标签来调用对应频道的内容,并将其展示在首页上。本文将会介绍如何在pbootcms中使用pboot:content标签来调用公司简介等频道内容,并提供一些使用说明。

调用公司简介等频道内容

要在pbootcms网站中调用公司简介等频道内容,您可以使用以下代码:

{pboot:content id=1}
[content:content drophtml=1 dropblank=1 len=300 more='...']
<a href="[content:link]">查看更多</a>
{/pboot:content}

在这个代码块中:

  • {pboot:content id=1} 表示调用id为1的频道。
  • [content:content drophtml=1 dropblank=1 len=300 more=’…’] 表示从该频道中获取内容,并截取前300个字符。如果需要显示所有内容,可以删除 len 参数。
  • <a href=”[content:link]”>查看更多</a> 添加一个“查看更多”链接,指向该频道的详细页面。

使用说明

下面是一些使用pboot:content标签的注意事项:

  • 如果需要调用其他频道的内容,只需将 id 参数替换为您想要的频道ID即可。
  • 您可以通过修改 len 参数来控制显示内容的长度。请注意,每个字符都将包括在内,包括HTML标记和空格。
  • 如果需要更改“查看更多”链接的文本或样式,请修改 <a> 标签中的内容。您还可以将其替换为图像,以便更好地与您的网站设计相匹配。

总之,在pbootcms网站中使用pboot:content标签来调用公司简介等频道内容非常方便,只需要稍微修改代码就能实现。希望这篇文章对你有所帮助!

]]>
如何在PbootCMS模板中实现产品置顶 https://www.henenseo.com/archives/7532 Fri, 19 Jan 2024 05:36:44 +0000 https://www.henenseo.com/archives/7532 如果你是一个 PbootCMS 用户,你可能需要在网站中将某个产品置顶或者推荐。PbootCMS 提供了非常简单的方法来实现这些功能。

实现方法

在 PbootCMS 中实现产品置顶非常容易,只需要对模板文件进行一些修改即可。以下是具体的步骤:

1. 打开模板文件

首先,使用编辑器打开想要修改的模板文件。例如,在默认模板中,我们可以找到 index.html 文件。

2. 找到产品列表部分的代码

在模板文件中找到显示产品列表部分的代码。在默认模板中,这个代码应该长这样:

<div class="piclist">
  <ul>
    {pboot:list scode=34 num=10 order=date}
      <li><i>[list:i]</i><a href="[list:link]" title="[list:title]">[list:title]</a></li>
    {/pboot:list}
  </ul>
</div>

3. 修改 order 参数为 istop=1

现在,我们需要修改 {pboot:list} 标签中的 order 参数,以便只显示置顶的产品。将 order 参数改为 istop=1,如下所示:

<div class="piclist">
  <ul>
    {pboot:list scode=34 num=10 istop=1}
      <li><i>[list:i]</i><a href="[list:link]" title="[list:title]">[list:title]</a></li>
    {/pboot:list}
  </ul>
</div>

保存文件并刷新网站页面,你应该能够看到只显示了置顶的产品。

其他参数

除了 istop 参数之外,PbootCMS 还提供了其他一些有用的参数来过滤和排序产品列表。以下是一些常用的参数:

  • isrecommend=1:只显示推荐的产品。
  • isheadline=1:只显示头条产品。
  • scodes=1,2,3:只显示指定分类下的产品。
  • num=10:只显示最新的 10 个产品。
  • order=date:按照发布日期排序。

你可以根据自己的需求自由组合这些参数。

总结

在 PbootCMS 中实现产品置顶非常容易,只需要对模板文件进行一些修改,就可以实现只显示置顶的产品。如果你需要显示其他类型的产品,也可以使用其他参数来进行过滤和排序。

]]>
如何在PbootCMS中调用站点信息到前台页面上 https://www.henenseo.com/archives/7535 Wed, 17 Jan 2024 11:44:24 +0000 https://www.henenseo.com/archives/7535 PbootCMS 提供了一系列的标签来方便地调用站点配置信息到前台页面上,其中包括站点入口地址、站点标题、站点域名等信息。使用这些标签可以使网站开发更加高效和方便。

使用方法

1. 首先,登录 PbootCMS 后台,并进入 “基础内容 > 站点信息” 页面。在这个页面中,你可以填写站点标题、关键字、描述等相关信息。

2. 在需要显示站点信息的前台页面中,添加以下标签:

{pboot:siteindex}	// 站点入口地址,一般用于站内链接跳转设置地址前置,实现自适应URL模式
{pboot:sitepath}	// 站点路径,根目录时值为空,为适应部署到二级目录时建议链接前面带上
{pboot:sitelanguage}	// 站点语言
{pboot:sitetitle}	// 站点标题
{pboot:sitesubtitle}	// 站点副标题
{pboot:sitedomain}	// 站点域名
{pboot:sitelogo}	// 站点logo
{pboot:sitekeywords}	// 站点关键字
{pboot:sitedescription}	// 站点描述
{pboot:siteicp}	// 站点备案信息
{pboot:sitetplpath}	// 站点模板路径
{pboot:sitestatistical}	// 站点统计
{pboot:sitecopyright}	// 站点版权 

例如,在网站首页中添加站点标题,可以这样写:

<h1>{pboot:sitetitle}</h1>

3. 保存页面,刷新网站,你应该能够看到添加的站点信息已经显示在对应位置上。

V1.1.6版本新增标签

除了上述标签外,PbootCMS 还新增了以下标签:

{pboot:pagetitle}  // 根据不同页面自动显示标题
{pboot:pagekeywords}  // 根据不同页面自动显示关键字
{pboot:pagedescription}  // 根据不同页面自动显示描述

这些标签可以根据不同页面的内容来自动生成对应的标题、关键字和描述,方便用户更好地了解页面的内容。

结论

通过使用 {pboot:sitetitle} 等相关标签,我们可以轻松地将后台管理中填写的站点信息调用到前台页面中。这样可以帮助用户更好地了解网站的基本情况,提高网站的专业度和可信度。新增的标签可以根据不同页面的内容自动生成对应的标题、关键字和描述,更加方便实用。

]]>
如何开启PbootCMS的后台菜单管理功能 https://www.henenseo.com/archives/7551 Thu, 11 Jan 2024 03:17:19 +0000 https://www.henenseo.com/archives/7551 PbootCMS是一款基于PHP语言开发的简单易用的内容管理系统。它提供了丰富的插件和主题,可以满足不同类型网站的需求。在使用PbootCMS管理网站时,如果需要修改或者添加后台菜单选项,只需要按照以下步骤进行操作。

步骤一:修改后台页面链接

打开PbootCMS的后台登录页面,输入用户名和密码成功登录后,将浏览器的地址栏中的链接修改为如下两种方式之一:

  • admin.php?p=/Menu/index
  • admin.php/Menu/index

这样就可以进入到后台菜单管理页面。

步骤二:打开导航菜单选项

在右侧看到如下内容后,可以发现导航菜单选项是关闭的,我们只需要将其打开即可。

点击右上角的“设置”按钮,在弹出的对话框中将“导航菜单”选项设置为“打开”,然后保存设置并注销账号重新登录。

结论

此时已经成功开启了PbootCMS的后台菜单管理功能。在左侧导航栏中会出现新的菜单选项,可以自由修改和添加菜单。如果需要隐藏某些无用的或者不必要的菜单选项,可以在交付给客户之前进行设置。

]]>
如何在PbootCMS中调用后台公司信息到前台页面上 https://www.henenseo.com/archives/7534 Fri, 22 Dec 2023 03:21:43 +0000 https://www.henenseo.com/archives/7534 在 PbootCMS 中,我们可以使用 {pboot:companyname} 等相关标签来轻松地调用后台公司信息到前台页面上。这些标签对应的是后台管理中的 “基础内容 > 公司信息” 页面中填写的相关信息。

使用方法

1. 首先,登录 PbootCMS 后台,并进入 “基础内容 > 公司信息” 页面。在这个页面中,你可以填写公司名称、地址、电话等相关信息。

2. 在需要显示公司信息的前台页面中,添加以下标签:

{pboot:companyname}	// 公司名称
{pboot:companyaddress}	// 公司地址
{pboot:companypostcode}	// 邮政编码
{pboot:companycontact}	// 联系人
{pboot:companymobile}	// 联系手机
{pboot:companyphone}	// 联系电话
{pboot:companyfax}	// 传真号码
{pboot:companyemail}	// 联系邮箱
{pboot:companyqq}	// QQ号码
{pboot:companyweixin}	// 微信图标
{pboot:companyblicense}	// 营业执照号
{pboot:companyother}	// 其它信息

例如,在网站底部添加公司地址信息,可以这样写:

<div class="footer">
  <p>地址:{pboot:companyaddress} 邮编:{pboot:companypostcode}</p>
</div>

3. 保存页面,刷新网站,你应该能够看到添加的公司信息已经显示在对应位置上。

结论

通过使用 {pboot:companyname} 等相关标签,我们可以轻松地将后台管理中填写的公司信息调用到前台页面中。这样可以帮助用户更好地了解公司和网站的基本情况,提高网站的专业度和可信度。

]]>