|
|
: {1 C, I) J1 |2 j' n6 i
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:2 f4 ]$ |9 K) D& s8 R
& m L' b" X# p1.下载主题文件8 q/ Q8 O$ P: X
8 z5 G: ~, O4 ?% v1 @+ f! q在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。5 k4 F5 i- U0 [+ m- H, }0 t* D, a
, a! x2 G. p5 g( i" l* w2 i2.创建 Typecho 主题目录
; ^; G: i! [6 A; A5 L7 Z& C6 |1 W. @# `& V3 ~
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
5 T+ |1 S/ ?+ R, C4 m% A8 n8 f8 `/ ?, K
3.解压主题文件6 s3 S+ R0 ~6 {, O/ i& w
8 [2 J, `$ m5 y
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
% o- t( a# M* N# z* M/ c5 Z$ ^: q+ C- Q# K7 d5 w( {' X( U
assets/
4 B9 t/ c4 G+ J6 I( cdist/7 s+ D5 H" ~5 [' ?- M% k) i
inc/
4 a: Z$ i6 |7 K" \$ G* R, T+ `node_modules/( X' I* S2 a$ n* z+ m6 M
partials/+ U+ ?" r: {- r0 i, R0 \6 O- D
templates/
' g+ A2 j) k- F.babelrc
2 K, J; ?& P4 \9 f# W3 }! P4 k.eslintrc.js/ K6 j1 v1 S& }' O- k, w
gulpfile.js8 I K) l+ O. ^. @* r) T8 @
package.json
' S2 v7 O0 w- Uwebpack.config.js
( _7 O) Z5 C" z O1 [7 \$ W4.修改主题样式表文件/ V( {: m9 V% [' `$ M& B% S# Z
2 u0 L" B2 S6 p% `
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:2 b0 R% H+ O# ~- o! ]) U
& }- C; T8 c \: F
css
( v/ n1 _' i+ T) u dbackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');: }- J. f' t3 |+ P$ ~# w- w$ y
修改为:
& o( e/ L6 Y2 E, [% I
0 Y4 Q7 e) U5 b; Gcss* F [: K% Z2 P0 I4 I0 ?
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');7 ^5 L( `. @- t# V3 I ]
5.创建 Typecho 主题配置文件
1 F( n! X8 {4 Y1 k! u4 p$ q$ C8 E3 Q6 g9 w( o" ~% t# h' l. U% h! {+ C
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:. U7 {! c/ O( R0 H9 t
9 P! m- q8 j7 }9 Vphp" i/ l b+ N' R! ~- T; x
<?php
- U. [1 y; V" T* e c5 X. c( ereturn array(
! a- [, W2 m/ a8 N6 j. D$ c' M 'name' => 'Heropress Pro',. d, a- Z% r+ w3 H) a! d
'description' => 'Typecho adaptation of Heropress Pro theme',
+ j% ~2 i* X& v5 S8 C; l 'version' => '1.0',
& R" m2 U" Z# L. \, n, a2 ?4 z 'author' =>'Your Name',2 J1 G( [0 A6 [% u% @. ~
);5 x7 H% {3 O/ J V; h% f" | h( Z2 M7 V
6.配置主题布局文件
3 `" ^3 Q! g( g% k$ R' s+ r5 n
/ F, k' L! C1 o) y* S: o: g- }在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码: ~& s6 X- T4 S% H) D
! ~1 q# |8 J/ ~# q9 W s
php
2 |; b. c4 i; m M" m% w% y$ a G<?php while ($this->next()): ?>
6 J, Y4 J1 J1 L5 s' ?<div class="post">
4 V/ S1 Q" x8 W0 S( y, G <h2 class="post-title">
h% [! x9 T$ {' t1 d4 i8 o p <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
" N( k/ Q2 `3 r* m# S8 ] </h2>
) Z; L5 A, @& k+ ^2 _. u <div class="post-meta">! u8 S, d' M4 B0 m+ T5 U) ^$ r
<span><?php $this->date('F j, Y'); ?></span>$ g. f9 D P, ` @% |
<?php if($this->tags): ?>
/ t* i: v) t+ o. {! a5 a <span class="post-tags">
5 m$ o/ Y, b0 G a! c# v# H <?php $this->tags(', ', true, 'none'); ?>
" \8 y0 ^/ A& T7 U* n. E% j </span>' W6 F9 P1 d: _+ d7 t0 |
<?php endif; ?>
& i/ k7 u5 N4 x2 J4 K </div>
1 i6 F' E* i. v; y <div class="post-content">- X- D2 }7 z' p8 ?+ v/ p
<?php $this->content('Read more »'); ?>
9 S/ B* ?5 Y4 p% Y7 t' ~ </div>
3 r6 ]4 {+ R# v" E" z</div>
T. h$ m- t* o( R6 h<?php endwhile; ?>
( }$ R+ E% Z7 H3 n7.调用 Typecho 函数; @1 y2 S2 f2 Q/ d
7 E3 w- Y7 m# w1 \3 M% x) k在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:' B9 ^8 `( K' L1 N: g! T
[% u/ D' [# Q8 i( z! D" L
用 the_title() 替换 get_the_title()。
! J) c6 d/ Z H; n" T
5 \. O. u7 v. H9 s% g4 ]7 W0 p# B* o用 the_permalink() 替换 get_permalink()。
, z( a7 S. Y+ u2 j% ^2 |0 L/ P! u- ?! t! {; o P
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
. C6 c. O4 u4 s3 G, `% c; V
& k. ]& M4 O; X5 `4 |+ a0 ?# \( {用 $this->content('Read more »'); 替换 the_content('Read more »')。
* Q! E/ ^8 P1 @9 @" Y% M* Z! Q$ [* ?
8.添加 Typecho 标记
' N2 C5 j( a4 S8 m
$ r: E; n$ E; a6 |1 Z在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:: A# K c1 N" U$ [
% s" t/ t% x) ~; v0 y1 ^ Nphp `( s7 O1 ^; L. z* u5 B- Z
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?># ^+ z" [8 m9 Y! ]4 K( J
<?php $this->need('header.php'); ?>
; n. K) f2 a6 L8 ]<div id="main" class="container">
0 i5 j6 I' z; }5 Y3 L6 F: l( a <div id="content" class="row">
1 m$ ]4 z' p, w <?php while ($this->next()): ?>
1 v9 D: x, z" }, H/ m. T: W/ ]; H' C; L <div class="col-md-8 col-md-offset-2">
/ D' q+ H$ v* I u1 V <div class="post">6 k) D, l* ~$ t, V0 j
<h2 class="post-title">2 r( k: f) b' ? k: n& a8 i
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
1 }: ^' P: E! u R: Q& t" x </h2>. Y' B" S+ L/ \ h
<div class="post-meta">
9 ~% ]+ |4 A- H1 Q- } <span><?php $this->date('F j, Y'); ?></span>
0 F. ], T7 _/ s; F: Q0 Y8 f <?php if($this->tags): ?>
$ B; O* _$ r' z% S4 C <span class="post-tags">
% c2 o' q$ [! q7 e9 L: Z) a! F& G <?php $this->tags(', ', true, 'none'); ?>1 e6 I- b7 B4 {$ M
</span>
/ C! i2 r! r7 X5 J" I2 [ <?php endif; ?>
/ j, m7 U6 D- J* L8 z# ]5 M6 c </div>1 f) }$ e' O, m/ h* W7 o7 `; ?! R$ \
<div class="post-content">. r' R4 W' @0 I6 l, F0 t+ Y/ I
<?php $this->content('Read more »'); ?>
* s# S* k6 _# L# ~! b, G1 E </div>' o$ V1 m" e+ f1 ]; u1 T
</div>
2 O7 a1 `+ }2 P( S% D) w5 Z1 L </div>: N" z+ w# n6 x9 B
<?php endwhile; ?>2 [( y% L, W7 D+ X
</div>
. {3 B+ y9 G) o1 u5 t</div>8 a! L! y7 p: Z E8 Z( P
<?php $this->need('footer.php'); ?>
0 W; a4 x1 g/ \ s6 W9.调整其他可能需要的文件和代码
5 {: }: \ A0 e [: T
( k1 s0 Z' `, M v根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:% W- o1 E+ B. J. m# Y4 I; ~+ f
; u. I2 D* G2 g# }2 r" q
html
3 Z9 V1 M0 B2 Q1 S<title><?php $this->archiveTitle(array( k4 _7 [/ D/ s5 ~1 |0 Q
'category' => _t('%s'),
9 S% ]" V" D8 s1 h+ \" A2 I 'search' => _t('Search "%s"'),
, k2 ^7 ]1 k1 z* d/ m4 l; `" k+ c 'tag' => _t('Tag "%s"'),# ]. S/ S( l3 t/ ?) l
'author' => _t('Author "%s"'),
, |2 o7 ?6 V$ l' g L4 S 'date' => _t('Archive "%s"'),+ @8 L6 F' Y/ T& T& n8 x
'default' => ''# m3 S2 O' ?! f: S
), '', ' - '); ?><?php $this->options->title(); ?>
% q; E ~& A1 }" k+ r2 b1 I) G</title>
' m$ L4 w9 t. h. P( L' k" B* d& s10.使用主题6 e2 m* s4 j3 E! r( [
$ X0 ~0 F8 E) r R, K6 O
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。5 u! C8 ~, u' `+ X( u+ @
3 X; y; r2 Y; w4 s. x8 l以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。$ n: P6 e. H! i
# p- [7 K3 {# F; q3 v3 Q9 X* h
|
|