跳到主要内容

使用concrete5将HTML转换为CMS站点

这篇文章首次出现在问题233.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

大多数设计人员,开发人员和客户倾向于倾向于知名的内容管理系统(CMSes),如WordPress或Joomla,而不是选择与他们不同的平台。

Concrete5有何不同?

使用concrete5,一个关键的区别是您可以在浏览器中查看您正在查看的页面上的内容。仅此功能是一个有价值的卖点,特别是对于不那么精通互联网的客户。您的客户将喜欢编辑和添加内容到他们的网站,愉快的客户可以创造有利可图的业务。

但这种易用性并不会影响功能。虽然本机框架非常强大,但它也具有高度可扩展性。以下教程将向您展示如何立即将HTML代码转换为完全成熟的CMS Concrete5网站。

入门

在本教程中,我们假设您已经使用HTML构建了网站的前端页面,并准备好了所有的CSS,内容和图像。您使用concrete5的次数越多,您就会提前为其及其附加组件提供的各种功能设置所有CSS。您现在需要设置一个帐户下载最新版本的concrete5。我们建议您使用concrete5注册一个帐户,以便通过您自己的项目区域管理您的网站。将所有文件上传到服务器或(L)AMP堆栈,并设置干净的数据库。要找出concrete5的系统要求,检查一下

The concrete5 install screen will highlight any server settings you may need to change. Check these carefully before you begin any new document

具体的5安装屏幕将突出显示您可能需要更改的任何服务器设置。在开始任何新文档之前,请仔细检查这些

第1步:安装concrete5

打开浏览器并输入站点文件当前所在的URL。您将看到一个安装屏幕,显示仍然需要的任何错误或配置。如果您的电路板上有绿色标记,请单击继续安装按钮。在下一个屏幕上,输入您的数据库信息并创建用户名和密码。如果您愿意,可以安装concrete5附带的示例内容。否则选择空站点。安装concrete5。安装完毕后,将鼠标悬停在仪表板顶部编辑栏上的按钮,然后选择延伸混凝土5。将站点连接到您注册的帐户。

第2步:设置主题结构

Concrete5使用主题和页面类型(页面模板)工作。在顶级主题文件夹中创建一个文件夹,并为其指定与您的网站相关的名称。在这种情况下,我们将调用该文件夹Clarity_law

concrete5’s clear and simply laid out theme structure makes it easy to understand, even for the least seasoned developer

Concrete5简洁明了的主题结构使其易于理解,即使对于经验最少的开发人员也是如此

在此文件夹中,创建以下文件和文件夹:Description.txt,一个名为elements的文件夹(在这里创建文件Header.php文件Footer.phpHome.php如default.php,一个名为的文件夹图片Right_sidebar.php(这基本上是您的主要子页面模板),Screen.css(你的主要CSS文件),Thumbnail.pngTypography.css(将所有字体样式放入此中,以便concrete5的编辑器可以将它们拾取),最后一个View.php文件。我们的设计也使用自定义字体,在这种情况下是Museo。放置一个名为的文件夹字体进入themes目录并为您的字体创建一个单独的CSS文件。

第3步:设置文件

首先编辑Description.txt。这用于在管理区域中显示模板名称。我们通常将客户的名字放在第一行,并在第二行放置一个'由......生成的网站'。保存文件。接下来创建/打开Thumbnail.png在您选择的图像编辑器中输入文件,并为您的主题创建图形。应设置为120x90px。保存文件。将所有网站图像复制到images文件夹中,并将所有字体(如果有)复制到字体夹。

打开你的Screen.css文件并复制并粘贴所有CSS,除了字体样式(H1H2P标签等)到这个文件中。保存。打开你的Typography.css将所有字体样式复制并粘贴到此文件中。保存。如果您有自定义字体,请打开/创建一个名为的文件Fontface.css并输入主@fontface样式CSS并将它们链接到您的字体夹。如果您不使用@ Font-face,请阅读所选系统的文档。

打开中的两个文件分子夹,Header.php文件Footer.php。内Header.php文件输入以下代码:

要让您的CSS正确链接到您网站的主题文件夹,您必须拥有 getThemePath()?> /在CSS文件的名称之前。如果需要,您还可以更改DOCTYPE并添加其他元信息。但是,不要使用concrete5来添加元标题,描述或关键字页面属性部分登录到您网站的管理区域。保存此文件。我们会回来的Footer.php文件。

By simply replacing your content with simple PHP tags, concrete5 will automatically make these into editable areas

通过简单地用简单的PHP标签替换您的内容,concrete5将自动将它们变成可编辑的区域

第4步:设置主HTML

现在拿出你的HTML并使其具体准备就绪。为此,您需要了解三种类型的PHP标记,以使您网站的区域可编辑。这些是:

 INC。( '分子/你-file.php'); ?>

这用于包括页眉和页脚文件。

显示($ C); ?>

这用于网站上的全球区域。例如,公司的徽标将出现在每个页面上。使用GlobalArea标签可以让您输入一次内容,它将填充整个网站。

显示($ C); ?>

这用于非全局的可编辑区域。

在您选择的编辑器中打开您的主页HTML。在这种情况下,我们使用Dreamweaver。打开Home.php并粘贴主页文件中的代码。删除所有代码并替换为:

 INC( '元素/ header.php文件'); ?>

替换所有被视为全球化的内容显示($ C); ?>。更换可编辑区域名称使用您要替换的内容的名称。对于Clarity Law设计,我们将标识,社交图标,电话号码,主导航,标语,号召性用语按钮,Twitter标题,Twitter订阅源,联系表单,联系人详细信息以及五个页脚列添加到全球区域。对于您想要编辑的其他非全局方面,请使用。替换您的内容显示($ C); ?>。再次,替换可编辑区域名称与内容的名称。我们用过文字介绍幻灯片,和主要。 (concrete5承认主要作为主要内容领域:我们建议使用此)。保存文件。

You can install a variety of different themes and use these across your site, allowing you to give each page a different theme if you like

您可以安装各种不同的主题并在您的网站上使用这些主题,如果您愿意,可以为每个页面提供不同的主题

打开Footer.php位于分子夹。内Home.php,突出显示并剪切所有页脚代码,但保持结束标签。将其粘贴到您的Footer.php文件。接下来,我们将在代码中放置一个按钮,用户可以使用该按钮登录和编辑网站。在页脚内,在其中一个可编辑区域上方,输入以下代码:

显示($ C); ?> 

© isRegistered()){?> url('/ profile')。 '“>'。$ u-> getUserName()。'';} else {$ userName = $ u-> getUserName();}?>

最后,在结尾处输入以下代码行Footer.php文件:

保存你的Footer.php并关闭。早在Home.php,输入:

 INC( '元素/ footer.php'); ?>

这将包括你的Footer.php文件。保存。重复Home.php或复制代码并粘贴到如default.php。保存。对于您的子页面,您的主页可能有不同的布局,因此请按照与步骤5相同的过程。对于Clarity Law,我们在整个站点使用一个模板,因此您可以复制Home.php并重命名Right_sidebar.php或者将代码复制并粘贴到此文件中。保存。最后,打开View.php。此文件用于由concrete5自动生成的页面,不需要单独的自定义模板。例如,这可用于登录页面和未找到的页面。将home.php代码粘贴到view.php中。在上方或下方显示($ C); ?>PHP标记,输入以下代码:

保存文件。将主题目录上传到您的服务器。

第5步:激活您的主题

访问您安装concrete5的主页并翻转仪表板按钮,位于浏览器窗口的顶部栏中。点击主题链接。您将看到主题选择窗口。点击安装新创建的主题旁边的按钮。下一个窗口显示将要安装的文件。点击。现在你需要激活它。点击回到主题按钮,然后单击启用主题旁边的按钮。它会询问您是否希望在整个站点上激活主题。点击。而已。您现在已将HTML转换为内容管理网站!

Dotted lines will appear around the areas that are editable by the user, making it easier for the less experienced user to see where changes can me made

虚线会出现在用户可编辑的区域周围,使经验较少的用户更容易看到我可以在哪些地方进行更改

第6步添加内容

现在,您可以向网站添加内容。首先,我会开始将您网站的图片(例如公司徽标和幻灯片图片)上传到concrete5。翻过来仪表板按钮并选择文件管理器。点击上传多个然后添加文件在弹出窗口中。导航到图像文件夹并选择Claritylaw-scotland.jpg温度,image01-05.jpeg。开始上传。上传后,返回主文件管理器窗口,您将看到所有图像的列表。单击所有临时映像文件旁边的复选框,然后在下拉列表中选择。点击添加新集并命名这个幻灯片。点击更新

将鼠标悬停在仪表板上并选择堆栈。通过堆栈,您可以在网站的多个位置重复使用块。因为我们已经为我们的HTML代码分配了全局区域,所以您应该看到已经存在的全局堆栈列表。点击商标然后堆叠添加块。我们希望添加内容,因此请选择内容块。这将显示TinyMCE编辑器。点击添加图片并选择我们之前上传的徽标。点击。回到堆栈列表,单击Tagline堆栈,然后再次单击添加块并选择内容块。将文本添加到编辑器中。如果您愿意,可以选择字体样式,但在这里我们将其保留为段落标记。点击。继续使用内容块添加其余内容,除了联系表Twitter FeedHeader Nav栈。

完成所有全局内容后,选择Header Nav从你的堆栈列表。我们想要添加自动导航块。从这里您可以获得有关如何显示导航的一系列选项。如果您的网站有下拉菜单,则可以设置要显示的子页面级别。我们将使用标准设置,因此请单击。接下来,单击Twitter Feed堆。根据您实施Twitter Feed的方式,您可以选择HTML块并添加Twitter生成的Feed代码。

这里我们使用的是concrete5的免费插件之一,Tweetcrete。您可以从concrete5仪表板或通过您的帐户安装附加组件。在堆栈列表中,单击Twitter Feed堆叠并添加Tweetcrete块。按照说明使用您的Twitter帐户进行授权并单击。接下来点击联系表堆。选择形成块。添加您想要的字段:我们正在使用名称电子邮件电话服务信息。在选项选项卡中,添加您希望表单提交的电子邮件以及您希望从concrete5的附加部分获得的任何Captcha过滤器。点击

Final version of the website with all content in place. Notice how similar the text elements look to the editable version to the right

所有内容到位的网站的最终版本。请注意文本元素与右侧可编辑版本的相似程度

点击返回网站顶部编辑栏中的按钮。您将看到您的主页开始成型。最后一件事是添加幻灯片。将鼠标悬停在编辑按钮并选择编辑页面。进入此模式后,您将看到此页面上可编辑的所有区域,并以虚线突出显示。

您可以直接在页面上编辑任何块。编辑全局区域将重定向您到该特定堆栈。点击幻灯片区域和选择添加块然后选择幻灯片块。在下面类型下拉,选择文件集中的图片。选择我们之前创建的集合,称为幻灯片。点击。现在将鼠标悬停在编辑按钮并选择发布页面。图像将自动被拉入。

而已。您现在已经完成了包含内容的主页。因为我们设置了全局区域,所以每次向网站添加新页面时,所有重复内容都将自动放置在页面上,只留下添加特定于该页面的内容。

发现35鼓舞人心CSS的例子在我们的姐妹网站Creative Bloq。



翻译字数超限